/* ============================================================
   countdown.css - composant COMPTE A REBOURS reutilisable (miami, 2026-07-26)
   Cible : sortie GTA 6 le 19 novembre 2026, 00:00 Paris.
   Role : urgence LEGITIME (la date est officielle, aucune fausse rarete)
          + porte-CTA Amazon. Le widget n'est PAS decoratif : il embarque
          le bouton d'achat, c'est son interet CRO.
   Markup : <div class="cdw" data-cdw> ... </div>  (voir countdown.js)
   Variantes : .cdw--hero (compact, sur image), .cdw--soon (J-7, auto par JS)
   ============================================================ */

.cdw{
  --cdw-pink:#FF2E93;--cdw-sun:#FF6B35;--cdw-gold:#FFB347;--cdw-teal:#00E5C8;
  --cdw-ink:#F2EAD8;--cdw-ease:cubic-bezier(0.16,1,0.3,1);
  position:relative;box-sizing:border-box;
  max-width:680px;margin:32px auto;padding:22px 22px 20px;
  border-radius:18px;
  background:
    radial-gradient(120% 130% at 18% -10%,rgba(255,46,147,0.16) 0%,rgba(255,107,53,0.06) 44%,transparent 72%),
    linear-gradient(160deg,rgba(24,15,48,0.92) 0%,rgba(9,6,20,0.94) 100%);
  border:1px solid rgba(255,46,147,0.30);
  box-shadow:0 18px 48px -22px rgba(255,46,147,0.55),inset 0 1px 0 rgba(255,255,255,0.07);
  text-align:center;
}
.cdw::after{
  content:"";position:absolute;left:18px;right:18px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent);
}

/* --- libelle --- */
.cdw__lbl{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Antonio','Bebas Neue',Impact,sans-serif;font-weight:700;
  font-size:0.82rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--cdw-pink);margin:0 0 14px;line-height:1;
}
.cdw__dot{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;
  background:var(--cdw-teal);box-shadow:0 0 10px rgba(0,229,200,0.75);
  animation:cdwPulse 2.4s var(--cdw-ease) infinite;
}
@keyframes cdwPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* --- grille chiffres --- */
.cdw__grid{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(8px,2.4vw,18px);
}
.cdw__u{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.cdw__num{
  display:block;
  font-family:'Antonio','Bebas Neue',Impact,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,9vw,3.9rem);line-height:0.92;letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:#fff;text-shadow:0 2px 18px rgba(255,46,147,0.28);
  min-width:2.1ch;                    /* anti-CLS : la largeur ne bouge pas a chaque tick */
}
.cdw__u[data-w="d"] .cdw__num{
  min-width:3ch;text-shadow:none;   /* background-clip:text + text-shadow = halo sale */
  background:linear-gradient(120deg,#fff 0%,var(--cdw-gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cdw__cap{
  font-family:'Barlow',sans-serif;font-weight:600;
  font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;
  color:rgba(242,234,216,0.62);line-height:1;
}
.cdw__sep{
  font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
  font-size:clamp(1.5rem,5vw,2.4rem);line-height:1;color:var(--cdw-pink);
  opacity:.75;margin-top:.12em;
}

/* --- bloc CTA (la raison d'etre du widget) --- */
.cdw__act{
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cdw__hook{
  font-family:'Barlow',sans-serif;font-size:0.9rem;line-height:1.4;
  color:rgba(242,234,216,0.86);margin:0;
}
.cdw__hook b{color:var(--cdw-ink);font-weight:700}
.cdw__hook s{color:rgba(242,234,216,0.48);text-decoration-color:rgba(255,46,147,0.6)}
.cdw__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
/* .btn-pink / .btn-ig / .btn-ps5 / .btn-xbox heritent du systeme canonique cta.css :
   on ne re-declare ici que la geometrie propre au widget. */
.cdw__btns .btn-pink,.cdw__btns .btn-ig,
.cdw__btns .btn-ps5,.cdw__btns .btn-xbox,.cdw__btns .gf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 24px;border-radius:100px;text-decoration:none;
  font-family:'Barlow',sans-serif;font-weight:800;font-size:0.84rem;
  letter-spacing:1.2px;text-transform:uppercase;color:#fff;
  flex:1 1 220px;max-width:340px;
}
.cdw__btns .btn-pink{flex:1 1 260px;max-width:360px}
.cdw__btns .btn-ig{flex:0 1 200px}
.cdw__btns a:hover{text-decoration:none}
/* filet de securite : si la page ne charge pas cta.css, .btn-pink garde un fond
   (cta.css declare en !important et reprend la main des qu'il est present). */
.cdw__btns .btn-pink{
  background:linear-gradient(135deg,#FF2E93 0%,#C21E5A 100%);
  box-shadow:0 10px 28px -8px rgba(255,46,147,0.5),inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .2s var(--cdw-ease),filter .2s var(--cdw-ease),box-shadow .2s var(--cdw-ease);
}
.cdw__btns .btn-pink:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cdw__note{
  font-family:'Barlow',sans-serif;font-size:0.72rem;line-height:1.45;
  color:rgba(242,234,216,0.55);margin:2px 0 0;max-width:520px;
}

/* --- etat J-7 : l'urgence devient reelle, on monte le contraste --- */
.cdw--soon{
  border-color:rgba(255,46,147,0.55);
  box-shadow:0 20px 56px -20px rgba(255,46,147,0.75),inset 0 1px 0 rgba(255,255,255,0.09);
}
.cdw--soon .cdw__lbl{color:#fff}

/* --- etat jour J : plus de compte a rebours, on bascule sur l'achat --- */
.cdw--out .cdw__grid,.cdw--out .cdw__sep{display:none}
.cdw--out .cdw__lbl{
  font-size:clamp(1.4rem,5vw,2.1rem);letter-spacing:1.6px;color:#fff;margin-bottom:6px;
}
.cdw--out .cdw__act{border-top:0;padding-top:6px;margin-top:6px}

/* --- variante hero : compact, pose sur une image --- */
.cdw--hero{
  max-width:520px;margin:20px 0;padding:16px 18px 14px;text-align:left;
  background:linear-gradient(160deg,rgba(12,8,26,0.72) 0%,rgba(7,5,15,0.66) 100%);
}
.cdw--hero .cdw__grid{justify-content:flex-start}
.cdw--hero .cdw__num{font-size:clamp(1.9rem,6vw,2.6rem)}
.cdw--hero .cdw__lbl{font-size:0.74rem;margin-bottom:10px}

@media(max-width:520px){
  .cdw{padding:18px 14px 16px;margin:24px auto;border-radius:16px}
  .cdw__grid{gap:6px}
  .cdw__sep{font-size:1.3rem}
  .cdw__btns .btn-pink,.cdw__btns .btn-ig{flex:1 1 100%;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .cdw__dot{animation:none!important}
}