/* =========================================================================
   Système de consentement aux cookies — UN1TÉ
   - Bannière d'accueil (bas gauche), affichée une seule fois (1re visite).
   - Icône flottante (bas gauche) rouvrant la modale de préférences.
   - Modale centrale de gestion des catégories de cookies.
   Thème sombre du site : bleu #130076 / accent #578bfa / bordeaux #760019.
   ========================================================================= */

:root{
  --ck-blue:#130076;
  --ck-blue-accent:#578bfa;
  --ck-bordeaux:#760019;
  --ck-ink:#1b1b2b;
  --ck-muted:#5a5a6b;
  --ck-line:#e3e3ee;
  --ck-radius:14px;
  --ck-shadow:0 18px 50px rgba(9,9,37,.35);
}

/* Empêche le défilement de l'arrière-plan quand la modale est ouverte */
body.ck-modal-open{overflow:hidden;}

/* ------------------------------------------------------------------ */
/* 1. Bannière d'accueil (première visite) — bas gauche               */
/* ------------------------------------------------------------------ */
.ck-banner{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:12000;
  width:min(430px, calc(100vw - 32px));
  background:#fff;
  color:var(--ck-ink);
  border:1px solid var(--ck-line);
  border-radius:var(--ck-radius);
  box-shadow:var(--ck-shadow);
  padding:26px 26px 22px;
  font-family:'Roboto','Montserrat',system-ui,sans-serif;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
}
.ck-banner.ck-show{opacity:1;transform:translateY(0);}

.ck-banner h2{
  font-size:1.18rem;
  font-weight:700;
  margin:0 0 12px;
  color:var(--ck-ink);
}
.ck-banner p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--ck-muted);
  margin:0 0 12px;
}
.ck-banner a{color:var(--ck-blue-accent);text-decoration:underline;}
.ck-banner .ck-banner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.ck-banner .ck-banner-actions .ck-btn{flex:1 1 auto;}

