/**
 * Layout pour publicités latérales sur grands écrans (>1800px)
 * Publicités responsive AdSense de chaque côté du contenu principal
 *
 * FORMATS :
 * - 1800-2199px : 260x600 (Half Page standard)
 * - ≥ 2200px : 310x600 (Half Page large)
 *
 * POSITIONNEMENT :
 * - Toujours à 20px du .container (max-width: 1200px)
 * - Position sticky verticale: fixed top: 140px (sous le header)
 * - Jamais de chevauchement avec le contenu principal
 * - Calcul horizontal: calc(50% - 600px - 20px - 260px) pour écrans 1800-2199px
 * - Calcul horizontal: calc(50% - 600px - 20px - 310px) pour écrans ≥ 2200px
 * - Affichage contrôlé par JS : visible entre 250px et 4200px de scroll (index.php)
 */

/* ======================================
 * CONTENEUR PRINCIPAL AVEC PUBLICITÉS
 * ====================================== */

/* Par défaut : pas de changement sur petits/moyens écrans */
/* NE PAS toucher au layout body pour préserver le design existant */

/* ======================================
 * EMPLACEMENTS PUBLICITAIRES LATÉRAUX
 * ====================================== */

/* Conteneurs pour publicités gauche et droite */
.side-ad-left,
.side-ad-right {
    display: none; /* Masqués par défaut sur petits écrans */
}

/* ======================================
 * PROTECTION CONTRE CHEVAUCHEMENT
 * ====================================== */

/* Masquer les publicités si l'écran est trop petit pour éviter chevauchement avec le contenu
 * Calcul : .container max 1200px (600px de chaque côté du centre)
 *          + 20px d'espace entre container et publicité
 *          + 260px de largeur publicité (format standard)
 *          = 880px minimum de chaque côté du centre
 *          = 1760px minimum au total
 * On ajoute une marge de sécurité, donc activation à partir de 1800px
 */

@media screen and (min-width: 1800px) {

    .side-ad-left,
    .side-ad-right {
        display: block;
        position: fixed;
        top: 140px; /* Position sous le header (80px header + 60px marge) */
        width: 260px; /* Largeur pour écrans 1800-2199px (format 260x600) */
        z-index: 10;
    }

    /* Calcul positionnement:
     * 50% = centre de l'écran
     * -600px = moitié du container (1200px / 2)
     * -20px = espace entre container et publicité
     * -260px = largeur de la publicité (format 260x600)
     */
    .side-ad-left {
        left: calc(50% - 600px - 20px - 260px);
    }

    .side-ad-right {
        right: calc(50% - 600px - 20px - 260px);
    }

    /* Carte publicitaire */
    .side-ad-card {
        background: var(--card-bg-light, white);
        border-radius: var(--border-radius, 8px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 10px;
        margin-bottom: 20px;
        overflow: hidden;
        min-height: 600px; /* Augmenté pour publicités verticales */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mode sombre */
    .dark-mode .side-ad-card {
        background: var(--card-bg-dark, #2a3334);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Conteneur AdSense dans la carte */
    .side-ad-card .adsbygoogle {
        width: 100%;
        min-width: 260px;
        min-height: 600px; /* Format 260x600 */
        display: block;
    }

    /* Placeholder en attendant les publicités */
    .side-ad-placeholder {
        width: 100%;
        height: 600px; /* Augmenté pour publicités verticales */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 14px;
        text-align: center;
        border: 2px dashed #e0e0e0;
        border-radius: 4px;
    }

    .dark-mode .side-ad-placeholder {
        border-color: #444;
        color: #666;
    }
}

/* ======================================
 * RESPONSIVE : TRÈS GRANDS ÉCRANS
 * ====================================== */

@media screen and (min-width: 2200px) {

    /* Plus d'espace disponible : publicités plus larges (format 310x600) */
    .side-ad-left,
    .side-ad-right {
        width: 310px; /* Largeur augmentée pour écrans ≥ 2200px (format 310x600) */
    }

    /* Recalcul avec publicités de 310px:
     * 50% - 600px (container/2) - 20px (espace) - 310px (largeur pub)
     */
    .side-ad-left {
        left: calc(50% - 600px - 20px - 310px);
    }

    .side-ad-right {
        right: calc(50% - 600px - 20px - 310px);
    }

    .side-ad-card {
        min-height: 600px; /* Format 310x600 */
    }

    .side-ad-card .adsbygoogle {
        min-width: 310px;
        min-height: 600px; /* Format 310x600 */
    }

    .side-ad-placeholder {
        height: 600px; /* Format 310x600 */
    }
}

/* ======================================
 * ANIMATION D'APPARITION
 * ====================================== */

@media screen and (min-width: 1800px) {

    /* Par défaut : masquées complètement (pas juste opacity) */
    .side-ad-left,
    .side-ad-right {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.05s ease-out, visibility 0s 0.05s; /* Disparition très rapide */
    }

    /* Apparition progressive après scroll ET chargement (INDEX.PHP UNIQUEMENT) */
    body.ads-ready.scrolled-past-hero .side-ad-left,
    body.ads-ready.scrolled-past-hero .side-ad-right {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.15s ease-in, visibility 0s 0s; /* Apparition rapide */
    }

    /* Force le masquage complet si pas scrollé au-delà du hero (INDEX.PHP UNIQUEMENT) */
    body:not(.scrolled-past-hero):not(.page-toutes-les-categories) .side-ad-left,
    body:not(.scrolled-past-hero):not(.page-toutes-les-categories) .side-ad-right {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* EXCEPTION : toutes-les-categories.php - Affichage immédiat sans conditions de scroll */
    body.page-toutes-les-categories.ads-ready .side-ad-left,
    body.page-toutes-les-categories.ads-ready .side-ad-right {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity 0.15s ease-in, visibility 0s 0s;
    }

    /* Masquer les publicités si scroll > 4200px (INDEX.PHP UNIQUEMENT) */
    body.scrolled-past-4200:not(.page-toutes-les-categories) .side-ad-left,
    body.scrolled-past-4200:not(.page-toutes-les-categories) .side-ad-right {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ======================================
 * STICKY BEHAVIOR
 * ====================================== */

@media screen and (min-width: 1800px) {

    /* Optimisation performances pour les publicités */
    .side-ad-left,
    .side-ad-right {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Limiter la hauteur totale pour éviter le débordement */
    .side-ad-left,
    .side-ad-right {
        max-height: calc(100vh - 160px); /* viewport - top - marge bas */
        overflow: hidden; /* Pas de scroll */
    }
}