/* ==========================================================
   FROSTED ECHOES - CONSENTEMENT : JETONS ET BANDEAU
   Direction active : frosted-echoes.

   Les jetons sont redeclares ici plutot que repris du theme :
   le bandeau s affiche aussi sur les pages rendues par Bricks,
   qui ne chargent pas la feuille du theme. Ils sont portes par
   les racines du composant, jamais par :root, pour ne rien
   deverser dans le reste du document.
   ========================================================== */

#fecc-banner,
#fecc-panel,
.fecc-manage-btn {
  --fecc-glacier:#F7F9FA;
  --fecc-deep:#0E2A3F;
  --fecc-night:#0A0A0C;
  --fecc-muted:#AEBFCB;
  --fecc-accent:#1E6F8C;
  --fecc-cyan:168 220 235;
  --fecc-sm:16px;
  --fecc-md:32px;
  --fecc-r-sm:4px;
  --fecc-r-md:14px;
  --fecc-ease-mist:cubic-bezier(.22,.61,.36,1);
  --fecc-ease-glacier:cubic-bezier(.16,1,.30,1);
  --fecc-titre:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --fecc-texte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Verre givre ----------
   Flou 12px, filet cyan a 14 pour cent, comme les panneaux du site.
   Aucune ombre portee noire : la direction l interdit. */
.fecc-frosted{
  position:relative;
  isolation:isolate;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}

/* Grain argentique a 6 pour cent. */
.fecc-frosted::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Bandeau ----------
   Pose en bas, sa limite haute est une ligne glacee. Il monte une
   fois, en 900ms : une revelation, pas une alerte. */
#fecc-banner{
  position:fixed;
  inset:auto 0 0 0;
  z-index:999990;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--fecc-md);
  padding:20px clamp(20px,5vw,56px);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  background:rgb(10 10 12/.88);
  border-top:1px solid rgb(var(--fecc-cyan)/.20);
  color:var(--fecc-glacier);
  font-family:var(--fecc-texte);
  opacity:0;
  transform:translateY(28px);
  animation:fecc-monte .9s var(--fecc-ease-glacier) .35s forwards;
}
@keyframes fecc-monte{ to{ opacity:1; transform:none; } }

#fecc-banner > *{ position:relative; z-index:2; }

.fecc-text{
  margin:0;
  max-width:62ch;
  font-size:.92rem;
  line-height:1.6;
  color:var(--fecc-muted);
}
.fecc-text a{ color:rgb(var(--fecc-cyan)/.92); text-underline-offset:3px; }

.fecc-buttons{ display:flex; align-items:center; gap:12px; flex:none; }

/* ---------- Boutons ----------
   Aplat glace noire, texte glacier, rayon 4px, hauteur 48px.
   Au survol : halo cyan diffus et remontee d un pixel.

   Accepter et Refuser sont strictement identiques. Refuser doit
   etre aussi simple et aussi visible qu accepter : exigence de la
   CNIL autant que question d honnetete. */
.fecc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  margin:0;
  border:1px solid rgb(var(--fecc-cyan)/.28);
  border-radius:var(--fecc-r-sm);
  background:var(--fecc-night);
  color:var(--fecc-glacier);
  font-family:var(--fecc-titre);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:box-shadow .3s var(--fecc-ease-mist),border-color .3s var(--fecc-ease-mist),transform .3s var(--fecc-ease-glacier);
}
.fecc-btn:hover{
  border-color:rgb(var(--fecc-cyan)/.55);
  box-shadow:0 0 0 1px rgb(var(--fecc-cyan)/.42),0 0 34px rgb(var(--fecc-cyan)/.30);
  transform:translateY(-1px);
}
.fecc-btn:focus-visible{ outline:2px solid rgb(var(--fecc-cyan)/.9); outline-offset:3px; }

/* Parametrer : troisieme voie, plus discrete que les deux choix
   francs, sans jamais devenir difficile a trouver. */
.fecc-settings{
  background:transparent;
  border-color:transparent;
  color:var(--fecc-muted);
  text-decoration:underline;
  text-underline-offset:4px;
}
.fecc-settings:hover{ color:var(--fecc-glacier); border-color:transparent; box-shadow:none; }

/* ---------- Bouton de rappel (shortcode) ----------
   Il vit sur la page Politique des cookies, sur fond clair :
   le cyan bascule en encre, jamais en clair. */
.fecc-manage-btn{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--fecc-accent);
  border-radius:var(--fecc-r-sm);
  background:transparent;
  color:var(--fecc-accent);
  font-family:var(--fecc-titre);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:box-shadow .3s var(--fecc-ease-mist),background .3s var(--fecc-ease-mist);
}
.fecc-manage-btn:hover{ background:rgb(var(--fecc-cyan)/.12); box-shadow:0 0 24px rgb(var(--fecc-cyan)/.28); }

/* ---------- Telephone ---------- */
@media (max-width:760px){
  #fecc-banner{
    flex-direction:column;
    align-items:stretch;
    gap:var(--fecc-sm);
    padding:var(--fecc-sm) 20px;
    padding-bottom:calc(var(--fecc-sm) + env(safe-area-inset-bottom));
  }
  .fecc-text{ font-size:.88rem; }
  .fecc-buttons{ flex-wrap:wrap; }
  .fecc-buttons .fecc-accept,
  .fecc-buttons .fecc-refuse{ flex:1 1 46%; }
  .fecc-buttons .fecc-settings{ flex:1 1 100%; min-height:40px; }
}

@media (prefers-reduced-motion:reduce){
  #fecc-banner{ animation:none; opacity:1; transform:none; }
  .fecc-btn,.fecc-manage-btn{ transition:none; }
  .fecc-btn:hover{ transform:none; }
}