/* frontend/vitrine/cookie-consent.css
   bandeau + panneau de préférences. Réutilise les tokens de style.css. */

.cc-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(7, 11, 26, 0.97);
 backdrop-filter: blur(12px);
 border-top: 1px solid rgba(255,255,255,0.1);
 padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
 display: flex;
 align-items: center;
 gap: 1.5rem;
 flex-wrap: wrap;
 transform: translateY(110%);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cc-banner.is-visible { transform: translateY(0); }
.cc-banner p { margin: 0; font-size: 0.86rem; color: var(--mist-100, #E7EAF5)
; max-width:
62ch; flex: 1 1 320px; }
.cc-banner a { color: var(--gold-300, #F2D488); text-decoration: underline; }
.cc-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.cc-btn {
  font-family: inherit; font-weight: 600; font-size: 0.82rem;
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid transparent
;
  cursor: pointer; white-space: nowrap;
}
.cc-btn-accept { background: linear-gradient(135deg, #F2D488, #E3B23C); color
: #070B1A;
}
.cc-btn-reject { background: transparent; border-color: rgba(255,255,255,0.28
); color: #fff; }
.cc-btn-prefs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14);
color: #fff; }
.cc-btn:focus-visible { outline: 2px solid #E3B23C; outline-offset: 2px; }

.cc-modal-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(2, 4, 12, 0.7);
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.cc-modal-overlay.is-open { display: flex; }
.cc-modal {
  width: min(520px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: #0E1530;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 1.75rem;
  color: #E7EAF5;
}
.cc-modal h2 { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; margin: 0 0 0.75rem;
color: #fff; }
.cc-modal p { font-size: 0.85rem; margin: 0 0 1rem; }
.cc-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 0.9rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.cc-category:first-of-type { border-top: none; }
.cc-category-info h3 { font-size: 0.92rem; margin: 0 0 0.3rem; color: #F2D488
; }
.cc-category-info p { font-size: 0.8rem; margin: 0; color: #A6B0CC; }
.cc-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position
: absolute;
cursor: pointer; }
.cc-switch .cc-track { position: absolute; inset: 0; background: rgba(255,255
,255,0.15);
border-radius: 999px; transition: background 0.2s; }
.cc-switch .cc-thumb { position: absolute; top: 3px; left: 3px; width: 18px;
height: 18px;
border-radius: 50%; background: #fff; transition: transform 0.2s; }
.cc-switch input:checked + .cc-track { background: #16B876; }
.cc-switch input:checked + .cc-track .cc-thumb { transform: translateX(18px);
}
.cc-switch input:disabled + .cc-track { background: rgba(227,178,60,0.5); cursor: not-allowed;
}
.cc-switch input:focus-visible + .cc-track { outline: 2px solid #E3B23C; outline-offset: 2px; }
.cc-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner { transition: none; }

}