/* ═══════════════════════════════════════════════
   COUNTDOWN — Flip clock, réplication fidèle du CodePen DWVgXN
   (flat css-only countdown and countup — daniesy)

   Mécanique CodePen (clock-reverse = décompte) :
   - .up  (moitié haute)  : transform-origin 50% 100%, flip-up      0°   → 180°
   - .down(moitié basse)  : transform-origin 50% 0%,   flip-up-back -180° → 0°
   - backface-visibility: hidden sur les deux feuilles
   - les deux animations tournent SIMULTANÉMENT, même durée, même easing
   - z-index : feuilles du bas AU-DESSUS des feuilles du haut (comme CodePen)
   - AUCUNE modification du DOM pendant l'animation

   Adaptation JS : card-top/card-bottom statiques + deux feuilles.
   Les valeurs sont préparées de façon SYNCHRONE avant de relancer
   l'animation (le navigateur ne rend qu'une frame, zéro scintillement).
   ═══════════════════════════════════════════════ */

:root {
  --color-primary: #1a1a2e;
  --color-label: #ffffff;
  --color-panel: #ffffff;
  --color-panel-border: rgba(0, 0, 0, 0.10);
  --color-card-seam: rgba(0, 0, 0, 0.10);
  --bg-image: none;
  --font-family: "Segoe UI", sans-serif;
  --overlay-opacity: 0.15;
  --card-radius: 14px;
  --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  --flip-duration: 0.8s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-y: auto (et PAS hidden) + pas d'overscroll-behavior:none :
   le document reste "scrollable" aux yeux du navigateur, ce qui permet
   le pull-to-refresh (swipe vers le bas → reload, pratique pour changer
   le background aléatoire) sur Chrome Android / Brave.
   overflow hidden = document figé = geste jamais déclenché. */
html, body { height: 100%; overflow-y: auto; overflow-x: hidden; }

body {
  font-family: var(--font-family);
  background: var(--bg-image) center / cover no-repeat fixed;
  min-height: 100vh;
  position: relative;
  color: var(--color-primary);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity));
  z-index: 0;
}

#countdown-app {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  width: 100%;
}

#countdown-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 1.5rem);
}

.countdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 1.8vw, 1.2rem);
  flex-wrap: nowrap;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Rangée de cartes : UN chiffre = UNE carte (style DCL) */
.digit-cards {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

/* ─── La carte : UN seul chiffre ───
   (l'ombre est sur le conteneur, PAS sur les feuilles,
   pour éviter qu'elle ne tourne avec elles — comme le CodePen
   qui met le box-shadow sur .clock) */
.countdown-card {
  position: relative;
  width: clamp(50px, 8.5vw, 85px);
  height: clamp(72px, 12.5vw, 122px);
  perspective: 800px;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--color-panel);
}

/* Chiffres des Jours : ×1.30 des cartes H/M/S (un chiffre par carte) */
.countdown-card-days {
  width: clamp(65px, 11.05vw, 111px);
  height: clamp(94px, 16.25vw, 159px);
}

/* Charnière centrale (ligne fine du flip-clock DCL) */
.countdown-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-card-seam);
  z-index: 5;
  pointer-events: none;
}

/* ─── Les 4 moitiés : base commune (comme .up/.down du CodePen) ─── */
.card-top, .card-bottom,
.card-flip-top, .card-flip-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--color-panel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── Moitiés statiques ─── */
.card-top {
  top: 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  z-index: 1;
}

.card-bottom {
  bottom: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  z-index: 2;
}

/* ─── Feuilles animées (CodePen .up / .down) ───
   flip-top  = ANCIENNE valeur : rotateX 0° → 180°, charnière en bas
   flip-bottom = NOUVELLE valeur : rotateX -180° → 0°, charnière en haut
   (signe NÉGATIF pour la feuille du bas, comme rotate3d(-1,0,0,180deg)
    du CodePen — elle arrive PAR-DESSUS en pivotant vers l'avant) */
.card-flip-top {
  top: 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  transform-origin: 50% 100%;          /* CodePen .up */
  transform: rotateX(0deg);
  z-index: 3;
  will-change: transform;
}

.card-flip-bottom {
  bottom: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  transform-origin: 50% 0%;            /* CodePen .down */
  transform: rotateX(-180deg);
  z-index: 4;
  will-change: transform;
}

/* ─── Animation : les DEUX feuilles simultanées, même easing ─── */
.countdown-card.flipping .card-flip-top {
  animation: leaf-away var(--flip-duration) ease forwards;
}

.countdown-card.flipping .card-flip-bottom {
  animation: leaf-in var(--flip-duration) ease forwards;
}

