/* =========================================================
   Theme Name: Flippe de Flippe de Philippeville
   Description: Theme flippe.070.be
   Author: C. Delire
   Version: 10
   Template: Divi
========================================================= */

/* Import du thème parent (Divi) */
@import url("../Divi/style.css");

.DingDing {
  cursor: url('/wp-content/themes/flippedeflippe/assets/images/bingcursor.png') 16 16, pointer;
}

/* === Pastille rayonnante au-dessus du menu "Flip Masters" === */
#menu-item-100754 {
  position: relative;
}

/*#menu-item-100754::after {
  content: "";
  position: absolute;
  top: -100px;
  left: 35%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  background-image: url('https://flippe.070.be/wp-content/uploads/sites/12/2025/06/cta_trans_nouveau.png');
  background-size: contain;
  background-repeat: no-repeat;
  animation: pulseRayon 1.8s ease-in-out infinite;
  z-index: 99;
}

@media (max-width: 980px) {
  #menu-item-100754::after {
    display: none !important;
  }
}*/

/* Animation pulsée */
@keyframes pulseRayon {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.4);
    opacity: 0.6;
  }
}

/* =========================================================
   Styles Généraux - Pastilles animées
========================================================= */
.vh-center {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
body.single-flipper.postid-1234 #page-container {
  padding-top: 0 !important;
}
@keyframes bumperBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}


.quespastille img,
.quespastille-flat img,
.quespastille-small {
  width: 300px;
  height: 300px;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  padding: 0;
  animation: popBubble 0.6s ease-out forwards;
  box-shadow: none;
  transform-origin: center center;
}

.quespastille-small {
  width: 100px;
  height: 100px;
}

/* Animation pastilles */
@keyframes popBubble {
  0%   { transform: scale(1.5); box-shadow: 0 0 0 transparent; opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); }
}

/************************************************************
 * BtFlip - Bouton thématique flipper
 ************************************************************/
.BtFlip {
  background-color: #3690006e;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.2s;
}

.BtFlip:hover {
  background-color: #ff003378;
  transform: scale(1.05);
  animation: flipperNudge 0.4s ease;
}

.BtFlip.nudge-release {
  animation: flipperNudge 0.4s ease;
}

@keyframes flipperNudge {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-4px) rotate(-1.5deg); }
  60%  { transform: translateY(2px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); }
}

.BtFlip::before,
.BtFlip::after {
  content: '';
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 110px;
  height: 70px;
  display: inline-block;
  transition: background-image 0.2s ease;
}

.BtFlip::before {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-left-down.png');
}

.BtFlip::after {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-right-down.png');
}

.BtFlip:active::before {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-left-up.png');
}

.BtFlip:active::after {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-right-up.png');
}

/* Full width flipper bouton */
.BtFlipFull {
  width: 100%;
  background-color: #e6001242;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.BtFlipFull::before,
.BtFlipFull::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 240px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease;
}

.BtFlipFull::before {
  left: 0;
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-left-down.png');
}

.BtFlipFull::after {
  right: 0;
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-right-down.png');
}

.BtFlipFull:active::before {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-left-up.png');
}

.BtFlipFull:active::after {
  background-image: url('https://070.be/wp-content/plugins/ca-flippe-scores/assets/images/flipper-right-up.png');
}

.cta-flip-slide {
  position: absolute;
  right: -120px;
  width: 90px;
  height: 90px;
  background-image: url('https://flippe.070.be/wp-content/uploads/sites/12/2025/06/cta_trans_nouveau-1-e1750842262407.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1000;
  opacity: 0;
  transition: right 0.8s ease-out, opacity 0.6s ease;
  pointer-events: auto;
}

.cta-flip-slide.active {
  right: 30px;
  opacity: 1;
}

.cta-flip-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fffa;
  border-radius: 50%;
  animation: particleFade 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes particleFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) translateY(-30px);
    opacity: 0;
  }
}