@layer components {
    .ad-slot {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border-radius: 16px;
        isolation: isolate;
    }

    .ad-slot:not(.ad-slot--preview) {
        overflow: visible;
        border-radius: 0;
    }

    .ad-slot--preview {
        display: grid;
        place-items: center;
        border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border));
        color: var(--text-muted);
        background:
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--primary) 4%, var(--surface)),
                color-mix(in srgb, var(--violet) 4%, var(--surface))
            );
    }

    .ad-slot__preview {
        display: grid;
        width: 100%;
        height: 100%;
        place-items: center;
        align-content: center;
        gap: 0.16rem;
        padding: 0.75rem;
        text-align: center;
    }

    .ad-slot__preview > span {
        color: var(--primary);
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .ad-slot__preview > strong {
        max-width: 100%;
        color: var(--text-soft);
        font-size: 0.7rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .ad-slot__preview > small {
        color: var(--text-muted);
        font-size: 0.62rem;
    }

    .ad-slot--rail {
        width: 160px;
        min-height: 600px;
    }

    .ad-slot--leaderboard {
        width: min(100%, 970px);
        min-height: 90px;
        margin-inline: auto;
    }

    .ad-slot--rectangle {
        width: min(100%, 300px);
        min-height: 250px;
    }

    .ad-slot--adaptive {
        width: 100%;
        min-height: 100px;
    }

    .site-content-frame {
        position: relative;
        min-width: 0;
    }

    .site-ad-rails {
        display: none;
    }

    @media (min-width: 1680px) and (min-height: 760px) {
        .site-ad-rails {
            position: absolute;
            z-index: 18;
            inset: 0;
            display: block;
            pointer-events: none;
        }

        .site-ad-rail {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 160px;
            pointer-events: none;
        }

        /* Position par defaut pour les autres pages publiques. */
        .site-ad-rail--left {
            left: max(
                1rem,
                calc((100vw - var(--container)) / 2 - 180px)
            );
        }

        .site-ad-rail--right {
            right: max(
                1rem,
                calc((100vw - var(--container)) / 2 - 180px)
            );
        }

        /*
         * V22.3 :
         * home + catalogue + catégorie + fiche produit utilisent exactement
         * le meme centrage horizontal des rails.
         */
        .site-ad-rails--app-home .site-ad-rail--left,
        .site-ad-rails--app-catalog .site-ad-rail--left,
        .site-ad-rails--app-category-show .site-ad-rail--left,
        .site-ad-rails--app-product-show .site-ad-rail--left {
            left: max(
                1rem,
                calc((100vw - var(--container)) / 4 - 80px)
            );
        }

        .site-ad-rails--app-home .site-ad-rail--right,
        .site-ad-rails--app-catalog .site-ad-rail--right,
        .site-ad-rails--app-category-show .site-ad-rail--right,
        .site-ad-rails--app-product-show .site-ad-rail--right {
            right: max(
                1rem,
                calc((100vw - var(--container)) / 4 - 80px)
            );
        }

        /* Rails publicitaires classiques, sans sticky. */
        .site-ad-rail > .ad-slot {
            position: relative;
            top: 0;
            pointer-events: auto;
        }
        /*
         * Espacement supérieur des rails publicitaires.
         *
         * Pages concernées :
         * - Accueil
         * - Catégories
         * - Fiches produits
         *
         * Conserve les dimensions et le centrage horizontal.
         */
        .site-ad-rails--app-home .site-ad-rail > .ad-slot,
        .site-ad-rails--app-category-show .site-ad-rail > .ad-slot,
        .site-ad-rails--app-product-show .site-ad-rail > .ad-slot {
            margin-top: 1.25rem;
        }
    }

    .ad-placement {
        display: flex;
        justify-content: center;
        padding-block: clamp(1rem, 2.5vw, 1.6rem);
    }

    .ad-placement--catalog-top {
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

    .site-ad-after-main {
        display: block;
        padding: clamp(1rem, 2.5vw, 1.5rem) 0
            clamp(1.5rem, 4vw, 3rem);
    }

    @media (min-width: 1680px) and (min-height: 760px) {
        .ad-placement--responsive {
            display: none;
        }
    }

    .site-ad-after-main .ad-slot--leaderboard,
    .ad-placement--responsive .ad-slot--leaderboard {
        width: min(100%, 970px);
    }

    @media (max-width: 680px) {
        .ad-placement {
            padding-block: 0.8rem 1.2rem;
        }

        .site-ad-after-main {
            padding-block: 0.8rem 1.5rem;
        }

        .ad-slot--leaderboard,
        .ad-slot--adaptive {
            width: 100%;
            min-height: 100px;
            border-radius: 13px;
        }

        .ad-slot__preview {
            padding: 0.6rem;
        }
    }

    @media (max-width: 430px) {
        .ad-slot--leaderboard,
        .ad-slot--adaptive {
            min-height: 90px;
        }
    }

    @media print {
        .site-ad-rails,
        .ad-placement,
        .site-ad-after-main,
        .ad-slot {
            display: none !important;
        }
    }
}