/**
 * Fenêtre cookies — surcouche design system .arkt-* (templates/custom).
 * Complète public/assets/css/public/structure/legal/cookies.css sans le remplacer.
 */

/* ----- Voile modal ----- */
#welcome-to-blur {
  background: var(--arkt-rgba-black-045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

/* ----- Panneau consentement ----- */
#portfolio_page .welcome-to-windows,
.welcome-to-windows {
  color: var(--arkt-text);
  background: var(--arkt-color-header-bg);
  backdrop-filter: blur(var(--arkt-blur-header));
  -webkit-backdrop-filter: blur(var(--arkt-blur-header));
  border: var(--arkt-page-border);
  border-radius: var(--arkt-radius-card);
  box-shadow: var(--arkt-header-float-shadow);
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
}

#welcome-to h3 {
  color: var(--arkt-text);
  font-size: var(--arkt-type-h2-size);
  font-weight: var(--arkt-type-h2-weight);
  line-height: var(--arkt-type-h2-line);
  margin-bottom: 1rem;
}

#welcome-to #welcome-to-text {
  max-height: min(42vh, 240px);
  padding-right: 0.35rem;
  scrollbar-color: var(--arkt-rgba-white-25) transparent;
}

#welcome-to #welcome-to-text p {
  color: var(--arkt-text-muted);
  font-size: var(--arkt-type-caption-size);
  line-height: var(--portfolios-line-height-base, 1.55);
}

#welcome-to #welcome-to-text span {
  color: var(--arkt-accent) !important;
  font-weight: var(--portfolios-font-weight-bold, 700);
}

/* ----- Actions : grille + styles .arkt-btn (priorité sur cookies.css noyau) ----- */
#welcome-to.welcome-to-windows #welcome-to-actions.cookie-modal-actions,
#portfolio_page #welcome-to #welcome-to-actions.cookie-modal-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
}

#welcome-to.welcome-to-windows .cookie-modal-actions__row,
#portfolio_page #welcome-to .cookie-modal-actions__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

#welcome-to.welcome-to-windows #welcome-to-actions .folio_button,
#welcome-to.welcome-to-windows #welcome-to-actions .folio-button,
#portfolio_page #welcome-to #welcome-to-actions .folio_button,
#portfolio_page #welcome-to #welcome-to-actions .folio-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: 0.65rem 1.15rem !important;
  box-sizing: border-box;
  font-family: var(--arkt-font-family-sans) !important;
  font-size: var(--arkt-type-nav-size) !important;
  font-weight: var(--arkt-btn-font-weight) !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal;
  border-radius: var(--arkt-radius-pill) !important;
  border-style: solid !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background var(--arkt-btn-transition),
    color var(--arkt-btn-transition),
    border-color var(--arkt-btn-transition),
    transform var(--arkt-btn-transform-duration),
    box-shadow var(--arkt-btn-transition),
    filter var(--arkt-btn-transition) !important;
}

/* Primary — Accepter */
#welcome-to.welcome-to-windows #acceptwelcome.folio_button,
#welcome-to.welcome-to-windows #acceptwelcome.folio-button,
#portfolio_page #welcome-to #acceptwelcome.folio_button,
#portfolio_page #welcome-to #acceptwelcome.folio-button {
  color: var(--arkt-btn-cta-text) !important;
  background: var(--arkt-btn-cta-bg) !important;
  border-width: 2px !important;
  border-color: transparent !important;
  box-shadow: var(--arkt-btn-cta-shadow) !important;
  backdrop-filter: var(--arkt-hub-glass-blur);
  -webkit-backdrop-filter: var(--arkt-hub-glass-blur);
}

#welcome-to.welcome-to-windows #acceptwelcome.folio_button:hover,
#welcome-to.welcome-to-windows #acceptwelcome.folio-button:hover,
#portfolio_page #welcome-to #acceptwelcome.folio_button:hover,
#portfolio_page #welcome-to #acceptwelcome.folio-button:hover {
  color: var(--arkt-btn-cta-text) !important;
  background: var(--arkt-btn-cta-bg-hover) !important;
  border-color: transparent !important;
  box-shadow: var(--arkt-btn-cta-shadow-hover) !important;
  transform: translateY(-2px);
  filter: none !important;
}

/* Ghost — Personnaliser + Refuser (même famille visuelle) */
#welcome-to.welcome-to-windows .cookie-modal-actions__row a.folio_button,
#welcome-to.welcome-to-windows .cookie-modal-actions__row a.folio-button,
#welcome-to.welcome-to-windows #refusewelcome.folio_button,
#welcome-to.welcome-to-windows #refusewelcome.folio-button,
#portfolio_page #welcome-to .cookie-modal-actions__row a.folio_button,
#portfolio_page #welcome-to .cookie-modal-actions__row a.folio-button,
#portfolio_page #welcome-to #refusewelcome.folio_button,
#portfolio_page #welcome-to #refusewelcome.folio-button,
#portfolio_page #welcome-to .cookie-modal-actions__secondary.folio_button,
#portfolio_page #welcome-to .cookie-modal-actions__secondary.folio-button {
  color: var(--arkt-btn-cta-text) !important;
  background: var(--arkt-btn-ghost-bg) !important;
  border-width: 2px !important;
  border-color: var(--arkt-header-pill-border) !important;
  box-shadow: none !important;
  backdrop-filter: var(--arkt-hub-glass-blur);
  -webkit-backdrop-filter: var(--arkt-hub-glass-blur);
}

