/* stylelint-disable comment-empty-line-before, at-rule-empty-line-before */
/**
 * 1. Define css @layer precedence
 */
/**
 * 1. tw-base is loaded first and bootstrap tailwind's utilities.
 * 2. framework is where the magic happens. It include the followings (see https://cube.fyi):
 *      - A modern reset (see https://piccalil.li/blog/a-more-modern-css-reset/) + some a11y finetuning
 *      - Base styles applied to high level DOM elements (ie. html, body, main) or inherited rules that are set globally (ie. fonts, main colors)
 *      - Compositions classes mainly copied from Every layouts (see https://every-layout.dev/)
 *      - Reusable blocks styles.
 *      - Custom utilities. Scarcity is the aim here since we should rather leverage Tailwind's utilities
 * 5. tw-utilities are applied on top of our framework
 * 4. author css includes page/context specific styles overrides. This should be used with care
 * 6. user styles are finetuning for user defined preferences (ie. reduced motion, higher contrast).
 *    Nothing should ever override these rules and they should always have the higher specificity.
 *
 * NOTE |
 *  - We don't support tailwind's components since we build our own components and it seems
 *    that components aren't a thing anymore in V4
 *  - Framework's reset may need to be moved in it's own layer in the future
 *  - Tailwind V4 eventually will use CSS layers (base, utilities,...).
 *    tw-base and tw-utilities will need to be renamed accordingly then.
 *    Optionnally, our utilities could also be merged on the same layer as the one from tailwind
 */
@layer tw-base, framework, framework.reset, framework.base, tw-utilities, author, user;
/**
 * 2. Bootstrap tailwind
 * @TODO: Migrate to V4
 */
