/**
 * Styles Compte à Rebours RTC Purple Telecom
 * Emplacement : /home/yqqyvar/domains/purpletelecom.fr/public_html/assets/css/rtc-countdown.css
 * Permissions : 0644
 * Version : 1.0.0
 */

/* ========== SUPPRESSION DES MARGES SYSTEME.IO ========== */
.rtc-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ========== COMPTE A REBOURS RTC ========== */
.rtc-countdown-section {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  padding: 60px 20px 60px;
  position: relative;
  overflow: hidden;
  margin-top: -20px;
}

/* Vague de transition en haut */
.wave-transition {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-transition svg {
  position: relative;
  display: block;
  width: calc(130% + 1.3px);
  height: 120px;
}

.wave-transition .shape-fill {
  fill: var(--bg-primary);
}

/* Animation pour cette vague */
.wave-path-2 {
  animation: wave-animation-2 20s ease-in-out infinite;
}

@keyframes wave-animation-2 {
  0% {
    d: path("M0,64L48,69.3C96,75,192,85,288,90.7C384,96,480,96,576,85.3C672,75,768,53,864,48C960,43,1056,53,1152,69.3C1248,85,1344,107,1392,117.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z");
  }
  50% {
    d: path("M0,96L48,90.7C96,85,192,75,288,69.3C384,64,480,64,576,74.7C672,85,768,107,864,112C960,117,1056,107,1152,90.7C1248,75,1344,53,1392,42.7L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z");
  }
  100% {
    d: path("M0,64L48,69.3C96,75,192,85,288,90.7C384,96,480,96,576,85.3C672,75,768,53,864,48C960,43,1056,53,1152,69.3C1248,85,1344,107,1392,117.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z");
  }
}

.rtc-countdown-container {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Badge d'alerte */
.rtc-alert {
  background: linear-gradient(135deg, var(--red-error) 0%, var(--red-hover) 100%);
  color: white;
  padding: 20px 40px;
  border-radius: 50px;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(255, 68, 68, 0.3);
  animation: pulse-shadow 3s infinite;
  margin-bottom: 10px;
}

@keyframes pulse-shadow {
  0%, 100% { 
    box-shadow: 0 10px 30px rgba(255, 68, 68, 0.3); 
    transform: translateY(0);
  }
  50% { 
    box-shadow: 0 15px 40px rgba(255, 68, 68, 0.5); 
    transform: translateY(-2px);
  }
}

/* Source */
.rtc-source {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 20px;
  text-align: center;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

.rtc-source a {
  color: var(--blue-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.rtc-source a:hover {
  color: var(--purple-primary);
  text-decoration: underline;
}

/* Boites de compte a rebours */
.countdown-boxes {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.countdown-box {
  background: white;
  border-radius: 20px;
  padding: 30px 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  min-width: 120px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.countdown-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--green-success) 50%, var(--purple-primary) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  transform: rotate(45deg);
}

.countdown-box:hover::before {
  opacity: 0.1;
}

.countdown-box:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.countdown-number {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--green-success) 50%, var(--purple-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.countdown-label {
  font-size: 16px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
  position: relative;
  z-index: 1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .rtc-alert {
    font-size: 16px;
    padding: 15px 25px;
  }
  
  .countdown-boxes {
    gap: 15px;
  }
  
  .countdown-box {
    min-width: 100px;
    padding: 20px 15px;
  }
  
  .countdown-number {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .countdown-box {
    min-width: 80px;
    padding: 15px 10px;
  }
  
  .countdown-number {
    font-size: 28px;
  }
  
  .countdown-label {
    font-size: 14px;
  }
}