/* ============================================================
   Stephane ASTRO — Cookie Banner conforme CNIL 2026 · v93.1.0
   ============================================================
   Refonte audit juillet 2026 :
   - Carte compacte 380px ancrée bas-gauche
   - Ne recouvre plus jamais le CTA principal (mon-theme)
   - Palette v93 : var(--r-bg-0) + var(--r-gold) + var(--r-fg)
   - CNIL respecté : refuser aussi visible qu'accepter
   ============================================================ */

#sg-cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  z-index: 9000;
  width: 100%;
  max-width: 380px;
  background: var(--lx-surfa-97, rgba(10, 10, 10, 0.97));
  border: 1px solid var(--lx-goldink-35, rgba(228, 192, 126, 0.35));
  padding: 20px 22px;
  color: var(--r-fg);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  animation: sg-cookie-slide-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes sg-cookie-slide-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empêcher toute animation si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  #sg-cookie-banner { animation: none; }
}

/* Structure interne (garde la compatibilité avec le JS existant) */
.sg-cookie-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sg-cookie-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.sg-cookie-text strong {
  color: var(--r-gold);
  font-weight: 600;
}
.sg-cookie-text a {
  color: var(--r-gold);
  text-decoration: underline;
  text-decoration-color: var(--lx-goldink-4, rgba(228, 192, 126, 0.4));
}
.sg-cookie-text a:hover {
  color: var(--r-gold-bright);
  text-decoration-color: currentColor;
}

.sg-cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sg-cookie-btn {
  padding: 10px 14px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-height: 44px;
  white-space: nowrap;
}

/* RÈGLE CNIL : refuser aussi visible qu'accepter (même style outline) */
.sg-cookie-btn-refuse,
.sg-cookie-btn-customize {
  background: transparent;
  border-color: var(--lx-goldink-5, rgba(228, 192, 126, 0.5));
  color: var(--r-fg);
  grid-column: span 1;
}
.sg-cookie-btn-refuse:hover {
  background: var(--r-fg-line);
  border-color: var(--r-fg);
}
.sg-cookie-btn-customize:hover {
  background: rgba(228, 192, 126, 0.12);
  border-color: var(--r-gold);
}

/* Le bouton accept prend toute la largeur en dessous */
.sg-cookie-btn-accept {
  grid-column: 1 / -1;
  background: var(--r-gold);
  border-color: var(--r-gold);
  color: var(--r-bg-0);
}
.sg-cookie-btn-accept:hover {
  background: var(--r-gold-bright);
  border-color: var(--r-gold-bright);
}

.sg-cookie-btn:focus-visible {
  outline: 2px solid var(--r-gold);
  outline-offset: 3px;
}

/* Mobile — la carte reste ancrée bas mais s'étale pour rester utilisable.
   On pousse le contenu du body uniquement en mobile quand la carte est
   visible, pour ne pas masquer les CTA en bas de formulaire.
   Desktop n'a pas besoin de padding : la carte 380px reste à gauche
   du contenu centré. */
@media (max-width: 720px) {
  #sg-cookie-banner {
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
    padding: 16px 18px;
  }
  .sg-cookie-text {
    font-size: 13px;
  }
  body:has(#sg-cookie-banner) {
    padding-bottom: 220px;
  }
}