@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   BANDEAU & MODALE COOKIES — FORMAT VERTICAL
   ========================================================================== */

/* Couleur d'accentuation */
.cookie-box .pink-text,
.cookie-modal .pink-text { 
  color: #ec008c !important; 
  font-weight: 700 !important; 
}

/* -------------------------------------------------------------
   01. BANDEAU DE BASE (Panneau Vertical Compact)
   ------------------------------------------------------------- */
#custom-cookie-banner p.cookie-intro {
  font-style: italic !important;
  font-weight: 525 !important;
  margin-bottom: 6px !important; /* Contrôle de l'espace entre les 2 paragraphes */
}

#custom-cookie-banner.cookie-box {
  all: initial; /* Neutralise le CSS global du site */
  position: fixed !important; 
  bottom: 24px !important; 
  right: 24px !important; 
  width: 260px !important; /* Format vertical étroit */
  max-width: calc(100vw - 48px) !important;
  background: #ffffff !important; 
  border: none !important; 
  outline: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  padding: 20px 12px 16px 12px !important; 
  z-index: 99999 !important;
  font-family: "Open Sans", sans-serif; 
  color: #2d3748 !important;
  box-sizing: border-box !important;
}

#custom-cookie-banner h3 { 
  all: unset !important;
  display: block !important;
  margin: 0 0 10px 0 !important; 
  font-size: 1.70rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a202c !important;
}

#custom-cookie-banner p { 
  all: unset !important;
  display: block !important;
  margin: 0 0 20px 0 !important; 
  font-size: 1.35rem !important;
  line-height: 1.45 !important; 
  color: #4a5568 !important;
}

/* Disposition verticale des boutons (empilés) */
#custom-cookie-banner .cookie-actions { 
  display: flex !important; 
  flex-direction: column !important; /* Alignement vertical */
  gap: 8px !important; 
  width: 100% !important;
}

/* -------------------------------------------------------------
   02. CARTOUCHES ET BOUTONS (Pleine largeur sur la verticale)
   ------------------------------------------------------------- */
#custom-cookie-banner .btn-dark, 
#custom-cookie-banner .btn-light,
#custom-cookie-modal .btn-dark, 
#custom-cookie-modal .btn-light {
  all: unset !important;
  border: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 13px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
letter-spacing: 0.03em !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important; /* Remplit la largeur du volet */
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Accepter & Refuser (CMJN 0,0,0,75 -> #58595b) */
#custom-cookie-banner .btn-dark,
#custom-cookie-modal .btn-dark { 
  background-color: #58595b !important; 
  color: #ffffff !important; 
}

/* Personnaliser (CMJN 0,0,0,10 -> #e6e7e8) */
#custom-cookie-banner .btn-light,
#custom-cookie-modal .btn-light { 
  background-color: #e6e7e8 !important; 
  color: #4a5568 !important; 
}

/* Survol en Rose #ec008c pour l'ensemble des cartouches */
#custom-cookie-banner .btn-dark:hover, 
#custom-cookie-banner .btn-light:hover,
#custom-cookie-modal .btn-dark:hover, 
#custom-cookie-modal .btn-light:hover { 
  background-color: #ec008c !important; 
  color: #ffffff !important; 
}

/* -------------------------------------------------------------
   03. FENÊTRE MODALE DE PRÉFÉRENCES (Masquée par défaut)
   ------------------------------------------------------------- */
.cookie-modal-overlay {
  display: none; 
  position: fixed !important; 
  top: 0 !important; 
  left: 0 !important; 
  width: 100% !important; 
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important; 
  backdrop-filter: blur(2px) !important;
  align-items: center !important; 
  justify-content: center !important;
  z-index: 100000 !important; 
  padding: 20px !important; 
  box-sizing: border-box !important;
}

.cookie-modal {
  background: #ffffff !important; 
  width: 100% !important; 
  max-width: 480px !important; 
  border: none !important; 
  outline: none !important; 
  border-radius: 16px !important;
  padding: 24px !important; 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  box-sizing: border-box !important;
}

