@import url("product-ji0sC5N.css");

@layer components {
    /*
     * Contenu enrichi réservé aux pages d'informations / pages légales.
     *
     * IMPORTANT :
     * les sélecteurs ne ciblent plus .rich-content globalement.
     * Les descriptions produits sont isolées dans product.css.
     */
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) {
        width: min(100%, 980px);
        margin-inline: auto;
        color: var(--text-soft);
        font-size: clamp(1rem, 1.35vw, 1.08rem);
        line-height: 1.85;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > * + * {
        margin-top: 1.35rem;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__title {
        margin-top: 0;
        padding-top: clamp(4rem, 7vw, 5.75rem);
        color: var(--text);
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        line-height: 1.16;
        letter-spacing: -0.035em;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__title:first-child {
        padding-top: 0;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__subtitle {
        margin-top: 0;
        padding-top: clamp(1.7rem, 3vw, 2.5rem);
        color: var(--text);
        font-size: clamp(1.2rem, 2.2vw, 1.55rem);
        line-height: 1.28;
        letter-spacing: -0.015em;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) p {
        color: var(--text-soft);
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__title + p,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__title + ul,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__title + blockquote,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__subtitle + p,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__subtitle + ul,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) > .rich-content__subtitle + blockquote {
        margin-top: 1.25rem;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) p + p {
        margin-top: 1.15rem;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) ul {
        display: grid;
        gap: 0.6rem;
        padding-inline-start: 1.5rem;
        list-style: disc;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) blockquote {
        margin-inline: 0;
        padding: 1.25rem 1.35rem;
        border-inline-start: 4px solid var(--primary);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background:
            linear-gradient(
                145deg,
                var(--primary-soft),
                var(--violet-soft)
            );
    }

    [dir="rtl"] :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) blockquote {
        border-inline-start: 0;
        border-inline-end: 4px solid var(--primary);
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image {
        --rich-image-width: 680px;

        display: grid;
        align-items: center;
        gap: clamp(1rem, 4vw, 2.5rem);
        width: min(100%, var(--rich-image-width));
        margin: clamp(2rem, 5vw, 4rem) auto;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--small {
        --rich-image-width: 420px;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--medium {
        --rich-image-width: 680px;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--large {
        --rich-image-width: 900px;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--full {
        --rich-image-width: 100%;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--left,
    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--right {
        width: 100%;
        grid-template-columns:
            minmax(220px, min(42%, var(--rich-image-width)))
            minmax(0, 1fr);
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--right .rich-content__media {
        order: 2;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--right figcaption {
        order: 1;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image--banner {
        grid-template-columns: 1fr;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__media {
        display: grid;
        min-width: 0;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__media img {
        grid-area: 1 / 1;
        width: 100%;
        max-height: 760px;
        object-fit: contain;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        box-shadow: none;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__theme-image--dark {
        display: none;
    }

    :root[data-theme="dark"] :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__theme-image--light {
        display: none;
    }

    :root[data-theme="dark"] :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__theme-image--dark {
        display: block;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__image figcaption {
        color: var(--text-soft);
        font-size: 0.95rem;
        line-height: 1.75;
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__video {
        overflow: hidden;
        aspect-ratio: 16 / 9;
        margin-block: clamp(2rem, 5vw, 4rem);
        border-radius: var(--radius-md);
        background: #000000;
        box-shadow: var(--shadow);
    }

    :where(
        .content-page__body.rich-content,
        .content-page-editor .rich-content
    ) .rich-content__video iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    @media (max-width: 760px) {
        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) .rich-content__image--left,
        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) .rich-content__image--right {
            grid-template-columns: 1fr;
        }

        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) .rich-content__image--right .rich-content__media,
        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) .rich-content__image--right figcaption {
            order: initial;
        }

        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) > .rich-content__title {
            padding-top: 3.25rem;
            font-size: clamp(1.5rem, 7.2vw, 1.9rem);
        }

        :where(
            .content-page__body.rich-content,
            .content-page-editor .rich-content
        ) > .rich-content__subtitle {
            padding-top: 1.55rem;
            font-size: clamp(1.1rem, 5.4vw, 1.35rem);
        }
    }
}