/*
 * Bandeau de consentement.
 *
 * Il réutilise les variables et les classes du thème (`color-scheme-1`,
 * `.button`) plutôt que d'imposer ses propres couleurs : il s'accorde ainsi au
 * site sans le modifier, et suivra automatiquement tout changement de charte.
 *
 * Règle de forme respectée ici, et régulièrement sanctionnée quand elle ne
 * l'est pas : « Tout refuser » et « Tout accepter » ont exactement la même
 * apparence, la même taille et la même place. Aucun des deux n'est mis en
 * avant par rapport à l'autre.
 */

.mc-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2147483000;
  padding: 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mc-consent[hidden] {
  display: none;
}

.mc-consent__boite {
  pointer-events: auto;
  width: min(46rem, 100%);
  background: var(--color-background, #fff);
  color: var(--color-foreground, rgb(0 0 0 / 0.81));
  border: 1px solid var(--color-border, rgb(0 0 0 / 0.12));
  border-radius: var(--style-border-radius-buttons-primary, 0);
  box-shadow: 0 2px 24px rgb(0 0 0 / 0.14);
  padding: 1.25rem 1.4rem;
  font-family: var(--font-body--family, Inter, sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
  max-height: 80vh;
  overflow-y: auto;
}

.mc-consent__titre {
  font-family: var(--font-heading--family, Inter, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--color-foreground-heading, inherit);
}

.mc-consent__intro {
  margin: 0 0 1rem;
}

.mc-consent__lien {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Les catégories, visibles seulement après « Personnaliser » ─────────── */

.mc-consent__details {
  border-block-start: 1px solid var(--color-border, rgb(0 0 0 / 0.12));
  margin-block-end: 1rem;
  padding-block-start: 0.75rem;
}

.mc-consent__details[hidden] {
  display: none;
}

.mc-consent__categorie + .mc-consent__categorie {
  margin-block-start: 0.9rem;
}

.mc-consent__bascule {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 500;
}

.mc-consent__bascule input[disabled] {
  cursor: not-allowed;
}

.mc-consent__toujours {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
  margin-inline-start: auto;
}

.mc-consent__categorie-detail {
  margin: 0.3rem 0 0 1.85rem;
  font-size: 0.8125rem;
  opacity: 0.78;
}

/* ── Les boutons ────────────────────────────────────────────────────────── */

.mc-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/*
 * « Refuser » et « Accepter » partagent exactement les mêmes règles : c'est
 * délibéré, et c'est la condition d'un consentement libre.
 */
.mc-consent__bouton {
  flex: 1 1 10rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
}

.mc-consent__bouton[hidden] {
  display: none;
}

/*
 * « Personnaliser » est en retrait : ce n'est pas un choix de consentement,
 * c'est un accès aux réglages. Le mettre au même niveau que les deux autres
 * brouillerait la lecture, sans avantager ni l'acceptation ni le refus.
 */
.mc-consent__bouton--discret {
  flex: 0 1 auto;
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border, rgb(0 0 0 / 0.18));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lien permanent du pied de page. */
.mc-consent__rouvrir {
  cursor: pointer;
}

@media (max-width: 30rem) {
  .mc-consent {
    padding: 0.5rem;
  }
  .mc-consent__boite {
    padding: 1rem;
  }
  .mc-consent__bouton {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mc-consent__boite {
    animation: mc-consent-apparition 0.25s ease-out;
  }
  @keyframes mc-consent-apparition {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/*
 * Bouton WhatsApp flottant.
 *
 * Il remplace celui que dessinait une application tierce, en lien direct :
 * aucun script, aucun appel extérieur. Volontairement discret, au-dessus du
 * contenu mais sous le panier et le bandeau de consentement.
 */
.mc-whatsapp {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.22);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mc-whatsapp:hover,
.mc-whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.28);
  color: #fff;
}

/* Le bandeau de consentement occupe le bas de l'écran : on s'écarte. */
#mc-consent:not([hidden]) ~ .mc-whatsapp {
  inset-block-end: 11rem;
}

@media (max-width: 30rem) {
  .mc-whatsapp {
    width: 3rem;
    height: 3rem;
    inset-inline-end: 0.75rem;
    inset-block-end: 0.75rem;
  }
}