/* ==========================================================================
   DAILY CHALLENGE — V2.0 — 2026-05-19
   Page /defi-couple-du-soir — mobile-first UX refonte
   Chargé après seo-pillar.css ; repose sur .lc-pillar, .lc-wrap, etc.
   ========================================================================== */

:root {
  --dc-pink:    #ff2f7d;
  --dc-hot:     #e81962;
  --dc-purple:  #8d3cf7;
  --dc-dark:    #271125;
  --dc-text:    #302132;
  --dc-muted:   #7b657a;
  --dc-cream:   #fff6fb;
  --dc-line:    rgba(232,25,98,.15);
  --dc-shadow:  0 22px 55px rgba(125,21,84,.18);
}

/* ==========================================================================
   HERO — compact override pour la page daily
   ========================================================================== */

.lc-hero--daily {
  padding-bottom: 22px;
}

.lc-hero--daily .lc-lead {
  font-size: clamp(16px, 2vw, 19px);
  margin-top: 14px;
  max-width: 560px;
  color: #5e435e;
  line-height: 1.5;
}

/* ==========================================================================
   FOCUS SECTION — la carte est l'élément star
   ========================================================================== */

.lc-dc-focus {
  padding: 6px 0 36px;
  scroll-margin-top: 72px;
}

.lc-dc-focus-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* ==========================================================================
   CARD V1 — base (conservée pour compatibilité)
   ========================================================================== */

.lc-dc-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(255,246,251,.96) 100%);
  border-radius: 24px;
  padding: 36px 38px 32px;
  margin: 32px 0 40px;
  border: 1px solid rgba(232,25,98,.18);
  box-shadow: 0 28px 64px rgba(125,21,84,.14), 0 4px 16px rgba(255,47,125,.08);
  overflow: hidden;
}

.lc-dc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff3b8f, #e91f65, #8837e8);
  border-radius: 24px 24px 0 0;
}

.lc-dc-card::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,59,143,.06) 0%, transparent 70%);
  top: -80px;
  right: -80px;
  pointer-events: none;
}

/* ==========================================================================
   CARD V2 — nouvelle version premium mobile-first
   ========================================================================== */

.lc-dc-card--v2 {
  padding: 0;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #1c0830;
  background-image:
    linear-gradient(112deg, rgba(24,5,38,.12) 0%, rgba(38,8,58,.04) 46%, rgba(38,4,26,.12) 100%),
    url('/static/images/homepage/daily-challenge-couple.jpg');
  background-image:
    linear-gradient(112deg, rgba(24,5,38,.12) 0%, rgba(38,8,58,.04) 46%, rgba(38,4,26,.12) 100%),
    image-set(
      url('/static/images/homepage/daily-challenge-couple.webp') type('image/webp'),
      url('/static/images/homepage/daily-challenge-couple.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 34px 78px rgba(55,6,42,.28),
    0 12px 30px rgba(125,21,84,.18);
}

.lc-dc-card--v2::after {
  display: none;
}

.lc-dc-card--v2::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(15,3,24,.20) 0%, rgba(15,3,24,.08) 52%, rgba(15,3,24,.02) 100%),
    linear-gradient(180deg, rgba(15,3,24,.08) 0%, rgba(15,3,24,.18) 100%);
  pointer-events: none;
  z-index: 0;
}

.lc-dc-card--v2 > * {
  position: relative;
  z-index: 1;
}

/* Cap gradient coloré selon le niveau */
.lc-dc-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 28px;
  border-radius: 24px 24px 0 0;
}

.lc-dc-cap--fun {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lc-dc-cap--romantique {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lc-dc-cap--coquin {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lc-dc-cap--hot {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.lc-dc-cap-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lc-dc-card--v2 .lc-dc-card-body {
  padding: 26px 28px 28px;
}

/* ==========================================================================
   CARD — éléments communs V1 + V2
   ========================================================================== */

.lc-dc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.lc-dc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lc-dc-badge--fun {
  background: rgba(35,10,45,.22);
  color: #fff4c9;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(7px);
}
.lc-dc-badge--romantique {
  background: rgba(35,10,45,.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(7px);
}
.lc-dc-badge--coquin {
  background: rgba(35,10,45,.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(7px);
}
.lc-dc-badge--hot {
  background: rgba(35,10,45,.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(7px);
}

.lc-dc-card-date {
  font-size: 12px;
  color: rgba(255,255,255,.86);
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.48);
}

.lc-dc-card-fallback-note {
  font-size: 11px;
  color: rgba(255,255,255,.72);
  font-style: italic;
  text-shadow: 0 1px 10px rgba(0,0,0,.48);
}

.lc-dc-card-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.58);
}

.lc-dc-card-text {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  margin-bottom: 20px;
  text-shadow: 0 2px 14px rgba(0,0,0,.52);
}

.lc-dc-card-text--locked {
  color: var(--dc-muted);
  font-style: italic;
}

.lc-dc-card-variant {
  background: rgba(255,255,255,.7);
  border-left: 3px solid var(--dc-pink);
  border-radius: 0 10px 10px 0;
  padding: 10px 16px;
  font-size: 14px;
  color: #5a3a55;
  margin-bottom: 14px;
  line-height: 1.55;
}

.lc-dc-card-variant strong {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dc-hot);
  margin-bottom: 4px;
}

.lc-dc-card-spicy {
  background: linear-gradient(135deg, rgba(255,59,143,.06), rgba(136,55,232,.06));
  border-left: 3px solid var(--dc-purple);
  border-radius: 0 10px 10px 0;
  padding: 10px 16px;
  font-size: 14px;
  color: #5a3a55;
  margin-bottom: 14px;
  line-height: 1.55;
}

.lc-dc-card-spicy strong {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dc-purple);
  margin-bottom: 4px;
}

/* ==========================================================================
   CARD ACTIONS — nouvelle hiérarchie CTA (V2)
   ========================================================================== */

.lc-dc-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

/* CTA principal — Jouer en ligne */
.lc-dc-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  background: linear-gradient(135deg, #ff3b8f, #e91f65 50%, #8837e8);
  color: #fff;
  border-radius: 14px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(232,25,98,.30);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}

.lc-dc-cta-primary:hover,
.lc-dc-cta-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(232,25,98,.38);
  opacity: 1;
}

/* Store badge pills (foncé, pour fond clair de la card) */
.lc-dc-storebadges {
  display: flex;
  gap: 10px;
}

.lc-dc-storebadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #12101e;
  color: #fff;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  transition: background .18s ease;
  flex: 1;
  min-width: 0;
}

