/* ============================================================
   FFCQ — animation d'obtention de badge
   Feuille additive. À charger APRÈS css/ffcq-badges.css.
   Toutes les classes sont préfixées .bda-.
   ============================================================ */

.bda-couche {
  position: fixed; inset: 0; z-index: 400; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.bda-voile {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(27,58,104,.9) 0%, rgba(12,26,58,.94) 62%);
  backdrop-filter: blur(3px);
  animation: bdaVoile 200ms ease-out both;
}
.bda-bloc {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 6px;
}
.bda-couche.sortie .bda-voile,
.bda-couche.sortie .bda-bloc { animation: bdaSortie 320ms ease-in both; }

/* --- Médaillon et effets --- */
.bda-scene {
  position: relative; display: flex; align-items: center;
  justify-content: center; margin-bottom: 26px;
}
.bda-disque {
  position: relative; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: var(--bda-taille); height: var(--bda-taille);
  background: var(--bda-fond);
  /* La bordure touche le fond pâle du médaillon : elle garde le métal brut. */
  border: 5px solid var(--bda-anneau);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.45);
  color: var(--bda-encre);
  animation: bdaPop 640ms cubic-bezier(.22,1.2,.36,1) 120ms both;
}
.bda-disque svg { width: 50%; height: 50%; }
.bda-initiale {
  font-family: var(--police-titre, inherit);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: calc(var(--bda-taille) * 0.42);
}
.bda-lustre { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.bda-lustre span {
  position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: bdaLustre 900ms cubic-bezier(.3,.6,.4,1) 720ms both;
}

/* Halo, rais, éclats et anneau sont peints sur le voile : ils utilisent
   --bda-effet, qui vaut la teinte pâle du métal quand celui-ci est sombre. */
.bda-halo {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--bda-effet) 0%, transparent 70%);
  animation: bdaHalo 760ms cubic-bezier(.2,.7,.3,1) 220ms both;
}
.bda-rais, .bda-eclats { position: absolute; inset: 0; pointer-events: none; }
.bda-rai {
  position: absolute; left: 50%; top: 50%; width: 2.5px; margin-left: -1.25px;
  border-radius: 2px; transform-origin: 50% 0;
  background: linear-gradient(to top, transparent, var(--bda-effet));
  animation: bdaRai 620ms cubic-bezier(.2,.8,.3,1) both;
}
.bda-eclat {
  position: absolute; left: 50%; top: 50%;
  animation: bdaEclat 960ms cubic-bezier(.15,.7,.25,1) both;
}
.bda-anneau { position: absolute; inset: -15px; pointer-events: none; }
.bda-anneau circle {
  fill: none; stroke: var(--bda-effet); stroke-width: 2.5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  animation: bdaSweep 620ms cubic-bezier(.3,.9,.3,1) 420ms both;
}

/* --- Texte --- */
.bda-eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or, #f5b400);
  animation: bdaMonte 420ms cubic-bezier(.22,1.2,.36,1) 620ms both;
}
.bda-nom {
  display: block; font-family: var(--police-titre, inherit);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  color: #fff; margin: 9px 0 6px;
  animation: bdaMonte 420ms cubic-bezier(.22,1.2,.36,1) 700ms both;
}
.bda-sous {
  display: block; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72);
  animation: bdaMonte 420ms cubic-bezier(.22,1.2,.36,1) 780ms both;
}
.bda-metal {
  display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px;
  border-radius: 20px; background: var(--bda-fond); color: var(--bda-encre);
  animation: bdaMonte 420ms cubic-bezier(.22,1.2,.36,1) 860ms both;
}
.bda-pastilles {
  display: flex; gap: 6px; justify-content: center; margin-top: 14px;
  animation: bdaMonte 380ms cubic-bezier(.22,1.2,.36,1) 880ms both;
}
.bda-pastille {
  width: 9px; height: 9px; border-radius: 50%;
  /* Vide = creux, jamais un remplissage translucide : la distinction tient
     quel que soit le métal. */
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34);
}
.bda-pastille.on { background: var(--bda-effet); box-shadow: none; }
.bda-pastille.neuve {
  box-shadow: 0 0 12px var(--bda-effet);
  animation: bdaPast 420ms cubic-bezier(.22,1.2,.36,1) both;
}
.bda-pied {
  display: block; margin-top: 26px; font-size: 12.5px; color: rgba(255,255,255,.4);
  animation: bdaMonte 400ms ease-out 1300ms both;
}

/* --- Bandeau --- */
/* top: le header du site est fixe, 72px de haut (voir .header dans style.css) et passe
   par-dessus (z-index:1000) : sans cette marge, les toasts se retrouvaient recouverts. */
.bda-pile {
  position: fixed; top: 88px; right: 24px; z-index: 390;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.bda-toast {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  pointer-events: auto; max-width: 340px;
  background: #0c1a3a; border-radius: 14px; padding: 16px 20px 16px 16px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 46px rgba(12,26,58,.42);
  animation: bdaToast 620ms cubic-bezier(.22,1.2,.36,1) both;
}
.bda-toast.sortie { animation: bdaToastOut 300ms ease-in both; }
.bda-toast .bda-scene { margin: 0; }
.bda-toast .bda-disque { border-width: 3px; }
.bda-toast .bda-eyebrow { font-size: 10.5px; }
.bda-toast .bda-nom { font-size: 17px; margin: 3px 0 2px; }
.bda-toast .bda-sous { font-size: 12.5px; }
.bda-toast .bda-texte { min-width: 0; text-align: left; }

@keyframes bdaVoile   { from { opacity: 0 } to { opacity: 1 } }
@keyframes bdaSortie  { from { opacity: 1; transform: translateY(0) scale(1) } to { opacity: 0; transform: translateY(-26px) scale(.95) } }
@keyframes bdaPop     { 0% { transform: scale(.2) rotate(-16deg); opacity: 0 } 52% { transform: scale(1.14) rotate(4deg); opacity: 1 } 74% { transform: scale(.95) rotate(-1deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes bdaHalo    { 0% { transform: scale(.35); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes bdaRai     { 0% { transform: rotate(var(--a)) translateY(var(--r)) scaleY(0); opacity: 0 } 22% { opacity: 1 } 100% { transform: rotate(var(--a)) translateY(var(--r)) scaleY(1); opacity: 0 } }
@keyframes bdaEclat   { 0% { transform: translate(0,0) scale(1); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0 } }
@keyframes bdaSweep   { from { stroke-dashoffset: var(--len) } to { stroke-dashoffset: 0 } }
@keyframes bdaMonte   { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes bdaPast    { 0% { transform: scale(0) } 58% { transform: scale(1.45) } 100% { transform: scale(1) } }
@keyframes bdaLustre  { 0% { transform: translateX(-130%) skewX(-18deg) } 100% { transform: translateX(240%) skewX(-18deg) } }
@keyframes bdaToast   { 0% { transform: translateX(120%); opacity: 0 } 60% { transform: translateX(-8px); opacity: 1 } 100% { transform: translateX(0) } }
@keyframes bdaToastOut{ to { transform: translateX(120%); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .bda-couche *, .bda-toast, .bda-toast * { animation-duration: .01ms !important; }
  .bda-halo, .bda-rais, .bda-eclats, .bda-lustre { display: none !important; }
}

@media (max-width: 520px) {
  .bda-nom { font-size: 24px; }
  .bda-pile { top: 88px; right: 12px; left: 12px; }
  .bda-toast { max-width: none; }
}