/* ========================================
 * STICKY SIDEBAR AD
 * Styles pour le comportement sticky de la publicité dans la sidebar
 * Réutilisable sur toutes les pages avec sidebar absolute
 * ======================================== */

/* ======================================
 * SIDEBAR AVEC POSITION ABSOLUTE
 * ====================================== */

/* Hauteur minimale pour permettre le sticky de fonctionner */
.sidebar {
    /* La sidebar en position absolute a besoin d'une hauteur minimale
       pour que le sticky puisse défiler à l'intérieur */
    min-height: calc(100vh - 85px); /* viewport - margin-top de la sidebar */
}

/* ======================================
 * CONTENEUR STICKY POUR LA PUBLICITÉ
 * ====================================== */

.sticky-ad-container {
    /* Position sticky */
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Distance depuis le haut de l'écran quand sticky */

    /* Espacement */
    margin-top: auto; /* Pousse vers le bas si nécessaire */
    margin-bottom: 2rem;

    /* Z-index pour rester au-dessus */
    z-index: 100;

    /* Optimisation des performances */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Transition pour les effets */
    transition: box-shadow 0.3s ease;
}

/* ======================================
 * BLOC PUBLICITÉ
 * ====================================== */

#sticky-ad-placeholder {
    background-color: white;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%; /* Prend toute la hauteur du conteneur */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenu de la publicité */
#sticky-ad-placeholder .sidebar-card-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Style pour les unités AdSense dans la sidebar */
#sticky-ad-placeholder .adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-width: 250px !important;
    min-height: 250px !important;
    /* Permettre à AdSense de déterminer la hauteur optimale */
    max-height: 100%;
}

#sticky-ad-placeholder img,
#sticky-ad-placeholder .ad-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--border-radius, 8px);
}

/* ======================================
 * EFFETS VISUELS
 * ====================================== */

/* Effet hover sur la publicité */
#sticky-ad-placeholder:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Classe ajoutée par JS quand le sticky est actif */
.sticky-ad-container.is-stuck #sticky-ad-placeholder {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ======================================
 * MODE SOMBRE
 * ====================================== */

.dark-mode #sticky-ad-placeholder {
    background-color: var(--card-bg-dark, #2a3334);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode #sticky-ad-placeholder:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .sticky-ad-container.is-stuck #sticky-ad-placeholder {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ======================================
 * RESPONSIVE - TABLETTES
 * ====================================== */

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .sticky-ad-container {
        top: 95px; /* Ajustement pour tablettes */
    }
}

/* ======================================
 * RESPONSIVE - MOBILE
 * ====================================== */

@media screen and (max-width: 768px) {
    /* Sur mobile, la sidebar devient position: static */
    .sidebar {
        min-height: auto; /* Réinitialiser la hauteur minimale */
    }

    .sticky-ad-container {
        position: static; /* Désactiver le sticky */
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #sticky-ad-placeholder {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ======================================
 * PETITS ÉCRANS EN HAUTEUR
 * ====================================== */

@media screen and (max-height: 700px) {
    .sticky-ad-container {
        top: 90px; /* Réduire l'espace en haut */
    }
}

@media screen and (max-height: 600px) {
    .sticky-ad-container {
        top: 85px;
    }
}

/* ======================================
 * SUPPORT NAVIGATEURS ANCIENS
 * ====================================== */

@supports not (position: sticky) {
    /* Fallback pour les navigateurs sans support sticky */
    .sticky-ad-container {
        position: relative;
    }
}