.lc-dc-storebadge:hover,
.lc-dc-storebadge:focus-visible {
  background: #2d1f50;
  opacity: 1;
}

.lc-dc-storebadge-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  opacity: .85;
}

.lc-dc-storebadge span:not(.lc-dc-storebadge-icon) small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1px;
}

/* Microcopy retour demain */
.lc-dc-card-return {
  font-size: 13px;
  color: var(--dc-muted);
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* ==========================================================================
   CTA V1 — conservés pour rétrocompatibilité
   ========================================================================== */

.lc-dc-card-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.lc-dc-card-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  background: linear-gradient(135deg, #ff3b8f, #e91f65 50%, #8837e8);
  color: #fff;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(232,25,98,.32);
  transition: transform .18s ease, box-shadow .18s ease;
}

.lc-dc-card-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(232,25,98,.38);
  opacity: 1;
}

.lc-dc-card-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  background: rgba(232,25,98,.07);
  color: var(--dc-hot);
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(232,25,98,.18);
  transition: background .18s ease;
}

.lc-dc-card-cta-secondary:hover {
  background: rgba(232,25,98,.12);
  opacity: 1;
}

/* ==========================================================================
   LOCKED STATE
   ========================================================================== */

.lc-dc-card--locked .lc-dc-card-body {
  position: relative;
}

.lc-dc-card-lock-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 0 16px;
}

.lc-dc-card-lock-icon {
  font-size: 36px;
  line-height: 1;
}

.lc-dc-card-lock-text {
  font-size: 15px;
  color: rgba(255,255,255,.90);
  line-height: 1.55;
  max-width: 380px;
  text-shadow: 0 2px 14px rgba(0,0,0,.52);
}

/* ==========================================================================
   BLOC APP — section conversion vers l'application
   ========================================================================== */

.lc-dc-app-section {
  padding: 0 0 44px;
}

.lc-dc-app-block {
  background: linear-gradient(135deg, #ff3b8f 0%, #e81962 42%, #8837e8 100%);
  border-radius: 28px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: #fff;
  box-shadow: 0 24px 60px rgba(136,55,232,.26);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Halo décoratif */
.lc-dc-app-block::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
  top: -80px;
  right: -60px;
  pointer-events: none;
}

.lc-dc-app-content {
  flex: 1;
  min-width: 200px;
  position: relative;
  z-index: 1;
}

.lc-dc-app-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.lc-dc-app-text {
  font-size: 15px;
  color: rgba(255,255,255,.88);
  margin: 0;
  line-height: 1.55;
}

.lc-dc-app-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 1;
}

.lc-dc-app-badges a {
  display: inline-flex;
  transition: transform .18s ease, opacity .18s ease;
  border-radius: 10px;
  overflow: hidden;
}

.lc-dc-app-badges a:hover,
.lc-dc-app-badges a:focus-visible {
  transform: translateY(-2px);
  opacity: .88;
}

.lc-dc-app-badges img {
  height: 46px;
  width: auto;
  display: block;
}

