/* ---------- Isolation totale ---------- */
/* Hard-reset contenu du composant (sans impacter le site) */
.kpf-cc-root,
.kpf-cc-root * {
  all: revert;
  box-sizing: border-box;
}

.kpf-cc-root [hidden] { 
  display: none !important; 
}

/* Base du composant (indépendant du thème) */
.kpf-cc-root {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #666;
  line-height: 1.5;
  font-size: 14px;
}

/* ---------- FAB (bas-gauche) ---------- */
.kpf-cc-root #kpf-cc-fab{
  position: fixed;
    left: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1em;
    display: grid;
    place-items: center;
    z-index: 99;
}
.kpf-cc-root #kpf-cc-fab:hover{ filter: brightness(1.05); }

/* Texte uniquement pour lecteurs d'écran */
.kpf-cc-root .kpf-cc-sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* FAB avec SVG en background */
.kpf-cc-root #kpf-cc-fab.kpf-cc-fab--svg{
  background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px;
    color: transparent;
    line-height: 0;
}

/* ---------- Box (bas-gauche) ---------- */
.kpf-cc-root .kpf-cc-box{
  position: fixed;
    left: 15px;
    bottom: 80px;
    width: min(420px, 92vw);
    transform: translateX(-100px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, transform .3s, visibility .15s;
    z-index: 9981;
}
.kpf-cc-root .kpf-cc-box[aria-hidden="false"]{
  opacity: 1; visibility: visible; transform: translateX(0);
}

.kpf-cc-root .kpf-cc-box__inner{
  background: #fff;
  color: #666;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 20px 20px 10px;
  border: 1px solid #e9eef5;
}

/* ---------- En-tête + décor ---------- */
.kpf-cc-root .kpf-cc-box__head{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  line-height: 1em;
  margin-bottom: 10px;
  color: #333;
}
.kpf-cc-root .kpf-cc-box__title{ font-weight: 400; font-size: 1.5em; }

.kpf-cc-root .kpf-cc-brand-bg{
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  user-select: none;
  opacity: .9;
}

/* ---------- Corps ---------- */
.kpf-cc-root .kpf-cc-box__line{ margin: 15px 0; line-height: 1.5; }
.kpf-cc-root .kpf-cc-box__bold{
  color: #333; font-weight: 600;
  line-height: 1.1; font-size: 2em;
  width: 70%;
}

/* ---------- Liste des cookies ---------- */
.kpf-cc-root .kpf-cc-details__list{
  margin: 6px 0 10px 0; padding: 0; list-style: none;
}
.kpf-cc-root .kpf-cc-cookie{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0; border-bottom: 1px solid #e9eef5; margin: 0 5px;
}
.kpf-cc-root li.kpf-cc-cookie::before{
  content:"";
  display: none;
}
.kpf-cc-root .kpf-cc-cookie:last-child{ border-bottom: none; }
.kpf-cc-root .kpf-cc-cookie__label{ color: #666; }
.kpf-cc-root .kpf-cc-cookie__check input[type="checkbox"]{
  width: 15px; height: 15px; cursor: pointer; accent-color: #9aa7b4; opacity: .7;
}

/* ---------- Actions ---------- */
.kpf-cc-root .kpf-cc-box__actions{
  display: flex; justify-content: flex-end; gap: 15px; margin-top: 10px;
}
.kpf-cc-root .kpf-cc-btn{
  user-select: none; display: inline-block;
  padding: 8px 15px; border-radius: 2px;
  font-weight: 600; cursor: pointer;
  border: 1px solid #e6e6e6; background: #fff; color: #333;
}
.kpf-cc-root .kpf-cc-btn--accept{ background: #e6e6e6; color: #05251d; border-color: transparent; transition: background .15s; }
.kpf-cc-root .kpf-cc-btn--accept:hover{ background: #ededed; }
.kpf-cc-root .kpf-cc-btn--ghost{ background: #fff; color: #333; }

/* ---------- Responsive ---------- */
@media (max-width: 575px){
  .kpf-cc-root .kpf-cc-box{ left: 12px; right: 12px; width: auto; }
  .kpf-cc-root #kpf-cc-fab{ left: 5px; bottom: 5px; }
}