#welcome-to.welcome-to-windows .cookie-modal-actions__row a.folio_button:hover,
#welcome-to.welcome-to-windows .cookie-modal-actions__row a.folio-button:hover,
#welcome-to.welcome-to-windows #refusewelcome.folio_button:hover,
#welcome-to.welcome-to-windows #refusewelcome.folio-button:hover,
#portfolio_page #welcome-to .cookie-modal-actions__row a.folio_button:hover,
#portfolio_page #welcome-to .cookie-modal-actions__row a.folio-button:hover,
#portfolio_page #welcome-to #refusewelcome.folio_button:hover,
#portfolio_page #welcome-to #refusewelcome.folio-button:hover,
#portfolio_page #welcome-to .cookie-modal-actions__secondary.folio_button:hover,
#portfolio_page #welcome-to .cookie-modal-actions__secondary.folio-button:hover {
  color: var(--arkt-btn-cta-text) !important;
  background: var(--arkt-btn-ghost-bg-hover) !important;
  border-color: var(--arkt-header-pill-border) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
  filter: none !important;
}

#welcome-to.welcome-to-windows #refusewelcome.folio_button,
#welcome-to.welcome-to-windows #refusewelcome.folio-button,
#portfolio_page #welcome-to #refusewelcome.folio_button,
#portfolio_page #welcome-to #refusewelcome.folio-button {
  font-size: 0.875rem !important;
}

#welcome-to.welcome-to-windows #welcome-to-actions .folio_button:active,
#welcome-to.welcome-to-windows #welcome-to-actions .folio-button:active,
#portfolio_page #welcome-to #welcome-to-actions .folio_button:active,
#portfolio_page #welcome-to #welcome-to-actions .folio-button:active {
  transform: scale(0.98) !important;
  filter: none !important;
}

#welcome-to.welcome-to-windows #welcome-to-actions .folio_button:focus-visible,
#welcome-to.welcome-to-windows #welcome-to-actions .folio-button:focus-visible,
#portfolio_page #welcome-to #welcome-to-actions .folio_button:focus-visible,
#portfolio_page #welcome-to #welcome-to-actions .folio-button:focus-visible {
  outline: 2px solid var(--arkt-hub-color-primary);
  outline-offset: 2px;
}

@media screen and (max-width: 640px) {
  #welcome-to.welcome-to-windows .cookie-modal-actions__row,
  #portfolio_page #welcome-to .cookie-modal-actions__row {
    grid-template-columns: 1fr;
  }
}

/* ----- Page préférences cookies (toggles) ----- */
#portfolio_page .cookie-preferences-form {
  --cookie-toggle-track-off: linear-gradient(
    180deg,
    var(--arkt-rgba-white-08) 0%,
    var(--arkt-rgba-white-06) 100%
  );
  --cookie-toggle-track-on: linear-gradient(
    180deg,
    color-mix(in srgb, var(--arkt-accent) 88%, #ffffff) 0%,
    var(--arkt-accent) 100%
  );
  --cookie-toggle-focus-ring: color-mix(in srgb, var(--arkt-accent) 45%, transparent);
}

#portfolio_page .cookie-group {
  background: var(--arkt-card-bg);
  border: var(--arkt-page-border);
  border-radius: var(--arkt-radius-card);
}

#portfolio_page .cookie-info h2 {
  color: var(--arkt-text);
  font-weight: var(--arkt-type-h3-weight);
}

#portfolio_page .cookie-info p {
  color: var(--arkt-text-muted);
}

#portfolio_page #welcome-to-text span,
#portfolio_page main .cookie-preferences-form ~ #welcome-to-text span,
#portfolio_page #about #welcome-to-text span {
  color: var(--arkt-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  #welcome-to.welcome-to-windows #welcome-to-actions .folio_button,
  #welcome-to.welcome-to-windows #welcome-to-actions .folio-button,
  #portfolio_page #welcome-to #welcome-to-actions .folio_button,
  #portfolio_page #welcome-to #welcome-to-actions .folio-button {
    transition: none;
  }

  #welcome-to.welcome-to-windows #welcome-to-actions .folio_button:hover,
  #welcome-to.welcome-to-windows #welcome-to-actions .folio-button:hover,
  #portfolio_page #welcome-to #welcome-to-actions .folio_button:hover,
  #portfolio_page #welcome-to #welcome-to-actions .folio-button:hover {
    transform: none;
  }
}