.lc-dc-app-micro {
  width: 100%;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin: 6px 0 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   CARD APP PROMO — bloc gradient à l'intérieur de la card (priorité app)
   Utilise les vrais badges SVG blancs sur fond gradient.
   Isolé pour éviter tout conflit avec .lc-pillar a{color:inherit}.
   ========================================================================== */

.lc-dc-card-app-promo {
  background: linear-gradient(135deg, #ff3b8f 0%, #e81962 42%, #8837e8 100%);
  border-radius: 16px;
  padding: 18px 20px 20px;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}

/* Halo décoratif */
.lc-dc-card-app-promo::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  top: -50px;
  right: -40px;
  pointer-events: none;
}

.lc-dc-card-app-eyebrow {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 5px;
  position: relative;
  z-index: 1;
}

.lc-dc-card-app-text {
  font-size: 14px;
  color: rgba(255,255,255,.92);
  margin: 0 0 16px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.lc-dc-card-app-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Badge store — lien isolé : pas de background, pas de color hérité */
.store-badge-link {
  display: inline-flex;
  align-items: center;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, opacity .18s ease;
  text-decoration: none;
  color: inherit;
}

.store-badge-link:hover,
.store-badge-link:focus-visible {
  transform: translateY(-2px);
  opacity: .85;
}

/* Image badge — dimensions et ratio préservés */
.store-badge-img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  background: none;
}

/* CTA secondaire — Jouer en ligne (outline, V2) */
.lc-dc-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  background: transparent;
  color: var(--dc-hot);
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid rgba(232,25,98,.22);
  transition: background .18s ease, border-color .18s ease;
  text-align: center;
  margin-top: 10px;
}

.lc-dc-cta-secondary:hover,
.lc-dc-cta-secondary:focus-visible {
  background: rgba(232,25,98,.06);
  border-color: rgba(232,25,98,.38);
  opacity: 1;
}

/* ==========================================================================
   SUMMARY — caché sur mobile (card est directement visible)
   ========================================================================== */

/* lc-summary--daily hérite de lc-summary, on surcharge juste le comportement mobile */

/* ==========================================================================
   ARCHIVE — 3 derniers défis
   ========================================================================== */

.lc-dc-archive {
  margin: 36px 0;
}

.lc-dc-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.lc-dc-archive-item {
  background: #fff;
  border: 1px solid var(--dc-line);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .2s ease;
}

.lc-dc-archive-item:hover {
  box-shadow: 0 8px 24px rgba(125,21,84,.1);
}

.lc-dc-archive-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.lc-dc-archive-item time {
  font-size: 11px;
  color: #aaa;
  font-weight: 600;
  letter-spacing: .03em;
}

.lc-dc-archive-item h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--dc-dark);
  margin: 0;
  line-height: 1.25;
}

.lc-dc-archive-item p {
  font-size: 13px;
  color: var(--dc-muted);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lc-dc-archive-empty {
  color: var(--dc-muted);
  font-style: italic;
  font-size: 15px;
  padding: 16px 0;
}

/* ==========================================================================
   PUBLISH NOTE — conservé si utilisé ailleurs
   ========================================================================== */

.lc-dc-publish-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dc-muted);
  background: rgba(232,25,98,.06);
  border: 1px solid rgba(232,25,98,.12);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 24px;
}

.lc-dc-publish-note strong {
  color: var(--dc-hot);
  font-weight: 800;
}

/* ==========================================================================
   RESPONSIVE — TABLETTE ≤ 880px
   ========================================================================== */

@media only screen and (max-width: 880px) {
  .lc-dc-focus {
    padding: 2px 0 28px;
  }

  .lc-dc-app-block {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .lc-dc-app-badges {
    width: 100%;
  }

  .lc-dc-app-badges img {
    height: 42px;
  }

  /* Summary masqué sur mobile — la card est immédiatement visible */
  .lc-summary--daily {
    display: none !important;
  }
}

/* ==========================================================================
   RESPONSIVE — MOBILE ≤ 767px
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .lc-dc-cap {
    padding: 14px 18px;
    border-radius: 20px 20px 0 0;
  }

  .lc-dc-card--v2 .lc-dc-card-body {
    padding: 20px 18px 22px;
  }

  .lc-dc-card-actions {
    gap: 10px;
  }

  .lc-dc-storebadges {
    flex-direction: column;
  }

  .lc-dc-storebadge {
    width: 100%;
  }

  /* App promo block dans la card */
  .lc-dc-card-app-promo {
    padding: 16px 16px 18px;
  }

  .lc-dc-card-app-badges {
    flex-direction: column;
    gap: 8px;
  }

  .store-badge-img {
    height: 40px;
  }

  .lc-dc-cta-secondary {
    width: 100%;
  }

  /* V1 fallback */
  .lc-dc-card {
    padding: 22px 18px 20px;
    border-radius: 20px;
  }

  .lc-dc-card-ctas {
    flex-direction: column;
  }

  .lc-dc-card-cta-primary,
  .lc-dc-card-cta-secondary {
    width: 100%;
    justify-content: center;
  }

  .lc-dc-archive-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   RESPONSIVE — PETIT MOBILE ≤ 480px
   ========================================================================== */

@media only screen and (max-width: 480px) {
  .lc-dc-card-title {
    font-size: 22px;
  }

  .lc-dc-card-text {
    font-size: 15px;
  }

  .lc-dc-app-block {
    padding: 22px 16px;
    border-radius: 18px;
  }

  .lc-dc-app-badges {
    flex-direction: column;
    gap: 8px;
  }

  .lc-dc-app-badges img {
    height: 40px;
  }
}