/**
 * Override style WPConsent (bannière RGPD)
 *
 * IMPORTANT : WPConsent utilise un Shadow DOM (#shadow-root) qui isole les styles.
 * Le CSS depuis l'extérieur ne peut PAS pénétrer dedans, SAUF via :
 *   - Les variables CSS (Custom Properties) : elles traversent le Shadow DOM
 *   - Les attributs sur l'host (le conteneur du Shadow DOM)
 *
 * Stratégie :
 *   1. Override des variables CSS de WPConsent sur #wpconsent-root
 *   2. Masquage via le conteneur visible #wpconsent-container (hors Shadow DOM)
 *   3. Position/dimensions du host via #wpconsent-banner-holder (CSS part)
 */

/* ============================================================================
   1. MASQUAGE PENDANT LE LOADER
   ============================================================================
   On masque le conteneur racine quand le body a is-loading.
   Le garde-fou JS (header.php) retire is-loading après 7s max. */

body.is-loading #wpconsent-root,
body.is-loading #wpconsent-container {
  display: none !important;
}

/* Apparition douce après le loader */
#wpconsent-root {
  animation: wpconsent-fade-in 0.6s ease-out;
}

@keyframes wpconsent-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   2. OVERRIDE DES VARIABLES CSS (traversent le Shadow DOM)
   ============================================================================
   Ces variables sont définies par le plugin sur #wpconsent-root.
   En les surchargant ici, on impacte tout l'intérieur du Shadow DOM. */

#wpconsent-root {
  /* Palette de fond */
  --wpconsent-background: #0f0f0f !important;
  --wpconsent-text: #a8a8a8 !important;
  --wpconsent-outline-color: rgba(212, 165, 116, 0.2) !important;
  --wpconsent-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;

  /* Bouton "Accepter tous" — ambre primary */
  --wpconsent-accept-bg: #d4a574 !important;
  --wpconsent-accept-color: #0a0a0a !important;
  --wpconsent-accept-border: #d4a574 !important;
  --wpconsent-accept-hover-bg: #c89560 !important;
  --wpconsent-accept-hover-color: #0a0a0a !important;

  /* Bouton "Refuser" — ghost transparent */
  --wpconsent-cancel-bg: transparent !important;
  --wpconsent-cancel-color: #a8a8a8 !important;
  --wpconsent-cancel-border: #2a2a2a !important;
  --wpconsent-cancel-hover-bg: transparent !important;
  --wpconsent-cancel-hover-color: #d4a574 !important;
  --wpconsent-cancel-hover-border: #d4a574 !important;

  /* Bouton "Préférences" — ghost transparent */
  --wpconsent-preferences-bg: transparent !important;
  --wpconsent-preferences-color: #a8a8a8 !important;
  --wpconsent-preferences-border: #2a2a2a !important;
  --wpconsent-preferences-hover-bg: transparent !important;
  --wpconsent-preferences-hover-color: #d4a574 !important;
  --wpconsent-preferences-hover-border: #d4a574 !important;

  /* Liens (politique de confidentialité, etc.) */
  --wpconsent-link-color: #d4a574 !important;
  --wpconsent-link-hover-color: #c89560 !important;

  /* Typographie */
  --wpconsent-font-family: 'Inter', sans-serif !important;
  --wpconsent-font-size: 13px !important;
  --wpconsent-title-color: #fafafa !important;
  --wpconsent-title-font-family: 'Bebas Neue', sans-serif !important;
  --wpconsent-title-font-size: 20px !important;
  --wpconsent-title-letter-spacing: 2px !important;
  --wpconsent-title-text-transform: uppercase !important;

  /* Spacing et bordures */
  --wpconsent-padding: 24px !important;
  --wpconsent-border-radius: 4px !important;
  --wpconsent-border: 1px solid #1c1c1c !important;

  /* Modal préférences */
  --wpconsent-modal-bg: #0f0f0f !important;
  --wpconsent-modal-overlay: rgba(7, 7, 7, 0.92) !important;
  --wpconsent-modal-text: #a8a8a8 !important;
  --wpconsent-modal-title: #fafafa !important;
  --wpconsent-modal-border: #1c1c1c !important;

  /* Toggles dans le modal */
  --wpconsent-toggle-bg: #2a2a2a !important;
  --wpconsent-toggle-active-bg: #d4a574 !important;
  --wpconsent-toggle-handle: #fafafa !important;
}

/* ============================================================================
   3. POSITION DU HOST (extérieur Shadow DOM, donc accessible)
   ============================================================================ */

#wpconsent-banner-holder.wpconsent-banner-floating-right-bottom {
  bottom: 16px !important;
  right: 16px !important;
  top: auto !important;
  left: auto !important;
  max-width: 480px !important;
  width: calc(100% - 32px) !important;
}

/* ============================================================================
   4. MODE CLAIR (toggle thème)
   ============================================================================ */

body.theme-light #wpconsent-root,
html[data-theme="light"] #wpconsent-root {
  --wpconsent-background: #f2ebde !important;
  --wpconsent-text: #5a4c38 !important;
  --wpconsent-title-color: #181206 !important;
  --wpconsent-outline-color: rgba(168, 112, 47, 0.2) !important;
  --wpconsent-border: 1px solid #d3c6a8 !important;

  --wpconsent-accept-bg: #a8702f !important;
  --wpconsent-accept-color: #ffffff !important;
  --wpconsent-accept-border: #a8702f !important;
  --wpconsent-accept-hover-bg: #8e5c25 !important;

  --wpconsent-cancel-color: #5a4c38 !important;
  --wpconsent-cancel-border: #bdae8a !important;
  --wpconsent-cancel-hover-color: #a8702f !important;
  --wpconsent-cancel-hover-border: #a8702f !important;

  --wpconsent-preferences-color: #5a4c38 !important;
  --wpconsent-preferences-border: #bdae8a !important;
  --wpconsent-preferences-hover-color: #a8702f !important;
  --wpconsent-preferences-hover-border: #a8702f !important;

  --wpconsent-link-color: #a8702f !important;
  --wpconsent-link-hover-color: #8e5c25 !important;

  --wpconsent-modal-bg: #f2ebde !important;
  --wpconsent-modal-overlay: rgba(242, 235, 222, 0.92) !important;
  --wpconsent-modal-text: #5a4c38 !important;
  --wpconsent-modal-title: #181206 !important;
  --wpconsent-modal-border: #d3c6a8 !important;

  --wpconsent-toggle-bg: #bdae8a !important;
  --wpconsent-toggle-active-bg: #a8702f !important;
}

/* ============================================================================
   5. RESPONSIVE MOBILE
   ============================================================================ */

@media (max-width: 640px) {
  #wpconsent-banner-holder.wpconsent-banner-floating-right-bottom,
  #wpconsent-banner-holder {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  #wpconsent-root {
    --wpconsent-padding: 18px !important;
    --wpconsent-title-font-size: 18px !important;
    --wpconsent-font-size: 12px !important;
  }
}