/* ------------------------------------------------------------------ */
/* 2. Boutons                                                          */
/* ------------------------------------------------------------------ */
.ck-btn{
  appearance:none;
  border:1.5px solid var(--ck-blue);
  background:#fff;
  color:var(--ck-blue);
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  padding:11px 16px;
  border-radius:9px;
  cursor:pointer;
  text-align:center;
  line-height:1.2;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ck-btn:hover{box-shadow:0 4px 14px rgba(19,0,118,.18);}
.ck-btn.ck-btn-primary{
  background:var(--ck-blue);
  color:#fff;
  border-color:var(--ck-blue);
}
.ck-btn.ck-btn-primary:hover{background:#1c0aa0;}

/* ------------------------------------------------------------------ */
/* 3. Icône flottante (bas gauche)                                    */
/* ------------------------------------------------------------------ */
.ck-fab{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:11500;
  width:52px;
  height:52px;
  border-radius:50%;
  border:none;
  background:var(--ck-blue);
  color:#fff;
  cursor:pointer;
  display:none;              /* affichée par le JS une fois le choix fait */
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(9,9,37,.45);
  transition:transform .2s ease, background .2s ease;
}
.ck-fab.ck-show{display:flex;}
.ck-fab:hover{transform:scale(1.07);background:#1c0aa0;}
.ck-fab svg{width:26px;height:26px;display:block;}

/* ------------------------------------------------------------------ */
/* 4. Modale centrale de préférences                                  */
/* ------------------------------------------------------------------ */
.ck-overlay{
  position:fixed;
  inset:0;
  z-index:12500;
  background:rgba(9,9,20,.6);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .28s ease;
}
.ck-overlay.ck-show{display:flex;opacity:1;}

.ck-modal{
  background:#fff;
  color:var(--ck-ink);
  width:min(880px, 100%);
  max-height:calc(100vh - 40px);
  border-radius:16px;
  box-shadow:var(--ck-shadow);
  display:flex;
  flex-direction:column;
  font-family:'Roboto','Montserrat',system-ui,sans-serif;
  transform:translateY(16px);
  transition:transform .28s ease;
}
.ck-overlay.ck-show .ck-modal{transform:translateY(0);}

.ck-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px 16px;
  border-bottom:1px solid var(--ck-line);
}
.ck-modal-head h2{font-size:1.15rem;font-weight:700;margin:0;color:var(--ck-ink);}
.ck-close{
  appearance:none;border:none;background:transparent;
  font-size:1.6rem;line-height:1;color:var(--ck-muted);
  cursor:pointer;padding:2px 6px;border-radius:6px;
}
.ck-close:hover{color:var(--ck-ink);background:#f2f2f7;}

.ck-modal-body{
  padding:16px 26px 8px;
  overflow-y:auto;
}
.ck-modal-intro{font-size:.9rem;line-height:1.6;color:var(--ck-muted);margin:0 0 8px;}

/* Catégories (accordéon) */
.ck-cat{border-bottom:1px solid var(--ck-line);}
.ck-cat:last-child{border-bottom:none;}
.ck-cat-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 2px;
  cursor:pointer;
}
.ck-cat-toggle-arrow{
  border:none;background:transparent;cursor:pointer;
  font-size:.8rem;color:var(--ck-muted);
  transition:transform .2s ease;
  padding:2px;flex:0 0 auto;
}
.ck-cat.ck-open .ck-cat-toggle-arrow{transform:rotate(90deg);}
.ck-cat-title{
  flex:1 1 auto;
  font-size:1rem;
  font-weight:700;
  color:var(--ck-ink);
}
.ck-cat-status{
  font-size:.85rem;font-weight:700;color:#1a9d5a;
  flex:0 0 auto;
}

/* Interrupteur */
.ck-switch{position:relative;width:44px;height:24px;flex:0 0 auto;}
.ck-switch input{opacity:0;width:0;height:0;position:absolute;}
.ck-slider{
  position:absolute;inset:0;cursor:pointer;
  background:#c9c9d6;border-radius:24px;transition:background .2s ease;
}
.ck-slider::before{
  content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .2s ease;
}
.ck-switch input:checked + .ck-slider{background:var(--ck-blue);}
.ck-switch input:checked + .ck-slider::before{transform:translateX(20px);}
.ck-switch input:disabled + .ck-slider{background:var(--ck-blue-accent);opacity:.55;cursor:not-allowed;}

.ck-cat-body{
  display:none;
  padding:0 2px 18px 30px;
}
.ck-cat.ck-open .ck-cat-body{display:block;}
.ck-cat-body p{font-size:.86rem;line-height:1.6;color:var(--ck-muted);margin:0 0 8px;}
.ck-cat-body p:last-child{margin-bottom:0;}

.ck-modal-foot{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:18px 26px 22px;
  border-top:1px solid var(--ck-line);
}
.ck-modal-foot .ck-btn{flex:1 1 auto;}

/* ------------------------------------------------------------------ */
/* 5. Responsive                                                      */
/* ------------------------------------------------------------------ */
/* Prise en compte de l'encoche / barre iOS (safe-area) */
.ck-banner{bottom:calc(24px + env(safe-area-inset-bottom, 0px));}
.ck-fab{bottom:calc(22px + env(safe-area-inset-bottom, 0px));}

@media (max-width:520px){
  .ck-banner{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));width:auto;padding:22px 20px 18px;}
  .ck-fab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
  .ck-banner .ck-banner-actions{flex-direction:column;}
  .ck-banner .ck-banner-actions .ck-btn{flex:1 1 100%;}
  .ck-modal-head,.ck-modal-body,.ck-modal-foot{padding-left:18px;padding-right:18px;}
  .ck-modal-foot{flex-direction:column;}
  .ck-modal-foot .ck-btn{flex:1 1 100%;}
}