:root {
      --c-dark: #034C71;
      --c-primary: #55BFCB;
      --c-soft-1: #C1CED2;
      --c-soft-2: #A4B3BF;
      --c-soft-3: #ADDDDF;
      --c-text-main: #034C71;
    }

    * {
      box-sizing: border-box;
    }

  /*  body {
      margin: 0;
      padding: 20px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: linear-gradient(135deg, var(--c-soft-3), var(--c-soft-1));
      min-height: 100vh;
    }*/

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(252, 139, 141, 0.19);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      padding: 20px;
    }

    .popup {
      position: relative;
      background: #ffffff;
      width: 100%;
      max-width: 440px;
      max-height: 90vh;
      margin: 0 auto;
      border-radius: 16px;
      /* border: 1px solid var(--c-soft-1);*/
      border: 4px solid #fc8b8d;
      box-shadow:
        0 20px 50px rgba(3, 76, 113, 0.25),
        0 0 0 1px rgba(193, 206, 210, 0.4);
      color: var(--c-text-main);
      opacity: 0;
      transform: translateY(30px);
      animation: fadeUp 0.4s ease-out forwards;
      background-image: linear-gradient(
        135deg,
        rgba(173, 221, 223, 0.2),
        rgba(193, 206, 210, 0.05)
      );
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 480px) {
      .popup {
        border-radius: 12px;
        margin: 0;
        max-height: 85vh;
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .popup-header {
      display: flex;
      align-items: flex-start;
      padding: 20px 20px 0 20px;
      gap: 12px;
    }

    .popup-badge {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 30%, #ffffff, var(--c-primary));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(3, 76, 113, 0.3);
    }

    .popup-emoji {
      font-size: 43px;
    }

    .popup-title {
      margin: 0 0 2px 0;
      font-size: clamp(18px, 4vw, 22px);
      font-weight: 600;
      color: #034C71;
      line-height: 1.3;
    }

    .popup-subtitle {
      margin: 0;
      font-size: clamp(12px, 3vw, 14px);
      color: var(--c-soft-2);
      font-weight: 400;
    }

    .popup-content {
      padding: 0 20px 5px 20px;
    }

    .popup p {
      margin: 16px 0;
      font-size: clamp(13px, 3.5vw, 15px);
      line-height: 1.55;
      color: #365366;
    }

    .popup ul {
      padding-left: 20px;
      margin: 12px 0 0;
      font-size: clamp(13px, 3.5vw, 14px);
      color: #365366;
    }

    .popup ul li {
      margin-bottom: 6px;
      line-height: 1.4;
    }

    /* Style du countdown */
   /* .countdown {
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(3, 76, 113, 0.05);
      font-size: 13px;
      color: var(--c-dark);
      display: inline-block;
    }*/

    .countdown {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(3, 76, 113, 0.05);
  font-size: 16px;
  color: var(--c-dark);
  /*display: inline-block;*/
  margin: 0 auto;
  max-width: 300px;
  text-align: center;
  border: 1.3px dashed gray;

}
    .countdown strong {
      font-weight: 600;
    }

    .countdown .num { 
      font-size: 22px; font-weight: bold; color:#de7d13; 
    }
    .countdown .uni { font-size: 13px; color: #789*;}
    .countdown .num.sec { color: #ff2a23; }

    .popup-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 20px 15px 20px;
      border-top: 1px solid rgba(193, 206, 210, 0.5);
    }

    @media (min-width: 481px) {
      .popup-footer {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
    }

    .popup button, .popup a.details-link {
      padding: 10px 16px;
      border-radius: 25px;
      border: none;
      cursor: pointer;
      /*font-size: clamp(13px, 3.2vw, 14px);*/
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: 481px) {
      .popup a.details-link {
        flex: initial;
        min-width: 90px;
        max-width: none;
      }

      .popup button {
        flex: initial;
        width: 45px;
        height: 45px;
      }
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--c-primary), var(--c-soft-3));
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(3, 76, 113, 0.35);
    }

    .btn-secondary {
      background: #ffffff;
      color: var(--c-dark);
      border: 1px solid var(--c-soft-1);
    }

    .btn-primary:hover, .details-link:hover {
      filter: brightness(1.05);
    }

    .btn-secondary:hover {
      background: var(--c-soft-3);
    }

    .popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      border: none;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      font-size: 20px;
      cursor: pointer;
      line-height: 1;
      color: var(--c-soft-2);
      padding: 8px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    @media (max-width: 480px) {
      .popup-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 18px;
      }
    }

    .popup-close:hover {
      background: rgba(193, 206, 210, 0.6);
      color: var(--c-dark);
    }

    .details-link {
      background: rgba(173, 221, 223, 0.3);
      color: var(--c-dark);
      border: 1px solid rgba(85, 191, 203, 0.4);
      text-align: center;
    }

    /* Safe area pour iPhone X+ */
    @supports (padding: max(0px)) {
      body {
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* Emoji wrapper */
.gift .emoji {
  
  display: inline-block;
  animation: bounce 3s ease-in-out infinite;
}

/* Simple “GIF-like” bounce animation */
@keyframes bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-15px) scale(1.05); }
  60%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}