/* ===== Design variables (on peut ajuster pour coller à la charte) ===== */
:root{
  --cookie-bg: #0f1115;                 /* fond bannière */
  --cookie-fg: #ffffff;                 /* texte */
  --cookie-muted: #c9ced6;              /* texte secondaire */
  --cookie-link: #91c6ff;               /* lien */
  --cookie-radius: 14px;
  --cookie-gap: 1rem;
  --cookie-blur: 10px;
  --cookie-shadow: 0 12px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --cookie-bg: rgba(255,255,255,.9);
    --cookie-fg: #0c0d0f;
    --cookie-muted: #4b5563;
    --cookie-link: #0d6efd;
    --cookie-shadow: 0 18px 40px rgba(0,0,0,.12);
  }
}

/* ===== Banner wrapper (bottom sheet) ===== */
.cookie-banner{
  position: fixed;
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  bottom: calc(-100% - 40px);
  z-index: 9999;
  color: var(--cookie-fg);
  background: var(--cookie-bg);
  -webkit-backdrop-filter: blur(var(--cookie-blur));
  backdrop-filter: blur(var(--cookie-blur));
  box-shadow: var(--cookie-shadow);
  border-top-left-radius: var(--cookie-radius);
  border-top-right-radius: var(--cookie-radius);
  transition: transform .28s ease, opacity .28s ease;
  transform: translateY(24px);
  opacity: 0;
}
.cookie-banner.is-open{
  bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--cookie-gap);
  align-items: center;
  padding: 1rem clamp(.75rem, 2vw, 1.25rem);
}

/* Icon */
.cookie-banner__icon{
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

/* Texts */
.cookie-title{
  font-size: clamp(1rem, .9rem + .3vw, 1.1rem);
  margin: 0 0 .25rem 0;
  font-weight: 700;
}
.cookie-desc{
  color: var(--cookie-muted);
  margin: 0;
  line-height: 1.45;
}
.cookie-desc .link-underline{
  color: var(--cookie-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Actions */
.cookie-banner__actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== Modal nicer look (pour garder la mienne) ===== */
.cookie-modal{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 10000;
  transition: opacity .2s ease;
}
.cookie-modal.is-open{ display: flex; }
.cookie-modal__dialog{
  width: min(720px, calc(100% - 2rem));
  border-radius: 16px;
  background: var(--cookie-bg);
  color: var(--cookie-fg);
  -webkit-backdrop-filter: blur(var(--cookie-blur));
  backdrop-filter: blur(var(--cookie-blur));
  box-shadow: var(--cookie-shadow);
  padding: 1.25rem;
}
.cookie-group{ margin: .75rem 0 1rem 0; }
.cookie-group strong{ display:block; margin-bottom:.25rem; }
.cookie-group p{ color: var(--cookie-muted); margin: 0 0 .5rem 0; }
.cookie-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }

/* ===== Responsive ===== */
@media (max-width: 768px){
  .cookie-banner__inner{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cookie-banner__icon{ display: none; } /* garde le texte en priorité sur mobile */
  .cookie-banner__actions{ justify-content: stretch; }
  .cookie-banner__actions .btn{ flex: 1 1 auto; }
}

/* ===== Accessibilité ===== */
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition: none; }
  .cookie-modal{ transition: none; }
}