/* ==========================================================
   FROSTED ECHOES - CONSENTEMENT : PANNEAU DE PREFERENCES
   Les jetons viennent de style.css, charge avant celui-ci.
   ========================================================== */

/* ---------- Voile ----------
   Brume sombre, pas un noir plat : la rampe de perspective
   aerienne commence a #05080C. */
#fecc-panel{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--fecc-sm);
  background:rgb(5 8 12/.66);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#fecc-panel.open{ display:flex; animation:fecc-brume .6s var(--fecc-ease-mist) forwards; }
@keyframes fecc-brume{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Panneau ----------
   Grand panneau givre : rayon 14px, le seul cas ou la direction
   l autorise. Filet cyan a 14 pour cent. */
.fecc-panel-inner{
  width:min(460px,100%);
  max-height:86dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(24px,5vw,36px);
  border:1px solid rgb(var(--fecc-cyan)/.14);
  border-radius:var(--fecc-r-md);
  background:rgb(14 42 63/.74);
  color:var(--fecc-glacier);
  font-family:var(--fecc-texte);
  transform:translateY(28px);
  opacity:0;
  animation:fecc-monte-panneau .85s var(--fecc-ease-glacier) forwards;
}
@keyframes fecc-monte-panneau{ to{ transform:none; opacity:1; } }

.fecc-panel-inner > *{ position:relative; z-index:2; }

/* ---------- Titre et intention ---------- */
.fecc-title{
  margin:0 0 12px;
  font-family:var(--fecc-titre);
  font-weight:300;
  font-size:clamp(1.4rem,1.2rem + .6vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--fecc-glacier);
}
.fecc-desc{
  margin:0 0 var(--fecc-md);
  font-size:.9rem;
  line-height:1.6;
  color:var(--fecc-muted);
}

/* ---------- Categories ----------
   Des filets, pas des cartes. */
.fecc-category{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--fecc-sm);
  min-height:56px;
  padding:10px 0;
  border-bottom:1px solid rgb(var(--fecc-cyan)/.14);
}
.fecc-category label{
  flex:1;
  font-size:.94rem;
  line-height:1.4;
  color:var(--fecc-glacier);
  cursor:pointer;
}

/* ---------- Interrupteur ----------
   Glisse en 300ms. Cyan clair une fois actif : nous sommes sur
   fond sombre, c est sa place. */
.fecc-toggle{
  flex:none;
  position:relative;
  width:46px;
  height:26px;
  margin:0;
  border:1px solid rgb(var(--fecc-cyan)/.22);
  border-radius:999px;
  background:rgb(247 249 250/.10);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:background .3s var(--fecc-ease-mist),border-color .3s var(--fecc-ease-mist);
}
.fecc-toggle::after{
  content:"";
  position:absolute;
  top:50%;
  left:3px;
  width:18px;
  height:18px;
  margin-top:-9px;
  border-radius:50%;
  background:var(--fecc-glacier);
  transition:transform .3s var(--fecc-ease-glacier);
}
.fecc-toggle:checked{
  background:rgb(var(--fecc-cyan)/.85);
  border-color:rgb(var(--fecc-cyan)/.6);
}
.fecc-toggle:checked::after{ transform:translateX(19px); background:var(--fecc-deep); }
.fecc-toggle:focus-visible{ outline:2px solid rgb(var(--fecc-cyan)/.9); outline-offset:3px; }

/* Cookies necessaires : verrouille en position active, et qui le
   montre. Un interrupteur qu on ne peut pas bouger doit avoir
   l air verrouille, pas eteint. */
.fecc-toggle.disabled{
  background:rgb(var(--fecc-cyan)/.30);
  border-color:rgb(var(--fecc-cyan)/.24);
  cursor:not-allowed;
  pointer-events:none;
}
.fecc-toggle.disabled::after{ transform:translateX(19px); background:rgb(247 249 250/.62); }

/* ---------- Actions ---------- */
.fecc-panel-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:var(--fecc-md);
}
.fecc-panel-actions .fecc-btn{ flex:1 1 auto; }

@media (max-width:420px){
  .fecc-panel-actions{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion:reduce){
  #fecc-panel.open,.fecc-panel-inner{ animation:none; opacity:1; transform:none; }
  .fecc-toggle,.fecc-toggle::after{ transition:none; }
}