/**
 * Top-content ad sticky — styles visuels uniquement.
 *
 * Historique : ce fichier contenait des dizaines de règles défensives
 * (overflow:visible, will-change:auto, transform:none, display:block,
 * position:sticky + !important) pour tenter de faire marcher position:sticky
 * malgré les quirks de containing block du theme parent. Safari iOS et
 * Firefox mobile refusaient quand même.
 *
 * Solution retenue : sticky piloté par JS (sticky-top-content.js) via
 * position:fixed toggle au scroll — contourne tous les quirks CSS.
 *
 * Ce fichier ne garde donc QUE le styling visuel (fond + ombre + dark mode).
 * Les hacks de layout ont été retirés parce qu'ils causaient des effets de
 * bord (notamment stacking context cassé faisant passer le h1 titre
 * derrière le logo du header fixe sur certains articles).
 */

@media (max-width: 1023px) {
    .thb-article-featured-image + .device-mobile.device-tablet.ads {
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.2s ease;

        /**
         * Margin-bottom = ~7 lignes vides sous le slot pub.
         *
         * Pourquoi : quand la pub est pinnée en position:fixed (sticky JS), le
         * texte de l'article scroll derrière/sous elle. Sans espace tampon, le
         * premier paragraphe arrive trop vite sous le bord inférieur de la pub
         * → sensation que le texte "jaillit" du slot. Avec des lignes vides
         * en plus, le texte met plus de scroll pour atteindre le bord du slot,
         * ce qui adoucit la transition visuelle pendant que la pub reste pinnée.
         *
         * Tuning empirique (2026-04-15) :
         *  - 3em  (~2 lignes)  : amélioration notable mais texte arrive encore vite.
         *  - 6em  (~4 lignes)  : transition plus douce, encore perfectible.
         *  - 10.5em (~7 lignes) : RETENU — texte monte visuellement beaucoup plus
         *    lentement pendant que la pub est sticky, sensation nettement calmée.
         *
         * Convention utilisée : 1 "ligne" ≈ 1.5em (line-height typique contenu
         * article 24-28px sur mobile avec font-size 16-18px).
         *
         * Le placeholder créé par sticky-top-content.js copie cs.marginBottom
         * du target, donc ce 10.5em est automatiquement réservé dans le flow
         * même quand la pub est en fixed (l'espace reste stable, pas de saut).
         *
         * 10.5em ≈ 168-189px selon font-size computed.
         */
        margin-bottom: 10.5em;
    }

    body.thb-dark-mode .thb-article-featured-image + .device-mobile.device-tablet.ads {
        background-color: #1a1a1a;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}