/* Salé / Sucré — bandeau animé (salière + sucrière) */

.sel-band{
  --sel-bg: var(--green);
  --sel-gold: #E3C777;
  background: var(--green);
  color: var(--cream);
  padding-block: 28px 30px;
  overflow: hidden;
}
.sel-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }
.sel-stage{ max-width: 640px; margin-inline: auto; padding-inline: 24px; }
.sel-scene{
  display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.sel-fill{ fill: var(--sel-bg); }
.sel-solid{ fill: currentColor; stroke: none; }
.sel-gold{ fill: var(--sel-gold); }
.sel-sq-a{ fill: var(--green-deep); stroke: none; }
.sel-sq-b{ fill: var(--cream); stroke: none; }

.sel-label{
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: .22em;
  fill: currentColor; stroke: none; opacity: 0;
}
.sel-sparkle{ fill: var(--sel-gold); stroke: none; opacity: 0; transform: scale(0); }
.sel-pile{ opacity: 0; }

.sel-band.is-paused *{ animation-play-state: paused !important; }

/* ---------- Animation (boucle de 10 s) ---------- */
.sel-shaker{ transform-origin: 0 -45px; animation: sel-shaker 10s ease-in-out infinite; }
@keyframes sel-shaker{
  0%, 4%  { transform: none; }
  12%     { transform: translate(34px, -90px) rotate(130deg); }
  13%     { transform: translate(34px, -90px) rotate(122deg); }
  15%     { transform: translate(34px, -90px) rotate(139deg); }
  17%     { transform: translate(34px, -90px) rotate(122deg); }
  19%     { transform: translate(34px, -90px) rotate(139deg); }
  21%     { transform: translate(34px, -90px) rotate(122deg); }
  23%     { transform: translate(34px, -90px) rotate(139deg); }
  25%     { transform: translate(34px, -90px) rotate(122deg); }
  27%     { transform: translate(34px, -90px) rotate(139deg); }
  29%     { transform: translate(34px, -90px) rotate(122deg); }
  31%     { transform: translate(34px, -90px) rotate(139deg); }
  33%     { transform: translate(34px, -90px) rotate(130deg); }
  41%     { transform: none; }
  100%    { transform: none; }
}

.sel-sucrier{ animation: sel-hop 10s ease-out infinite; }
@keyframes sel-hop{
  0%, 45.5% { transform: none; }
  47%       { transform: translateY(-4px); }
  49%       { transform: none; }
  74%       { transform: none; }
  75.5%     { transform: translateY(1.5px); }
  77%, 100% { transform: none; }
}
.sel-lid{ transform-origin: 0 -60px; animation: sel-lid 10s ease-in-out infinite; }
@keyframes sel-lid{
  0%, 45%  { transform: none; }
  49%      { transform: translate(38px, -42px) rotate(26deg); }
  55%      { transform: translate(38px, -45px) rotate(22deg); }
  62%      { transform: translate(38px, -41px) rotate(27deg); }
  70%      { transform: translate(38px, -42px) rotate(26deg); }
  74%      { transform: translate(2px, 3px) rotate(-3deg); }
  76%, 100% { transform: none; }
}

.sel-gx{ animation: sel-gx 10s linear infinite; animation-delay: var(--d, 0s); }
.sel-gy{
  opacity: 0;
  animation-name: sel-fall, sel-blink;
  animation-duration: 10s, 10s;
  animation-timing-function: cubic-bezier(.4, 0, .9, .6), linear;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--d, 0s), var(--d, 0s);
}
@keyframes sel-gx{
  0%   { transform: translateX(0); }
  7.4% { transform: translateX(var(--dx)); }
  100% { transform: translateX(var(--dx)); }
}
@keyframes sel-fall{
  0%   { transform: translateY(0) rotate(0deg); }
  7.4% { transform: translateY(var(--dy)) rotate(var(--r)); }
  100% { transform: translateY(var(--dy)) rotate(var(--r)); }
}
@keyframes sel-blink{
  0%   { opacity: 0; }
  .5%  { opacity: 1; }
  7.2% { opacity: 1; }
  7.8% { opacity: 0; }
  100% { opacity: 0; }
}

.sel-ux{ animation: sel-ux 10s linear infinite; animation-delay: var(--d, 0s); }
.sel-uy{
  opacity: 0;
  animation-name: sel-uy, sel-blink-u;
  animation-duration: 10s, 10s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--d, 0s), var(--d, 0s);
}
@keyframes sel-ux{
  0%   { transform: translateX(0); }
  9%   { transform: translateX(var(--dx)); }
  100% { transform: translateX(var(--dx)); }
}
@keyframes sel-uy{
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  3.6% { transform: translateY(calc(var(--h) * -1)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  9%   { transform: translateY(var(--dy)); }
  100% { transform: translateY(var(--dy)); }
}
@keyframes sel-blink-u{
  0%   { opacity: 0; }
  .6%  { opacity: 1; }
  8.6% { opacity: 1; }
  9.1% { opacity: 0; }
  100% { opacity: 0; }
}

.sel-pile-salt{ animation: sel-pile-salt 10s ease-out infinite; }
.sel-pile-sugar{ animation: sel-pile-sugar 10s ease-out infinite; }
@keyframes sel-pile-salt{
  0%, 20%  { opacity: 0; transform: scale(.5, 0); }
  21%      { opacity: 1; transform: scale(.55, .06); }
  42%      { opacity: 1; transform: scale(1, 1); }
  90%      { opacity: 1; transform: scale(1, 1); }
  97%      { opacity: 0; transform: scale(1, 1); }
  100%     { opacity: 0; transform: scale(.5, 0); }
}
@keyframes sel-pile-sugar{
  0%, 57%  { opacity: 0; transform: scale(.5, 0); }
  58%      { opacity: 1; transform: scale(.55, .06); }
  76%      { opacity: 1; transform: scale(1, 1); }
  90%      { opacity: 1; transform: scale(1, 1); }
  97%      { opacity: 0; transform: scale(1, 1); }
  100%     { opacity: 0; transform: scale(.5, 0); }
}

.sel-lab-salt{ animation: sel-lab-1 10s ease-in-out infinite; }
.sel-lab-sucre{ animation: sel-lab-2 10s ease-in-out infinite; }
@keyframes sel-lab-1{
  0%, 26% { opacity: 0; }
  32%, 90% { opacity: .9; }
  97%, 100% { opacity: 0; }
}
@keyframes sel-lab-2{
  0%, 66% { opacity: 0; }
  72%, 90% { opacity: .9; }
  97%, 100% { opacity: 0; }
}

.sel-sparkle{ animation: sel-twinkle 10s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes sel-twinkle{
  0%    { opacity: 0; transform: scale(0) rotate(0deg); }
  4.5%  { opacity: 1; transform: scale(var(--sc, 1)) rotate(45deg); }
  9%    { opacity: 0; transform: scale(0) rotate(90deg); }
  100%  { opacity: 0; transform: scale(0) rotate(90deg); }
}

/* ---------- Mouvement réduit : tableau fixe ---------- */
@media (prefers-reduced-motion: reduce){
  .sel-band *{ animation: none !important; }
  .sel-pile, .sel-label{ opacity: 1; transform: none; }
  .sel-label{ opacity: .9; }
  .sel-gy, .sel-uy, .sel-sparkle{ opacity: 0; }
}