/**
 * ADS OPTIMIZER - Styles CSS
 * Optimisations visuelles et UX pour les publicités
 */

/* ==========================================================================
   BASE - Tous les slots publicitaires
   ========================================================================== */

.ads-slot {
  display: block;
  width: 100%;
  margin: 16px auto;
  text-align: center;
  min-height: 50px;
  position: relative;
}

.ads-slot ins.adsbygoogle {
  display: block !important;
  max-width: 100%;
}

/* Label "Publicité" discret */
.ads-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin-bottom: 4px;
  text-align: center;
}

/* ==========================================================================
   LAZY LOADING - Placeholder pendant le chargement
   ========================================================================== */

.ads-slot[data-lazy="true"]:not(.ads-loaded) {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: ads-shimmer 1.5s infinite;
  border-radius: 8px;
}

.ads-slot[data-lazy="true"]:not(.ads-loaded)::after {
  content: 'Chargement...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #9ca3af;
}

@keyframes ads-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ads-slot.ads-loaded {
  animation: none;
  background: transparent;
}

/* ==========================================================================
   INLINE ADS - Dans le contenu de l'article
   ========================================================================== */

.ad-inline {
  margin: 24px auto;
  padding: 16px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
  border-radius: 0;
}

.ad-inline .ads-label {
  margin-bottom: 8px;
}

/* Mobile : marges réduites */
@media (max-width: 768px) {
  .ad-inline {
    margin: 16px -16px;
    padding: 12px 16px;
    border-radius: 0;
  }
}

/* ==========================================================================
   STICKY AD MOBILE - Pub collante en bas (lecture article)
   ========================================================================== */

#sticky-ad-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
}

/* Afficher seulement sur mobile */
@media (max-width: 768px) {
  #sticky-ad-mobile {
    display: block;
  }
}

#sticky-ad-mobile.visible {
  transform: translateY(0);
}

.sticky-ad-inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.sticky-ad-close {
  position: absolute;
  top: -8px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: #0f2e3a;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.2s;
}

.sticky-ad-close:hover {
  background: #1a4a5e;
}

.sticky-ad-close svg {
  width: 14px;
  height: 14px;
}

.sticky-ad-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 4px;
}

/* Espace pour la sticky ad en bas de page sur mobile */
@media (max-width: 768px) {
  body.ads-mobile-optimized {
    padding-bottom: 90px;
  }
  
  /* Ajuster le footer si sticky ad présent */
  body.ads-mobile-optimized footer {
    margin-bottom: 80px;
  }
}

/* ==========================================================================
   ARTICLE ADS - Emplacements article optimisés
   ========================================================================== */

/* After excerpt - haute visibilité */
.ads-article-after-excerpt {
  margin: 20px 0;
  padding: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* Article top - sous le titre */
.ads-article_top {
  margin-bottom: 24px;
}

/* Article bottom - après le contenu */
.ads-article_bottom {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 2px solid #dfc79f;
}

/* ==========================================================================
   HOME/CATEGORY ADS - Pages de listing
   ========================================================================== */

/* Feed inline - entre les articles */
.ads-feed_inline {
  grid-column: 1 / -1;
  margin: 16px 0;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Home between sections */
.ads-home_between {
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   SIDEBAR ADS - Colonne latérale
   ========================================================================== */

.ads-sidebar_top,
.ads-sidebar_middle {
  margin-bottom: 24px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Sticky sidebar ad (desktop) */
@media (min-width: 1024px) {
  .ads-sidebar-sticky {
    position: sticky;
    top: 100px;
  }
}

/* ==========================================================================
   RELATED ARTICLES AD - Entre suggestions
   ========================================================================== */

.ads-related_inline {
  margin: 24px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
}

/* ==========================================================================
   INTERSTITIAL - Pub plein écran
   ========================================================================== */

#interstitial-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

#interstitial-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.interstitial-container {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.interstitial-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: #0f2e3a;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}

.interstitial-timer {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dfc79f;
  color: #0f2e3a;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Réduire les marges sur mobile */
  .ads-slot {
    margin: 12px auto;
  }
  
  /* Publicités plus compactes */
  .ads-label {
    font-size: 9px;
  }
  
  /* Ajustement pour les pubs inline */
  .ad-inline {
    margin: 12px 0;
    padding: 10px 0;
  }
  
  /* Sidebar ads sur mobile = full width */
  .ads-sidebar_top,
  .ads-sidebar_middle {
    padding: 8px;
  }
}

/* ==========================================================================
   ANIMATION & TRANSITIONS
   ========================================================================== */

.ads-slot {
  transition: opacity 0.3s ease;
}

.ads-slot.ads-loading {
  opacity: 0.7;
}

.ads-slot.ads-error {
  opacity: 0.5;
  min-height: 0;
}

/* Fade in quand chargé */
.ads-slot ins.adsbygoogle[data-adsbygoogle-status="done"] {
  animation: ads-fade-in 0.3s ease;
}

@keyframes ads-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   DARK MODE SUPPORT (si implémenté)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .ad-inline {
    background: #1e293b;
    border-color: #334155;
  }
  
  .ads-label {
    color: #64748b;
  }
  
  #sticky-ad-mobile {
    background: #1e293b;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
}