.cookie-modal .modal-header { 
  display: flex !important; 
  justify-content: space-between !important; 
  align-items: center !important; 
  margin-bottom: 20px !important; 
}

.cookie-modal .modal-header h2 { 
  all: unset !important;
  font-size: 1.70rem !important; 
  font-weight: 700 !important;
  color: #1a202c !important;
}

.cookie-modal .close-btn { 
  all: unset !important;
  font-size: 1.30rem !important; 
  cursor: pointer !important; 
  color: #a0aec0 !important; 
  line-height: 1 !important;
}

.cookie-modal .close-btn:hover { 
  color: #ec008c !important; 
}

.cookie-modal .cookie-option {
  display: flex !important; 
  justify-content: space-between !important; 
  align-items: center !important;
  padding: 12px 14px !important; 
  border: 1px solid #e2e8f0 !important; 
  border-radius: 10px !important; 
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

.cookie-modal .option-text h4 { 
  all: unset !important;
  display: block !important;
  margin: 0 0 4px 0 !important; 
  font-size: 1.50rem !important; 
  font-weight: 600 !important;
  color: #2d3748 !important;
}

.cookie-modal .option-text p { 
  all: unset !important;
  display: block !important;
  margin: 0 !important; 
  font-size: 1.30rem !important; 
  color: #718096 !important; 
  line-height: 1.35 !important;
}

.cookie-modal .badge-always { 
  font-size: 1.15rem !important; 
  background: #edf2f7 !important; 
  color: #4a5568 !important; 
  padding: 4px 8px !important; 
  border-radius: 6px !important; 
  font-weight: 600 !important; 
  white-space: nowrap !important;
}

/* Zone d'option cliquable */
.cookie-modal .selectable-option { 
  cursor: pointer !important; 
  transition: border-color 0.2s, background-color 0.2s !important; 
  border-color: #cbd5e0 !important; 
}

.cookie-modal .selectable-option:hover { 
  border-color: #ec008c !important; 
  background: rgba(236, 0, 140, 0.02) !important; 
}

.cookie-modal .selectable-option.active-option { 
  border-color: #ec008c !important; 
  background: rgba(236, 0, 140, 0.04) !important; 
}

.cookie-modal .option-status { 
  display: flex !important; 
  align-items: center !important; 
  gap: 10px !important; 
}

.cookie-modal .status-indicator { 
  font-size: 1.05rem !important; 
  font-weight: 600 !important; 
  color: #a0aec0 !important; 
}

.cookie-modal .status-indicator.active { 
  color: #ec008c !important; 
}

/* Interrupteur (Toggle) */
.cookie-modal .switch { 
  position: relative !important; 
  display: inline-block !important; 
  width: 40px !important; 
  height: 22px !important; 
}

.cookie-modal .switch input { 
  opacity: 0 !important; 
  width: 0 !important; 
  height: 0 !important; 
}

.cookie-modal .slider { 
  position: absolute !important; 
  cursor: pointer !important; 
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; 
  background-color: #cbd5e0 !important; 
  transition: .3s !important; 
  border-radius: 22px !important; 
}

.cookie-modal .slider:before { 
  position: absolute !important; 
  content: "" !important; 
  height: 16px !important; 
  width: 16px !important; 
  left: 3px !important; 
  bottom: 3px !important; 
  background-color: #ffffff !important; 
  transition: .3s !important; 
  border-radius: 50% !important; 
}

.cookie-modal input:checked + .slider { 
  background-color: #ec008c !important; 
}

.cookie-modal input:checked + .slider:before { 
  transform: translateX(18px) !important; 
}

.cookie-modal .modal-footer { 
  display: flex !important; 
  gap: 10px !important; 
  margin-top: 20px !important; 
}

.cookie-modal .modal-footer .btn-dark,
.cookie-modal .modal-footer .btn-light {
  flex: 1 !important;
}