/* =========================================================
   APOLLO COM - HEADER / BREADCRUMB GLOBAL
   Pour toutes les pages utilisant qreate-breadcrumb-one
   ========================================================= */

.qreate-breadcrumb-one {
    position: relative;
    overflow: hidden;

    /* Legere difference avec le corps de page */
    background:
        linear-gradient(
            180deg,
            #111116 0%,
            #0f0f13 100%
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


/* ---------------------------------------------------------
   PROFONDEUR DE FOND TRES LEGERE
   --------------------------------------------------------- */

.qreate-breadcrumb-one::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(112,69,221,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 80%,
            rgba(0,229,255,.022),
            transparent 24%
        );
}


/* ---------------------------------------------------------
   TITRE INDICATIF
   On conserve le soulignement natif Qreate
   --------------------------------------------------------- */

.qreate-breadcrumb-two .title {
    position: relative;
    z-index: 3;

    color: #fff !important;

    font-weight: 500;
    letter-spacing: -.045em;

    text-shadow: none !important;
}


/* SUPPRESSION DE NOTRE TRAIT AJOUTE */
.qreate-breadcrumb-two .title::after {
    display: none !important;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.qreate-breadcrumb-two .breadcrumb {
    position: relative;
    z-index: 3;

    background: transparent !important;
}


/* Liens precedents */
.qreate-breadcrumb-two .breadcrumb a {
    color: rgba(255,255,255,.62) !important;

    text-decoration: none !important;

    transition:
        color .25s ease;
}

.qreate-breadcrumb-two .breadcrumb a:hover {
    color: #00E5FF !important;
}


/* Page courante */
.qreate-breadcrumb-two .breadcrumb li:last-child,
.qreate-breadcrumb-two .breadcrumb li:last-child a {
    color: #e069ff !important;
}


/* ---------------------------------------------------------
   DECORATION DROITE
   --------------------------------------------------------- */

.qreate-banner-circle-effect {
    position: absolute;

    top: 0;
    right: 0;

    width: 430px;
    height: 100%;

    pointer-events: none;

    opacity: 1;
}


/* Masque les formes Qreate d'origine */
.qreate-banner-circle-effect > * {
    display: none !important;
}


/* Grand cercle filaire */
.qreate-banner-circle-effect::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -30px;
    top: 50%;

    transform: translateY(-50%);

    border:
        1px solid rgba(224,105,255,.26);

    border-radius: 50%;

    background: transparent;

    box-shadow:
        inset 0 0 60px rgba(112,69,221,.018),
        0 0 45px rgba(112,69,221,.025);
}


/* Petit cercle cyan */
.qreate-banner-circle-effect::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: 72px;
    bottom: 32px;

    border:
        1px solid rgba(0,229,255,.18);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(224,105,255,.07),
            rgba(112,69,221,.028) 48%,
            transparent 72%
        );

    box-shadow:
        0 0 35px rgba(224,105,255,.04);
}


/* ---------------------------------------------------------
   CONTENU AU-DESSUS
   --------------------------------------------------------- */

.qreate-breadcrumb-one .container {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   TABLETTE / MOBILE
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .qreate-banner-circle-effect {
        width: 280px;
        opacity: .60;
    }

    .qreate-banner-circle-effect::before {
        width: 230px;
        height: 230px;
        right: -90px;
    }

    .qreate-banner-circle-effect::after {
        width: 80px;
        height: 80px;
        right: 22px;
    }

}

@media (max-width: 767px) {

    .qreate-banner-circle-effect {
        opacity: .30;
    }

}

/* =========================================================
   APOLLO - TITRE HEADER DES ARTICLES
   H1 semantique, apparence identique au title des pages
   ========================================================= */

.qreate-breadcrumb-one h1.apollo-blog-header-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    color: inherit !important;
    text-transform: inherit !important;
}

/* H1 articles : même rendu que les titres de pages */
.qreate-breadcrumb-two h1.title.apollo-blog-header-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font: inherit !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
    line-height: inherit !important;
}


/* =========================================================
   TITRE H1 ARTICLES - rendu visuel identique au header pages
   ========================================================= */

.qreate-breadcrumb-two h1.title.apollo-blog-header-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family: Akshar, sans-serif !important;
    font-size: 72px !important;
    line-height: 1 !important;

    font-weight: 400 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;

    color: #fff !important;
}

/* =========================================================
   BLOG H1 - MEME RENDU QUE LE TITLE DES PAGES
   ========================================================= */

.qreate-breadcrumb-two h1.title.apollo-blog-header-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family: Akshar, sans-serif !important;
    font-size: 81px !important;
    font-weight: 400 !important;
    line-height: 105.3px !important;
    letter-spacing: 1.62px !important;
    text-transform: capitalize !important;

    color: #fff !important;
}


/* =========================================================
   BLOG LISTING - TITRES DE CARDS EN H2
   ========================================================= */

.blog .qreate-blog-box .entry-title,
.archive .qreate-blog-box .entry-title,
.author .qreate-blog-box .entry-title {
    font-family: Akshar, sans-serif !important;
    font-size: 42px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .blog .qreate-blog-box .entry-title,
    .archive .qreate-blog-box .entry-title,
    .author .qreate-blog-box .entry-title {
        font-size: 32px !important;
    }
}