/* ============================================================
   Consentement cookies — CKFD (bandeau autonome)
   Charte : vert #8DC63F · forêt #15271b · blanc
   ============================================================ */

#ckConsent {
  --ck-green: #8DC63F;
  --ck-forest: #15271b;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
#ckConsent [hidden] { display: none !important; }

/* ---------------- Bandeau bas ---------------- */
#ckConsent .ck-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483646;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  padding: 18px 22px;
  background: var(--ck-forest);
  color: #fff;
  border-top: 3px solid var(--ck-green);
  box-shadow: 0 -14px 40px -16px rgba(0,0,0,.55);
  animation: ck-rise .25s ease both;
}
@keyframes ck-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #ckConsent .ck-banner { animation: none; } }

#ckConsent .ck-text {
  flex: 1 1 420px;
  min-width: 280px;
  max-width: 720px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}
#ckConsent .ck-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

#ckConsent .ck-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---------------- Boutons ---------------- */
#ckConsent .ck-btn {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px 14px 8px 14px;
  padding: 11px 20px;
  cursor: pointer;
  transition: transform .05s, filter .15s, background .15s;
  white-space: nowrap;
}
#ckConsent .ck-btn:hover { filter: brightness(1.06); }
#ckConsent .ck-btn:active { transform: translateY(1px); }
#ckConsent .ck-btn:focus-visible { outline: 2px solid var(--ck-green); outline-offset: 2px; }

/* Tout accepter — primaire vert */
#ckConsent .ck-primary {
  background: var(--ck-green);
  color: var(--ck-forest);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
/* Tout refuser / Enregistrer — secondaire, lisible, égal accès */
#ckConsent .ck-ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
}
/* Paramétrer — lien discret */
#ckConsent .ck-link {
  background: transparent;
  color: rgba(255,255,255,.78);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  padding: 11px 12px;
}

/* ---------------- Modale de paramétrage ---------------- */
#ckConsent .ck-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#ckConsent .ck-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,15,11,.62);
  backdrop-filter: blur(2px);
}
#ckConsent .ck-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  color: var(--ck-forest);
  border-radius: 18px;
  border-top: 4px solid var(--ck-green);
  padding: 26px 26px 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  animation: ck-pop .2s ease both;
}
@keyframes ck-pop { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #ckConsent .ck-card { animation: none; } }

#ckConsent .ck-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  color: #5a6b60;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
#ckConsent .ck-close:hover { background: rgba(0,0,0,.05); color: var(--ck-forest); }

#ckConsent .ck-card h2 {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 1.3rem;
  margin: 0 36px 8px 0;
}
#ckConsent .ck-intro {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #45554b;
  margin: 0 0 18px;
}
#ckConsent .ck-intro a,
#ckConsent .ck-cat-desc a { color: #5a8a22; }

/* Catégories */
#ckConsent .ck-cat {
  border: 1px solid #e4eae3;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
#ckConsent .ck-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#ckConsent .ck-cat-name {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
#ckConsent .ck-always {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5a8a22;
  background: rgba(141,198,63,.14);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
#ckConsent .ck-cat-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #55655b;
  margin: 8px 0 0;
}

/* Interrupteur */
#ckConsent .ck-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
#ckConsent .ck-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
#ckConsent .ck-slider {
  position: absolute;
  inset: 0;
  background: #c7d0c8;
  border-radius: 999px;
  transition: background .18s;
}
#ckConsent .ck-slider::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#ckConsent .ck-switch input:checked + .ck-slider { background: var(--ck-green); }
#ckConsent .ck-switch input:checked + .ck-slider::before { transform: translateX(20px); }
#ckConsent .ck-switch input:focus-visible + .ck-slider { outline: 2px solid var(--ck-green); outline-offset: 2px; }

/* Actions de la modale */
#ckConsent .ck-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
#ckConsent .ck-modal-actions .ck-btn { flex: 1 1 auto; }
#ckConsent .ck-modal .ck-ghost {
  color: var(--ck-forest);
  box-shadow: inset 0 0 0 1.5px rgba(21,39,27,.22);
}

/* ---------------- Pastille de réouverture ---------------- */
#ckConsent .ck-reopen {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 2147483645;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ck-forest);
  color: var(--ck-green);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  transition: transform .12s;
}
#ckConsent .ck-reopen:hover { transform: scale(1.06); }
#ckConsent .ck-reopen:focus-visible { outline: 2px solid var(--ck-green); outline-offset: 2px; }

/* ============================================================
   Responsive + anti-conflit avec la barre CTA mobile
   ============================================================ */
@media (max-width: 980px) {
  #ckConsent .ck-banner {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    gap: 10px 12px;
  }
  #ckConsent .ck-text { flex-basis: 100%; text-align: center; font-size: 0.86rem; }
  #ckConsent .ck-actions { width: 100%; justify-content: center; }
  #ckConsent .ck-ghost, #ckConsent .ck-primary { flex: 1 1 auto; min-width: 130px; text-align: center; }

  /* tant que le bandeau cookies est affiché, on masque la barre CTA
     (évite la double barre en bas d'écran) */
  body.cookies-banner-open .mobile-bar { display: none !important; }
}