/* CodePen flip-up : rotate3d(1,0,0, 0 → 180deg) */
@keyframes leaf-away {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(180deg); }
}

/* CodePen flip-up-back : rotate3d(-1,0,0, 180deg → 0) */
@keyframes leaf-in {
  from { transform: rotateX(-180deg); }
  to   { transform: rotateX(0deg); }
}

/* ─── Valeurs : UN chiffre par carte, hauteur = hauteur de carte ───
   Le glyphe chevauche la charnière, chaque moitié le rogne
   (overflow hidden) — comme un vrai flip-clock.
   Flex center = centrage fiable du chiffre ET de l'emoji. */
.card-value {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: clamp(4.75rem, 12.4vw, 8rem);
  font-weight: 400;
  color: var(--color-primary);
  white-space: nowrap;
}

.countdown-card-days .card-value {
  /* ×1.28 du clamp H/M/S sur chaque palier */
  font-size: clamp(6.08rem, 15.87vw, 10.24rem);
}

/* Moitié haute : bas du glyphe visible (le centre du glyphe sur la charnière) */
.card-top .card-value,
.card-flip-top .card-value {
  bottom: 0;
  transform: translateY(50%);
}

/* Moitié basse : haut du glyphe visible */
.card-bottom .card-value,
.card-flip-bottom .card-value {
  top: 0;
  transform: translateY(-50%);
}

/* ─── Chiffres ───
   display:inline-block = empêche la détection de numéro de téléphone
   sur mobile (iOS Safari / Brave), en plus du meta format-detection */
.digit {
  display: inline-block;
}

/* ─── Emoji Snoopy (remplace le 0) ───
   HAUTEUR = même impact visuel que le chiffre (0.95em de la typo),
   mais LARGEUR plafonnée à la carte : un sticker Snoopy est carré
   (185x233 etc.), à 0.95em il dépassait la largeur d'une carte
   mono-chiffre et le rognage overflow:hidden le décentrait.
   object-fit: contain → hauteur pleine, largeur ajustée, centré. */
.card-value img.digit-emoji {
  display: block;
  height: 0.95em;
  max-width: calc(100% - 6px);
  width: auto;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* ─── Libellés : blancs + text-shadow (lisibles sur n'importe quel fond) ─── */
.countdown-label {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.7rem;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.5);
}

.countdown-label-days {
  font-size: clamp(1.28rem, 2.75vw, 1.95rem);
  letter-spacing: 0.2em;
  margin-top: 0.9rem;
}

/* ─── Countdown terminé ─── */
.countdown-complete {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 400;
  color: var(--color-label);
  padding: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ─── Anti-détection téléphone (filet de sécurité CSS) ─── */
a[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

/* ─── Responsive mobile : les JOURS en très grand ─── */
@media (max-width: 640px) {
  #countdown-app { padding-top: 60px; }
  .countdown-row { gap: 0.4rem; }

  .countdown-card {
    width: clamp(48px, 15vw, 66px);
    height: clamp(69px, 22vw, 94px);
  }

  .countdown-card-days {
    width: clamp(62px, 19.5vw, 86px);
    height: clamp(90px, 28.6vw, 122px);
  }

  .card-value { font-size: clamp(4.55rem, 13.7vw, 6.2rem); }
  /* Chiffres Jours = 1.28x les H/M/S sur chaque palier du clamp */
  .countdown-card-days .card-value { font-size: clamp(5.82rem, 17.5vw, 7.94rem); }

  .countdown-label {
    font-size: clamp(0.95rem, 2.8vw, 1.25rem);
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
  }
  .countdown-label-days {
    font-size: clamp(1.15rem, 3.6vw, 1.6rem);
    margin-top: 0.7rem;
  }
}

@media (max-width: 380px) {
  .countdown-card { width: clamp(44px, 14vw, 58px); height: clamp(63px, 20vw, 86px); }
  .countdown-card-days { width: clamp(57px, 18.2vw, 75px); height: clamp(82px, 26vw, 112px); }
  .card-value { font-size: clamp(4.15rem, 12.5vw, 5.4rem); }
  .countdown-card-days .card-value { font-size: clamp(5.31rem, 16vw, 6.9rem); }
  .countdown-label { font-size: 0.9rem; }
  .countdown-label-days { font-size: 1.1rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  #countdown-app { padding-top: 40px; }
  .countdown-card { width: clamp(55px, 7.5vw, 72px); height: clamp(78px, 10.5vw, 105px); }
  .countdown-card-days { width: clamp(71px, 9.75vw, 94px); height: clamp(101px, 13.65vw, 136px); }
}

/* ─── Tablette : les clamps proportionnels ci-dessus garantissent le ratio
   ×1.30 sur toutes les largeurs — plus besoin d'interpolation dédiée. ─── */