@layer tw-base {
    .transform{
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
    }
    .filter{
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
    }
    @font-face{
        font-family: 'Suez One';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(/wp-content/optimus/build/fonts/suez-one-latin-400-normal-KXMdkfTf.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/suez-one-latin-400-normal-CphRd5BR.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 200;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-200-normal-CUjPhLiE.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-200-normal-D3Tax78m.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 300;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-300-normal-DOZaDzTt.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-300-normal-DkWU296a.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-400-normal-CA33qtOw.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-400-normal-nExtXIcZ.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 500;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-500-normal-CyLU93_3.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-500-normal-BCUx0yW4.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 600;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-600-normal-BupoeBnc.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-600-normal-BIldxhQs.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 700;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-700-normal-CGDVIs8t.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-700-normal-C5gyHyFo.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 800;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-800-normal-BQmuGLSm.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-800-normal-DGg9yqR-.woff) format('woff');
    }
    @font-face{
        font-family: 'Nunito';
        font-style: normal;
        font-display: swap;
        font-weight: 900;
        src: url(/wp-content/optimus/build/fonts/nunito-latin-900-normal-DjKsw8Wu.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/nunito-latin-900-normal-Cbl_xPe8.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 200;
        src: url(/wp-content/optimus/build/fonts/karla-latin-200-normal-DzLw1CJs.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-200-normal-CuIuHEdS.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 300;
        src: url(/wp-content/optimus/build/fonts/karla-latin-300-normal-BcF3J5Df.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-300-normal-DDGquwDD.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(/wp-content/optimus/build/fonts/karla-latin-400-normal-CQ1icEir.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-400-normal-B5RG7IeC.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 500;
        src: url(/wp-content/optimus/build/fonts/karla-latin-500-normal-Ai2ZOxh4.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-500-normal-6E_Lff7x.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 600;
        src: url(/wp-content/optimus/build/fonts/karla-latin-600-normal-D-Pw8l7f.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-600-normal-N_gOuXvs.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 700;
        src: url(/wp-content/optimus/build/fonts/karla-latin-700-normal-ChN0Vxh8.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-700-normal-sk-goJFK.woff) format('woff');
    }
    @font-face{
        font-family: 'Karla';
        font-style: normal;
        font-display: swap;
        font-weight: 800;
        src: url(/wp-content/optimus/build/fonts/karla-latin-800-normal-BfOpJ4Qp.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/karla-latin-800-normal-kfHplqgN.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 100;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-100-normal-BTBAXVBT.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-100-normal-DBjbkire.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 200;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-200-normal-Co0glrxx.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-200-normal-ByeQgr9u.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 300;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-300-normal-DYYY4VIB.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-300-normal-DrgRfrdN.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-400-normal-BfmCfwfZ.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-400-normal-BhTl8mZv.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 500;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-500-normal-CN3hDfLq.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-500-normal-T-BM6Fhn.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 600;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-600-normal-CFh7D7Z4.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-600-normal-C1Wg56Vg.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 700;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-700-normal-Dkxlx_w4.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-700-normal-o5q9xX7W.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 800;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-800-normal-DIlMgMlR.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-800-normal-Cf8oFnaQ.woff) format('woff');
    }
    @font-face{
        font-family: 'Montserrat';
        font-style: normal;
        font-display: swap;
        font-weight: 900;
        src: url(/wp-content/optimus/build/fonts/montserrat-latin-900-normal-HIE66ZyV.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/montserrat-latin-900-normal-B8YluUfy.woff) format('woff');
    }
    @font-face{
        font-family: 'Arvo';
        font-style: normal;
        font-display: swap;
        font-weight: 400;
        src: url(/wp-content/optimus/build/fonts/arvo-latin-400-normal-D5AA_J7c.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/arvo-latin-400-normal-DYCPRCiO.woff) format('woff');
    }
    @font-face{
        font-family: 'Arvo';
        font-style: normal;
        font-display: swap;
        font-weight: 700;
        src: url(/wp-content/optimus/build/fonts/arvo-latin-700-normal-BEzXOyGj.woff2) format('woff2'), url(/wp-content/optimus/build/fonts/arvo-latin-700-normal-CxcBXylU.woff) format('woff');
    }

    /*
     * By default TW redefine the border-width/style/color for all element to overcome an issue with
     * its border relative classes. We apply the same but only for these classes.
     *
     * @see: https://github.com/tailwindcss/tailwindcss/pull/116
     */
    .border,
    [class*=" border-"],
    [class^="border-"] {
        border-width: 0;
        border-style: solid;
        border-color: currentColor;
    }
}
@layer tw-components {
    :root{
        --space-0: 0;
        --space-50: 0.125rem;
        --space-100: 0.25rem;
        --space-150: 0.375rem;
        --space-200: 0.5rem;
        --space-300: 0.75rem;
        --space-400: 1rem;
        --space-450: 1.125rem;
        --space-500: 1.25rem;
        --space-600: 1.5rem;
        --space-800: 2rem;
        --space-1000: 2.5rem;
        --space-1200: 3rem;
        --space-1600: 4rem;
        --space-2000: 5rem;
        --space-2400: 6rem;
        --space-2800: 7rem;
        --space-3200: 8rem;
        --space-px: 1px;
        --size-200: 0.5rem;
        --size-300: 0.75rem;
        --size-350: 0.874rem;
        --size-400: 1rem;
        --size-450: 1.125rem;
        --size-500: 1.25rem;
        --size-600: 1.5rem;
        --size-800: 2rem;
        --text-leading-flat: 1.05;
        --text-leading-short: 1.3;
        --text-leading-regular: 1.4;
        --text-leading-large: 1.7;
    }
}
@layer tw-utilities {
    .sr-only{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .visible{
        visibility: visible;
    }
    .static{
        position: static;
    }
    .mt-0{
        margin-top: 0;
    }
    .mt-600{
        margin-top: 1.5rem;
    }
    .block{
        display: block;
    }
    .hidden{
        display: none;
    }
    .transform{
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .text-300{
        font-size: 0.75rem;
    }
    .text-fonts-links{
        color: var(--colors-fonts-links);
    }
    .filter{
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .\[--flow-space\:theme\(spacing\.600\)\]{
        --flow-space: 1.5rem;
    }
    .\[--pill-background\:theme\(backgroundImage\.gradientPrimary\)\]{
        --pill-background: linear-gradient(270deg, var(--colors-gradients-gradientPrimaryA), var(--colors-gradients-gradientPrimaryB));
    }
    .\[--pill-background\:theme\(colors\.reviews\)\]{
        --pill-background: var(--colors-reviews);
    }
    .focus-within\:not-sr-only:focus-within{
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    @media (max-width: 768px){
        .max-\[768px\]\:hidden{
            display: none;
        }
    }
    @media (min-width: 769px){
        .min-\[769px\]\:hidden{
            display: none;
        }
    }
}
/**
 * 3. CSS Reset
 *
 * @see https://piccalil.li/blog/a-more-modern-css-reset/
 * @see https://github.com/jensimmons/cssremedy
 */
@layer framework.reset {
    /**
     * Revert structural elements to User Agent styles
     * if the .optimus-wrapper class is present on the <main> element
     */
    :where(html:has(main.optimus-wrapper)),
    :where(html:has(main.optimus-wrapper)) :where(body, [role="banner"], [role="contentinfo"]) {
        all: revert;
        box-sizing: border-box;
        text-rendering: optimizelegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    :where(.optimus-wrapper, .o-header) {
        /**
         * Revert all elements inside wrapper to User Agent styles
         *
         * Iframe, svg and svg children are exclude from the revert to avoid conflict with css values taking
         * precedence on "presentationnal attributes" (ie. stroke, fill, width, height, frameborder).
         *
         * This shortcut is possible because all svg, svg children and iframe reference in our (s)css codebase
         * is quite specific:
         * -> https://shorturl.at/QWqfg
         *
         * NOTE |
         *   1. These CSS property override their simiraly named attribute when defined.
         *      Unsetting or reverting the property doesn't work since these are valid values.
         *      Reverting each of those to a previous layer value works if it wasn't defined on a previous
         *      layer since it will rollback to the computed value of the current layer then (Which will be invalid
         *
         *      More on how revert-layer behaves on edge cases:
         *      -> https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer
         *
         *      More on Computed Value Time:
         *      -> https://moderncss.dev/how-custom-property-values-are-computed/
         */
         *:not(:where(iframe, svg, svg *)),
         *:not(:where(iframe, svg, svg *))::before,
         *:not(:where(iframe, svg, svg *))::after {
             all: revert;
         }

         img {
             width: revert-layer; /* [1] */
             height: revert-layer; /* [1] */
         }

        /**
        * Box sizing rules
        */
        &,
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        /**
        * Prevent font size inflation
        */
        @nested html& {
            -webkit-text-size-adjust: none;
               -moz-text-size-adjust: none;
                    text-size-adjust: none;
        }

        /**
        * Remove default margin
        */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        li,
        figure,
        figcaption,
        blockquote,
        dl,
        dd,
        hr {
            margin: 0;
        }

        /**
        * Remove list styles on ul, ol elements with a list role,
        * which suggests default styling will be removed.
        *
        * @see https://piccalil.li/blog/a-more-modern-css-reset/
        */
        ul[role="list"],
        ol[role="list"],
        menu[role="list"] {
            list-style: none;
            margin-block: 0;
            padding-inline-start: 0;
        }

        /**
        * Maintain `hidden` behaviour when overriding `display` values.
        * We need to raise the specificity to the maximum
        * since display can be overridden with higher specificity selectors.
        */
        [hidden] {
            display: none !important;
        }

        /**
        * label: Pre Wrapping. Overflow by default is bad...
        */
        pre {
            white-space: pre-wrap;
        }

        /**
        * Horizontal Rule
        * 1. Solid, thin horizontal rules
        * 2. Remove Firefox `color: gray`
        * 3. Remove default `1px` height, and common `overflow: hidden`
        */
        hr {
            border-style: solid;
            border-width: 1px 0 0;
            color: inherit;
            height: 0;
            overflow: visible;
        }

        /**
        * (inline-)block display is usually what we want on embed elements
        */
        img,
        svg {
            display: inline-block;
        }

        video,
        canvas,
        audio,
        iframe,
        embed,
        object {
            display: block;
        }

        /**
        * 1. The `vertical-align` removes strange space-below in case authors overwrite the display value
        * 2. Responsive by default
        */
        img,
        svg,
        video,
        canvas,
        audio,
        iframe,
        embed,
        object {
            vertical-align: middle;
            max-width: 100%;
        }

        /**
        * We almost never want this ugly border around iframes
        */
        iframe {
            border: 0;
        }

        /**
        * There is no good reason elements default to 300px,
        * and audio files are unlikely to come with a width attribute.
        */
        audio {
            width: 100%;
        }

        /**
        * These new elements display inline by default,
        * but that's not the expected behavior for either one.
        * This can interfere with proper layout and aspect-ratio handling.
        *
        * 1. Remove the unnecessary wrapping <picture>, while maintaining contents
        * 2. Source elements have nothing to display, so we hide them entirely
        */
        picture {
            display: contents;
        }

        source {
            display: none;
        }

        /**
        * Maintain intrinsic aspect ratios when `max-width` is applied.
        * <iframe>, <embed>, and <object> are also embedded,but have no
        * intrinsic ratio, so their `height` needs to be set explicitly.
        */
        img,
        svg,
        video,
        canvas {
            height: auto;
        }

        /**
        * Audio without `[controls]` remains hidden by default
        */
        audio:not([controls]) {
            display: none;
        }

        /**
        * Inherit fonts for inputs and buttons
        * We keep it simple to avoid bloating the reset.
        * Instead we choose to style it on a project basis
        */
        label,
        input,
        optgroup,
        button[type="submit"],
        button[type="reset"],
        textarea,
        select {
            font: inherit;
        }

        /**
        * Add smooth scrolling when focus is inside the document.
        * Avoid strange behaviour when searching
        *
        * @see: https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page
        */
        @nested html&:focus-within {
            scroll-behavior: smooth;
        }

        /**
        * Hide focus ring but the clever way
        */
        :focus {
            outline-color: transparent;
        }

        /**
        * Specify the progress cursor of updating elements.
        */
        [aria-busy="true"] {
            cursor: progress;
        }

        /**
        * Specify the pointer cursor of trigger elements.
        */
        button:not([aria-disabled], [disabled]),
        button[aria-disabled="false"],
        button[disabled="false"],
        [aria-controls] {
            cursor: pointer;
        }

        /**
        * abbr elements with tooltip should indicate so on hover
        */
        abbr[title] {
            cursor: help;
        }

        /**
        * Specify the unstyled cursor and prevent click on aria-disabled elements.
        * Warning: Prefer aria-disable to HTML disabled.
        * Warning: Don't forget to import the a11y.js ES6 module
        *
        * @see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled
        * @see: https://css-tricks.com/making-disabled-buttons-more-inclusive/
        */
        [aria-disabled="true"],
        [aria-disabled]:not([aria-disabled="false"]) {
            cursor: default;
            pointer-events: none;
        }

        /**
        * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
        *
        * @see https://github.com/jensimmons/cssremedy/issues/48
        */
        sup,
        sub {
            vertical-align: baseline;
            font-size: 1em;
        }

        sup {
            font-variant-position: super;
        }

        sub {
            font-variant-position: sub;
        }
    }
}
/**
 * Reduced Motion
 * 1. Immediately jump any animation to the end point
 * 2. Remove transitions & fixed background attachment
 * 3. Is added to user layer since user choices should prevail on everything else
 *
 * @See: https://github.com/mozdevs/cssremedy/issues/11
 */
@layer user {
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-delay: -1ms;
            animation-duration: 1ms;
            animation-iteration-count: 1;
            background-attachment: initial;
            scroll-behavior: auto;
            transition-delay: 0s;
            transition-duration: 0s;
        }
    }
}
/**
 * 4. Global styling and base rules
 *    NOTE: Selectors specificity should be kept as low as possible in all these
 *          styles. Ideally, we only target HTML Element and WAI-ARIA attributes
 */
@layer framework.base{
/* @font-face here */
:where(:has(main.optimus-wrapper)) {
    /**
    * Document
    */
    @nested html& {
        scroll-padding-top: calc(var(--banner-nav-height, 0px) + var(--site-top-offset, 0px));
    }

    /**
    * Document body
    */
    body {
        margin: 0;
        padding: 0;
        background-color: var(--colors-backgrounds-bgPage);
        color: var(--colors-fonts-body);
    }

    /**
    * Main layout
    */
    [role="banner"],
    [role="contentinfo"],
    main,
    main :where(section, article) {
        container-type: inline-size;
    }

    main,
    [role="banner"],
    [role="contentinfo"] {
        position: relative;
    }

    main {
        z-index: 0;
    }

    [role="banner"] {
        z-index: 2;
    }

    [role="contentinfo"] {
        z-index: 1;
    }

    /*
    * In header, footer and nav elements, list styling is not desired
    */
    [role="banner"] ul,
    [role="banner"] ol,
    [role="contentinfo"] ul,
    [role="contentinfo"] ol {
        list-style: none;
        padding-inline-start: 0;
        margin-block: 0;
    }

    [role="banner"] a,
    [role="contentinfo"] a {
        color: currentcolor;
        text-decoration: none;
    }
}
:root {
    --font-stack-system: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
}
/**
 * 5. HTML Elements
 *    NOTE: These are style applied globally and directly
 *          on the HTML elements (ie. <a>, <details>, etc.)
 *    NOTE: Only import the ones needed in your app,
 *          leave the others commented out.
 */
@layer framework.base{
/**
* Typographic normalization
*
* NOTES:
*    - Lists elements (ul, li, ol) can't be styled here,
*      since style could widely differ from one use case to the other.
*    - Don't forget to also enqueue the layout/prose file in Gutenberg
*
*/
:where(html:has(main.optimus-wrapper)) {
    font-family: var(--font-family-body, sans-serif);
    font-size: 1rem;
    font-weight: var(--font-weight-body, 400);
    line-height: var(--line-height-body, 1.4);
    text-rendering: optimizelegibility;
}


:where(.optimus-wrapper, .o-header) {
    /*
    * Since semantic and visual are mostly no correlated
    * for our headings, we exceptionnally normalize these so
    * they inherit their parents properties by default
    */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1em;
        font-weight: inherit;
        line-height: inherit;
    }

    a {
        font: inherit;
        color: inherit;
        text-decoration: inherit;
    }

    /*
    * Add the correct font weight in Edge and Safari.
    */
    b,
    strong {
        font-weight: var(--base-font-weight-bold, bolder);
    }

    /**
    *  Normalize line-heights
    */
    caption,
    figcaption,
    label,
    legend {
        line-height: var(--leading-short, 1.2);
    }

    figure {
        margin-inline: 0;
    }

    /**
    * Blockquote
    * @Todo: This is a copy paste from an old project and needs to ba adapted to our needs
    */
    blockquote {
        margin-inline-start: 1ch;
        padding-inline: 2ch 1.5ch;
        border-inline-start: 3px solid currentcolor;

        footer {
            font-size: max(0.875em, 0.875rem);
            font-style: italic;
        }
    }
}

/**
 * Hard reset for specific HTML Elements.
 * Usefull to maintain the semantics of the elements but without its default UA styles
 *
 * Notes:
 *    - The selector should always have the following pattern [data-reset-<HTMLElement>-css]
 *      to keep the specificity to 0,1,0.
 *        -> this overide <HTMLElement> selector, but won't override any other specificity
 *           since, it's included very early in the stylesheet
 *    - For lists style reset use [role="list"].
 *          -> @see init/reset.css
 */

/**
 * BUTTONS
 */
[data-reset-button-css] {
    background: none;
    border: 0;
    padding: 0;
    outline: 0;
    color: inherit;
    font: inherit;
}
/**
 * @TODO - List elements:
 *  <ul>     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 *  <ol>     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
 *  <li>     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
 *  ::marker https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
 *
 */
/**
 * @TODO - Dialog elements:
 *  <dialog>     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 *  ::backdrop   https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
 *  Popover API  https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
 *
 */
/**
 * @TODO - Forms elements:
 *  <form>      https://developer.mozilla.org/docs/Web/HTML/Element/form
 *  <fieldset>  https://developer.mozilla.org/docs/Web/HTML/Element/fieldset
 *  <legend>     https://developer.mozilla.org/docs/Web/HTML/Element/legend
 *  <label>     https://developer.mozilla.org/docs/Web/HTML/Element/label
 *  <input>     https://developer.mozilla.org/docs/Web/HTML/Element/input
 *  <textarea>  https://developer.mozilla.org/docs/Web/HTML/Element/textarea
 *  <button type="submit|reset">
 *              https://developer.mozilla.org/docs/Web/HTML/Element/button
 *  <select>    https://developer.mozilla.org/docs/Web/HTML/Element/select
 *  <option>    https://developer.mozilla.org/docs/Web/HTML/Element/option
 *  <optgroup>    https://developer.mozilla.org/docs/Web/HTML/Element/optgroup
 *
 */
}
/**
 * 5. Import all compositions
 *
 * @see https://every-layout.dev/
 */
@layer framework{

.o-wrapper {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--wrapper-max-size, 60rem);
    padding-inline: var(--wrapper-gutter, 1.125rem);
}

.o-wrapper--narrow {
    --wrapper-max-size: 37rem;
}
/**
 * Flow – adapted from Every Layout's stack layout but without the display definitions
 *
 * @see https://every-layout.dev/layouts/stack/
 */
.flow > * {
    margin-bottom: 0;
}

.flow > * + * {
    --_flow-space: var(--flow-space, 1em);

    margin-top: var(--_flow-space);
}
}
/**
 * 6. Import our blocks
 */
@layer framework{
/*
 * 1. Inherit from .bottom-bar if set
 * 2. 20px is arbitrary just to ensure every element has the same width
 */
.action-bar {
    --_action-bar-height: var(--_bottom-bar-height, 3.125rem); /* [1] */
    --_action-bar-border-width: var(--_bottom-bar-border-width, 2px); /* [1] */

    display: grid;
    justify-content: center;
    place-items: stretch;
    grid-template-columns: repeat(var(--_items-count, 2), minmax(20px, 10rem)); /* [2] */
    text-align: center;
    font-family: var(--font-family-label, sans-serif);
    font-weight: var(--font-weight-label, 100);
    line-height: var(--line-height-label, 1.2);
    font-size: 0.75rem;
}

.action-bar:has(:nth-child(3)) {
    --_items-count: 3;
}

.action-bar:has(:nth-child(4)) {
    --_items-count: 4;
}

.action-bar :is(nav, menu, ul) {
    display: contents;
}

.action-bar__item {
    contain: layout;
    color: var(--colors-text-primary-on-bgPage);
}

.action-bar__item:not(.action-bar__news)::before {
    content: "";
    width: 1px;
    background: var(--colors-backgrounds-separator);
    display: block;
    position: absolute;
    inset-inline-start: -0.5px;
    inset-block: calc(0.5 * 0.33 * var(--_action-bar-height));
}

.action-bar__item :is(button, a) {
    width: calc(100% + 2px);
    height: calc(100% + var(--_action-bar-border-width));
    display: block;
    z-index: 1;
    margin-inline: -1px;
    margin-top: calc(-1 * var(--_action-bar-border-width));
    position: relative;
    align-content: center;
}

.action-bar__news {
    background-color: var(--colors-primary);
    color: var(--colors-text-on-primary-background);
}

.action-bar__news .left-arrow-icon--bold {
    display: none;
}

@media (hover: hover) {
    .action-bar__item:has(button:hover, a:hover) {
        font-weight: bold;
    }

    .action-bar__news:has(button:hover, a:hover)  .left-arrow-icon--bold {
        display: inline-block;
    }

    .action-bar__news:has(button:hover, a:hover) .left-arrow-icon {
        display: none;
    }
}

.action-bar__item:has(button:active, a:active, [aria-pressed], :focus-visible) {
    z-index: 1;
}

.action-bar__item :focus-visible {
    outline: 2px solid;
    outline-color: var(--outline-color, AccentColor);
}

.action-bar__favorites [aria-pressed="true"] path {
    fill: currentcolor;
}

.action-button {
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: var(--action-button-padding, max(0.5em, 0.5rem));
    aspect-ratio: 1;
    border-radius: var(--action-buttons-border-radius, var(--radius-medium, 10px));
    border-style: solid;
    border-color: transparent;
    color: var(--action-button-color, var(--colors-fonts-links));
    background: var(--action-button-background, var(--colors-backgrounds-bgAccent));
    transition: transform 0.2s ease;
}

.action-button svg {
    inline-size: var(--icon-size, 1em);
    aspect-ratio: 1;
    fill: currentcolor;
}

@media (any-hover: hover) {
    .action-button:hover {
        color: var(--action-button-background, var(--colors-backgrounds-bgAccent));
        background: var(--action-button-color, var(--colors-fonts-links));
    }
}

:root {
    --_bottom-bar-height: 3.125rem;
    --_bottom-bar-border-width: 2px;
}

.bottom-bar {
    height: var(--_bottom-bar-height);
    background-color: var(--colors-backgrounds-bgPage);
    border-top: var(--_bottom-bar-border-width) solid var(--colors-primary);
    position: fixed;
    inset-inline: 0;
    bottom: var(--site-bottom-offset, 0);
}

body:has(.bottom-bar) .opd_adsticky {
    translate: 0 calc(-1 * (var(--_bottom-bar-height) + var(--site-bottom-offset, 0px)));
}

.byline {
    font-size: 0.874rem;
    display: flex;
    -moz-column-gap: 1ch;
         column-gap: 1ch;
    align-items: center;
    font-family: var(--font-family-label, sans-serif);
    font-weight: var(--font-weight-label, 100);
    line-height: 1.05;
    color: var(--colors-fonts-links);
}

.byline > * {
    flex: 0 0 fit-content;
}

.byline__authors {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 1;
    -moz-column-gap: 1ch;
         column-gap: 1ch;
    align-items: center;
}

.byline__authors p {
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.byline__authors ul {
    display: flex;
    align-items: center;
}

.byline__authors li + li {
    margin-inline-start: -0.5em;
}

.byline__authors ul a {
    display: block;
}

.byline__authors img {
    --_avatar-border-width: 1px;

    aspect-ratio: 1;
    display: block;
    height: calc(1.667em - var(--_avatar-border-width));
    -o-object-fit: cover;
       object-fit: cover;
    border: var(--_avatar-border-width) solid var(--colors-primary);
    border-radius: 2em;
}

.byline time {
    color: var(--colors-fonts-indicators);
}
.card {
    --_card-padding: var(--card-padding, 1rem);
    --_card-padding-inline: var(--card-padding-inline, var(--_card-padding));
    --_card-padding-block: var(--card-padding-block, var(--_card-padding));

    box-shadow: var(--shadow-card, 0.25rem 0.25rem 1.25rem 0 rgb(0 0 0 / 0.15));
    border-radius: var(--radius-default, 20px);
    padding-inline: var(--_card-padding-inline);
    padding-block: var(--_card-padding-block);
    background-color: var(--colors-backgrounds-bgBlock);
}
/*
 * 1. Inherits from .card paddings if inside of it. default to 0
 */
.card-ad {
    --card-padding-block: 0.5rem;
}

.card-ad > * {
    --_flow-space: 0.5rem;
}

.card-ad__wrapper {
    margin-inline: calc(-1 * var(--_card-padding-inline, 0)); /* 1 */
    margin-block-start: calc(-1 * var(--_card-padding-block, 0)); /* 1 */
    inline-size: calc(100% + 2 * var(--_card-padding-inline, 0)); /* 1 */
    height: 17.5rem;
    overflow: hidden;
}

.card-ad__wrapper > * {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center center;
}

.card-ad__footer {
    margin-block-start: var(--_card-padding-block, 0); /* 1 */
    margin-inline-end: calc(-1 * var(--_card-padding-inline, 0) + var(--_card-padding-block, 0)); /* 1 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--colors-fonts-links);
    font-size: 0.874rem;
}

.card-interstitial {
    --card-padding-block: 0.5rem;
    --card-gap: 0.5rem;

    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8rem;
    padding-inline: unset;
    padding-block: unset;
    background: none;
}

.card-interstitial__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    background: linear-gradient(270deg, var(--colors-gradients-gradientTertiaryA), var(--colors-gradients-gradientTertiaryB));
    border-radius: var(--radius-default, var(--radius-medium, 10px));
    height: 100%;
    width: 100%;
    color: var(--colors-fonts-textTertiaryButton);
    font-family: var(--font-family-button), sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    margin-inline: 10px;
}

.card-interstitial__inner {
    display: flex;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--card-gap);
    width: 10.25rem;
}

.card-interstitial__wrapper span {
    font-weight: 500;
    font-size: 12px;
}

.card-interstitial__start, .card-interstitial__end {
    display: flex;
    justify-content: space-between;
    height: 100%;
    gap: 10px;
}

.card-interstitial__start::before,
.card-interstitial__start .bar,
.card-interstitial__start::after {
    background: var(--colors-gradients-gradientTertiaryA);
}

.card-interstitial__end::before,
.card-interstitial__end .bar,
.card-interstitial__end::after {
    background: var(--colors-gradients-gradientTertiaryB);
}

.card-interstitial__start::before,
.card-interstitial__end::after {
    content: '';
    border-radius: var(--radius-default, var(--radius-medium, 10px));
    display: block;
    width: 8px;
}

.card-interstitial__start .bar,
.card-interstitial__end .bar {
    border-radius: var(--radius-default, var(--radius-medium, 10px));
    width: 11px;
}

.card-interstitial__start::after,
.card-interstitial__end::before {
    content: '';
    border-radius: var(--radius-default, var(--radius-medium, 10px));
    display: block;
    width: 22px;
}
/*
 * 1. Inherits from .card paddings if inside of it. default to 0
 */
.card-post {
    --card-padding-block: 0.5rem;

    display: grid;
    grid-template-areas:
        "illustration   illustration"
        "taxonomies     meta-icons"
        "title          title"
        "content        content"
        "footer-start   footer-end";
    gap: 0 0.5ch;
    grid-template-columns: minmax(0, 1fr) auto;
    transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out, translate 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* disable tap highlight */
}

.card-post > :not([class*="card-post__"], .byline) {
    display: contents;
}

.card-post__illustration,
.card-post__badges {
    grid-area: illustration;
}

.card-post__illustration {
    z-index: 0;
    place-self: stretch stretch;
    margin-inline: calc(-1 * var(--_card-padding-inline, 0)); /* 1 */
    margin-block-start: calc(-1 * var(--_card-padding-block, 0)); /* 1 */
    max-width: none;
    width: calc(100% + 2 * var(--_card-padding-inline)); /* 1 */
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card-post__illustration img {
    transition: scale 150ms ease-out;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.card-post__badges {
    z-index: 1;
    place-self: start end;
}

.card-post__taxonomies {
    grid-area: taxonomies;
    margin-block-start: 0.5rem;
}


.card-post__premium-post-disclaimer {
    grid-area: meta-icons;
    text-align: right;
    margin-block-start: 0.5rem;
}

.card-post__premium-post-disclaimer > svg {
    height: 1.5rem;
    width: 1.5rem;
}

.card-post__title {
    grid-area: title;
    min-height: calc(2em * var(--line-height-heading, 1.2));
    margin-block-start: 0.5rem;
}

.card-post__content {
    grid-area: content;
    margin-block-start: 0.25rem;
}

.card-post .byline {
    grid-area: footer-start;
    place-self: center start;
    margin-block-start: 0.75rem;
    max-width: 100%; /* Edge case: Avoid grid blowout on long byline */
}

.card-post__actions {
    grid-area: footer-end;
    place-self: center end;
    margin-block-start: 0.75rem;
}

.card-post__actions,
.card-post__badges {
    margin-inline-end: calc(-1 * var(--_card-padding-inline, 0) + var(--_card-padding-block, 0)); /* 1 */
}

/* Interactive states */
.card-post__title a.expands-action:focus-visible {
    outline-style: none;
}

.card-post:has(.card-post__title a.expands-action:focus-visible) {
    outline: 2px solid SelectedItem
}

.card-post:has(.card-post__title a.expands-action:focus-visible) .card-post__illustration img {
    scale: 1.1;
}

/* add a scale effect when the card is clicked (except for videos) */
.card-post:has(.card-post__title a.expands-action:active) {
    transform: scale(0.98);
}

@media (hover: hover) {
    .card-post:hover {
        translate: 0 -5px;
        box-shadow:
            0 0.25rem 0.5rem rgb(0 0 0 / 4%),
            0 1em 1rem -0.5em rgb(0 0 0 / 8%);
    }
}

.live-icon {
    font-family: var(--live-icon-font-family);
    font-weight: var(--live-icon-font-weight);
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-icon::before {
    content: "";
    display: inline-block;
    aspect-ratio: 1;
    border-radius: 100%;
    height: 0.75em;
    height: 1cap;
    margin-inline-end: 0.5ch;
    background-color: currentcolor;
}
.o-pill {
    --pill-background: var(--colors-primary);
    --pill-color: var(--colors-fonts-textButton);

    font-size: 1.5rem;
    font-family: var(--font-family-button, sans-serif);
    border-radius: var(--pill-radius, var(--radius-default, 20px));
    background: var(--pill-background);
    color: var(--pill-color);
    line-height: 1.05;
    min-width: 2.5em;
    min-height: 1.5em;
    padding: max(0.167em, 0.25rem) max(0.5em, 0.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.test-score {
    font-family: var(--font-family-button, sans-serif);
}

.test-score > b {
    font-weight: 800;
}

.test-score > small {
    font-size: max(0.5em, 0.5rem);
    margin-inline-start: 0.5ch;
}
/* Site banner styles */
/* Site footer styles */

[class^="text-heading-"],
[class*=" text-heading-"] {
    font-family: var(--font-family-heading, sans-serif);
    font-weight: var(--font-weight-heading, 700);
    line-height: var(--line-height-heading, 1.2);
}

.text-heading-3 {
    font-size: 1.125rem;
}

[class^="text-label-"],
[class*=" text-label-"] {
    font-family: var(--font-family-label, sans-serif);
    font-weight: var(--font-weight-label, 100);
    line-height: var(--line-height-label, 1.2);
}

.text-label-3 {
    font-size: 0.874rem;
}

.tooltip {
    text-align: revert;
    font-family: var(--font-stack-system);
    font-size: 0.625rem;
    padding-block: 0.5em;
    padding-inline: 0.75em;
    color: rgb(10 10 10 / 100%);
    background: rgb(255 255 255 / 90%);
    border: 1px solid;
    box-shadow: 1px 1px 2px -2px currentcolor;
    border-color: currentcolor;
    border-color: color-mix(in srgb, var(--colors-fonts-body) 15%, var(--colors-backgrounds-bgPage));
}

.tooltip-anchor:not(:hover, :focus) + .tooltip {
    display: none;
}


@supports (anchor-name: --anchor-name) {
    /* stylelint-disable property-no-unknown, at-rule-no-unknown, declaration-block-no-redundant-longhand-properties */
    .tooltip-container {
        --_tooltip-anchor-name: var(--tooltip-anchor-name, --tooltip-anchor);

        anchor-scope: all;
    }

    .tooltip-anchor {
        anchor-name: var(--_tooltip-anchor-name);
    }

    .tooltip {
        position: fixed;
        position-anchor: var(--_tooltip-anchor-name);
        position-area: block-end inline-end;
        position-try-fallbacks:
            block-start inline-end,
            block-end inline-start,
            block-start inline-start,
            block-end,
            block-start;
    }
    /* stylelint-enable property-no-unknown, at-rule-no-unknown, declaration-block-no-redundant-longhand-properties */
}

@supports not (anchor-name: --anchor-name) {
    .tooltip-container {
        position: relative;
    }

    .tooltip {
        position: absolute;
        top: 125%;
        left: 75%;
        text-align: left;
        width: -moz-max-content;
        width: max-content;
        max-width: 16rem;
    }
}

.video-overlay {
    background-color: rgb(66 72 102 / 50%);
    display: grid;
    grid-template-areas:
        "top"
        "button"
        "bottom";
    grid-template-rows: 1fr auto 1fr;
    padding-inline: 0.5rem;
    padding-block: 0.75rem;
}

.video-overlay > button {
    grid-area: button;
    place-self: center;
}

.video-overlay__message {
    font-family: var(--font-family-label, sans-serif);
    grid-area: top;
    display: flex;
    gap: 1ch;
    border-radius: var(--radius-default, 20px);
    background-color: rgb(0 0 0 / 15%);
    color: white;
    padding: 0.5rem;
    place-self: start;
    align-items: center;
}

.video-overlay__message > * {
    flex-grow: 0;
    flex-shrink: 1;
}

.video-overlay__message p {
    font-size: 0.75rem;
    max-width: 15.167em;
}

.video-overlay button svg {
    filter: drop-shadow(0 2px 20px var(--colors-primary));
}

.video-overlay button svg path {
    stroke: var(--colors-primary);
}
/**
 * 1. Handle the case where the thumbnail is inside a <picture>
 *    since our reset force display: contents on these elements
 */
.video-wrapper {
    --video-aspect-ratio: 16/9;

    aspect-ratio: var(--video-aspect-ratio);
    display: grid;
    grid-template-areas: "main";
}

.video-wrapper > * {
    grid-area: main;
}

.video-wrapper > picture {
    display: block; /* [1] */
}

.video-wrapper > *,
.video-wrapper :is(img, iframe, picture, video) {
    height: 100%;
    width: 100%;
}

.video-wrapper img {
    -o-object-fit: cover;
       object-fit: cover;
}

.video-wrapper--vertical {
    --video-aspect-ratio: 1;
}
/* Shared css */
.form-control {
    --_input-color: var(--input-color, FielText);
    --_input-background: var(--input-background, Field);
    --_input-border-width: var(--input-border-width, 1px);
    --_input-border-color: var(--input-border-color, ButtonBorder);
    --_input-border-radius: var(--input-border-radius, 0);
    --_input-min-width: var(--input-min-width, fit-content);
    --_input-base-height: var(--input-base-height, 1.75em);
    --_input-line-height: var(--input-line-height, 1.25);
    --_input-inline-padding: var(--input-inline-padding, 0.25ch);
    --_input-block-padding: calc(0.5 * (var(--_input-base-height) - (var(--_input-line-height) * 1em)));
    --_placeholder-color: var(--placeholder-color, inherit);
    --_placeholder-opacity: var(--placeholder-opacity, 0.54);
}

.form-control ::-moz-placeholder {
    color: var(--_placeholder-color);
    opacity: var(--_placeholder-opacity);
}

.form-control ::placeholder {
    color: var(--_placeholder-color);
    opacity: var(--_placeholder-opacity);
}
}
/* @import "blocks/forms/form-layouts"; */
/* @import "blocks/forms/textual-input"; */
/* @import "blocks/forms/textarea"; */
/* @import "blocks/forms/checkbox-input"; */
/* @import "blocks/forms/radio-input"; */
/* @import "blocks/forms/switch-input"; */
/* @import "blocks/forms/range-input"; */
/**
 * 7. Import external dependencies and extend them throug vendor-ext if needed
 */
@layer framework{@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translateX(25%)}to{opacity:1;transform:translateX(0)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translateX(13%)}to{transform:scale(1) translateY(-45%) translateX(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px 0 rgba(0,0,0,.25);position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);animation:notyf-fadeoutdown .3s forwards;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translateX(0)}.notyf__toast--disappear .notyf__message{animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translateX(13%);z-index:5;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;animation:notyf-fadeinleft .3s forwards;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:rgba(0,0,0,.25);border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:rgba(0,0,0,.15)}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px 0 rgba(0,0,0,.13);width:100%}.notyf__dismiss{width:56px}}
}
/**
 * 8. Utility classes
 *    NOTE: We should keep these scarce, and use in priority tailwind's utility classes
 */
@layer framework{

.expands-action-container {
    position: relative;
}

.expands-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.expands-action-container :is(a, button, input):not(.expands-action),
.expands-action-exception {
    position: relative;
    z-index: 2;
}
}
/**
 * . Import all pages and context specific styles
 *
 *  NOTE: There is no namespace for page,
 *        we use instead a parent selector for each page.
 *        As much possible we try to target a body #id or .class
 */