@charset "utf-8";

/* ==========================================================================
   BANDEAU & MODALE COOKIES — HIÉRARCHIE VISUELLE HARMONISÉE
   ========================================================================== */

.cookie-box .pink-text,
.cookie-modal .pink-text { 
  color: #ec008c !important; 
  font-weight: 700 !important; 
}

/* -------------------------------------------------------------
   01. BANDEAU FIXE EN BAS À DROITE (Largeur : 280px)
   ------------------------------------------------------------- */
#custom-cookie-banner p.cookie-intro {
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
  color: #ec008c !important;
}

#custom-cookie-banner.cookie-box {
  display: none;
  position: fixed !important; 
  bottom: 20px !important; 
  right: 20px !important; 
  width: 280px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important; 
  border: 1px solid #cbd5e0 !important; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
  padding: 20px 18px !important; 
  z-index: 999999 !important;
  font-family: "Open Sans", sans-serif !important; 
  color: #1a202c !important;
  box-sizing: border-box !important;
  transform: translateZ(0);
}

/* Titre dominant */
#custom-cookie-banner h3 { 
  display: block !important;
  margin: 0 0 10px 0 !important; 
  font-size: 1.45rem !important; /* ~23px : Dominant */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1a202c !important;
}

#custom-cookie-banner p { 
  display: block !important;
  margin: 0 0 18px 0 !important; 
  font-size: 1.1rem !important; /* ~17.5px */
  line-height: 1.45 !important; 
  color: #1a202c !important;
}

#custom-cookie-banner .cookie-actions { 
  display: flex !important; 
  flex-direction: column !important; 
  gap: 10px !important; 
  width: 100% !important;
}

/* -------------------------------------------------------------
   02. BOUTONS (Proportionnés sous le titre)
   ------------------------------------------------------------- */
#custom-cookie-banner .btn-dark, 
#custom-cookie-banner .btn-light,
#custom-cookie-modal .btn-dark, 
#custom-cookie-modal .btn-light {
  border: 0 !important;
  padding: 12px 18px !important; 
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 1.2rem !important; /* ~19px : Très lisible tout en restant sous le titre */
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important; 
  text-align: center !important;
  box-sizing: border-box !important;
}

#custom-cookie-banner .btn-dark,
#custom-cookie-modal .btn-dark { 
  background-color: #4a5568 !important; 
  color: #ffffff !important; 
}

#custom-cookie-banner .btn-light,
#custom-cookie-modal .btn-light { 
  background-color: #e2e8f0 !important; 
  color: #1a202c !important; 
}

#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 (Gestion des préférences)
   ------------------------------------------------------------- */
.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.5) !important; 
  align-items: center !important; 
  justify-content: center !important;
  z-index: 1000000 !important; 
  padding: 16px !important; 
  box-sizing: border-box !important;
}

.cookie-modal {
  background: #ffffff !important; 
  width: 100% !important; 
  max-width: 520px !important; 
  border-radius: 12px !important;
  padding: 26px 24px !important; 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important; 
  font-family: system-ui, -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: 12px !important; 
}

.cookie-modal .modal-header h2 { 
  margin: 0 !important;
  font-size: 1.6rem !important; 
  font-weight: 700 !important;
  color: #1a202c !important;
}

.cookie-modal p {
  font-size: 1.1rem !important; 
  line-height: 1.45 !important;
  color: #2d3748 !important;
}

.cookie-modal .close-btn { 
  border: none !important;
  background: transparent !important;
  font-size: 2.2rem !important; 
  cursor: pointer !important; 
  color: #718096 !important; 
  line-height: 1 !important;
  padding: 2px !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: 18px 18px !important; 
  border: 1px solid #cbd5e0 !important; 
  border-radius: 8px !important; 
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
  gap: 14px !important;
}

.cookie-modal .option-text h4 { 
  display: block !important;
  margin: 0 0 6px 0 !important; 
  font-size: 1.3rem !important; 
  font-weight: 700 !important;
  color: #1a202c !important;
}

.cookie-modal .option-text p { 
  display: block !important;
  margin: 0 !important; 
  font-size: 1.1rem !important; 
  color: #1a202c !important; 
  line-height: 1.45 !important;
}

.cookie-modal .badge-always { 
  font-size: 1rem !important; 
  background: #e2e8f0 !important; 
  color: #1a202c !important; 
  padding: 6px 12px !important; 
  border-radius: 4px !important; 
  font-weight: 700 !important; 
  white-space: nowrap !important;
}

.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,
.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: 12px !important; 
  flex-shrink: 0 !important;
}

.cookie-modal .status-indicator { 
  font-size: 1rem !important; 
  font-weight: 700 !important; 
  color: #718096 !important; 
}

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

/* Interrupteur Switch */
.cookie-modal .switch { 
  position: relative !important; 
  display: inline-block !important; 
  width: 50px !important; 
  height: 28px !important; 
  flex-shrink: 0 !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: .2s !important; 
  border-radius: 20px !important; 
}

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

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

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

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

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

/* -------------------------------------------------------------
   04. AJUSTEMENTS BUREAU
   ------------------------------------------------------------- */
@media (min-width: 992px) {
  #custom-cookie-banner.cookie-box {
    width: 280px !important;
    max-width: 280px !important;
    padding: 22px 18px !important;
  }

  #custom-cookie-banner h3 {
    font-size: 1.55rem !important; /* ~25px sur bureau : Titre bien au-dessus */
    margin-bottom: 10px !important;
  }

  #custom-cookie-banner p.cookie-intro {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  #custom-cookie-banner p {
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
  }

  #custom-cookie-banner .btn-dark,
  #custom-cookie-banner .btn-light {
    font-size: 1.25rem !important; /* ~20px sur bureau */
    padding: 12px 18px !important;
  }
}