/**************
  A11y helpers
 **************/
.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/*********************
 Text content : Colors
 ********************/

a, h2, h2 a, h2 span, .listing_tab > a,
.article_fp > article .etape_fp h2 span,
.card_summary__title,
.voir_plus, .text_cta,
.card_article .title_block .text_cta span,
.product-box-h .box-title {
    color: #026d90 !important;
}
.rubrique-liee .head-content .subtitle {
    color: #04101B !important;
}
.rubrique-liee .block a:hover,
.rubrique-liee ul li span:hover, main article .rubrique-liee ul li span:hover {
    color: #FF8669;
}
.rubrique-liee .block h3 {
    color: #FF8669;
    border-bottom: 1px solid #FF8669;
}

/* Mobile menu */
.stepper-mobile .block-link .title,
.icon-hamburger span {
    background: #026d90;
}

.stepper-mobile .block-link .block-summary > div .subtitle.active a,
.stepper-mobile .block-link .block-summary .block p.active::before {
    color: #04101B !important;
}

.stepper-mobile .block-link .block-summary .block p::before,
.box_devis .h2 {
    color: #026d90 !important;
}

/* Chevrons */
.rubrique-liee ul li::before, main article .rubrique-liee ul li::before {
    color: #FF8669 !important;
}
.card_summary li {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='20px'><text x='0' y='21' fill='%233D4854' font-size='20'>•</text></svg>") no-repeat left top !important;
}
.rubrique-liee ul li::before, .content_page ul li::before,
.headerMVP>div .next span::before, .headerMVP>div .previous span::before {
    color: #3D4854 !important;
}
.headerMVP>div .next span:hover, .headerMVP>div .previous span:hover {
    background-color: #026d90 !important;
}

/* Forms */

.bt_large:hover, .bt_small_reverse:hover, .bt_rouge:hover {
    color: #026D90 !important;
    background-color: #FFFFFF !important;
}

[class*='bt_large'],
.bt_rouge {
    background-color: #64D6DF !important;
    border: 2px solid #026D90 !important;
}

.box_devis {
    border: 1px solid #026D90 !important;
}

/* Icons */
.convert-doc span,
.attention > span.icon, .attention > span[class*="icon-"], .content-commerce .owl-carousel.entete .owl-nav.attention > span, .note > span.icon, .note > span[class*="icon-"], .content-commerce .owl-carousel.entete .owl-nav.note > span, .exemple > span.icon, .exemple > span[class*="icon-"], .content-commerce .owl-carousel.entete .owl-nav.exemple > span {
    filter: brightness(0) saturate(100%) invert(11%) sepia(39%) saturate(608%) hue-rotate(170deg) brightness(97%) contrast(92%);
}

/* Article */
.intro-image {
    margin-bottom: 5rem;
}

.intro-image-copyright {
    color: #5F6872;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600;
}

/***
 Ads
 **/

.product-box-v .bt-large--reverse,
.product-box-h .bt-large--reverse {
    border: 1px solid #026d90 !important;
}
.product-box-v .bt-large--reverse span,
.product-box-h .bt-large--reverse span {
    color: #026d90 !important;
}
.product-box-v .bt-large--reverse:hover span,
.product-box-h .bt-large--reverse:hover span {
    color: #6840B3 !important;
    background-color: #64D6DF !important;
}

/******
 Footer
 *****/

/* Sets the footer's background as white */
footer {
    background-color: #FFFFFF;
}
/* Force some values because we cannot choose css to load */
footer span, footer .footer-rail .charte a {
    color: #5f6872 !important;
}
footer .footer-core li .pj-link {
    color: #3d4854 !important;
}
footer .pj-link, footer a {
    color: #026d90 !important;
}
/* Sets the rest as black. Footer will have white text color without this */
footer *{
    color: #04101b !important;
}

/*****************
 Navigation banner
 ****************/

.listing_tab .selected {
    color: #04101B !important;
    border-top : 2px solid #04101B !important;
}
.listing_step .selected .libelle {
    color: #04101B !important;
}
.listing_tab .icon-home,
.nb_stepper {
    color: #026d90 !important;
    border-color: #026d90 !important;
}
.listing_tab .selected .icon-home {
    color: #04101B !important;
    border-color: #04101B !important;
}
.listing_step .selected .nb_stepper {
    color: #F2F3F4 !important;
    border-color: #04101B !important;
    background-color: #04101B !important;
}
.listing_step>*.selected ~ a::before,
.listing_step>*.selected ~ a::after,
.listing_step>*.selected::after{
    background: #026d90 !important;
}
.listing_step>*::before,
.listing_step>*::after {
    background: #04101B !important;
}
.listing_step > *:hover .nb_stepper,
.listing_step > *:hover * .nb_stepper,
.listing_step > *.focused .nb_stepper,
.listing_step > *.focused * .nb_stepper {
    color: #F2F3F4 !important;
    border: 3px solid #026d90;
    background-color: #026d90;
}
/* hover on link */
@media (min-width: 768px) {
    .listing_step > *:hover, .listing_step > *:hover *, .listing_step > *.focused, .listing_step > *.focused * {
        text-decoration: underline;
        color: #026d90;
    }
}

/* Fixed navigation : a bit larger, same size as the first one */
.mvp_folder,
.mvp_folder .menuXL .element_fixed {
    height: 7.5rem !important;
}
.mvp_stepper .menuXL .element_fixed {
    height: 8.5rem;
}
.listing_tab>* {
    padding: 2.5rem 1rem;
}



/*********
 Downloads
 ********/

.doc-download {
    padding-top: 0;
}

/* Hide downloads box */
.card_download {
    display: none;
}

.popin_content>div {
    all: unset;
}

.modal-header {
    margin-inline: auto;
    max-width: 100vw;
}

.modal-content {
    background-color: #ffffff;
    max-height: calc(100vh - 40px); /* 40px is the height of the modal header */
    max-width: 100vw;
    overflow: auto;
}

.modal-content > iframe {
    max-height: calc(100vh - 40px); /* 40px is the height of the modal header */
    max-width: 100%;
}

#_popinHeaderDiv {
    background: #FFEC00;
    width: 100%;
    height: 40px;
}

#_closePopin {
    margin: 10px auto 10px 10px;
    display: block;
    float: right;
}

.close-modal-btn {
    background-color: unset;
    display: block;
    margin-left: auto;
    padding: 10px;
}

.btn-download {
    background-color: unset;
    color: #026d90;
    display: block;
    margin-inline: auto;
    text-transform: uppercase;
}

.btn-download--text {
    margin-inline: unset;
    margin-top: unset;
    text-transform: unset;
}

.link--block {
    background-color: #f9f9f9;
    border-bottom: 1px solid #d8d8d8;
    border-radius: .3rem;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .05),
        0 1px 2px 0 rgba(0, 0, 0, .12);
    color: #026d90;
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
    margin-block: 2rem;
    max-width: 578px;
    padding: 3rem 3rem 3.5rem;
    position: relative;
    text-decoration: none;
}

.link--block::after {
    bottom: 3rem;
    color: #fa5a1e;
    content: "\F105" / "";
    font-family: icomoon;
    font-size: 2.4rem;
    position: absolute;
    right: 3rem;
}

.link--block strong {
    margin-block-end: 1.5rem;
}

/******************************
 Necessary CSS from main-basics
 *****************************/

@media only screen and (min-width: 48em) {
    body {
        font-size: 1.4rem;
        line-height: 1.4;
    }
}

/* On big screens, fill the whole page */
@media only screen and (min-width: 75em) {
    .wrapper {
        width: 120rem;
    }
}

@media only screen and (min-width: 61.25em) {
    .wrapper {
        width: 98rem;
        padding: 0;
    }
}

/* Hide some elements for mobile */
@media only screen and (max-width: 47.938em) {
    .hidden-phone {
        display: none !important;
    }
}

.wrapper, aside {
    margin: 0 auto;
}

.row {
    margin-left: -13px;
    margin-right: -13px;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    min-height: 1px;
    padding-left: 13px;
    padding-right: 13px;
}

@media (min-width: 48em) {
    .col-sm-6 {
        width: 50%;
    }
}

.small, small {
    font-size: 1.2rem;
}

.text-right {
    text-align: right;
}

ul {
    list-style: none none;
    margin: 0 0 1.6rem;
    padding: 0;
}

.hidden-desktop, .hidden-desktop-wide, .visible-desktop, .visible-desktop-wide, .visible-phone, .visible-print, .visible-tablet {
    display: none!important;
}

.h1, .h2, h1, h2 {
    margin-bottom: 1.6rem;
    font-weight: 600;
}

.pj-link, a {
    color: #026d90;
    text-decoration: none;
    cursor: pointer;
}

.row:after {
    clear: both;
}

.row:after, .row:before {
    content: " ";
    display: table;
}

/**********************************
 Necessary CSS from main-desktop
 *********************************/

@media (min-width: 1200px) {
    footer .footer-core {
        padding: 6rem 0 2rem;
    }
}

@media (min-width: 980px) {
    .footer-core {
        padding: 6rem 5rem 2rem;
    }
}


/**********************************
 Necessary CSS from main-metanav-hp
 *********************************/

/* Resize navigation bar */
.metanav figure {
    width: 20rem;
    height: 4.8rem;
    float: left;
}

.metanav .wrapper {
    height: 7.5rem;
    padding: 1.3rem;
}

#InstantSearchApp {
    float: left;
    margin-left: 30px;
}

/************************************
 Necessary CSS from main-mobile-first
 ***********************************/

/* Color of footer-core (gray) */
.footer-core {
    background-color: #f2f3f4;
}

.wrapper {
    width: 100%;
    padding: 1rem 4%;
}

.footer-rail .wrapper {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
}

.footer-rail .groupe img {
    margin-left: 0.8rem;
}

.footer-title {
    font-size: 1.3rem;
    font-weight: 600;
    position: relative;
    margin-bottom: 0;
    text-transform: uppercase;
    height: 7rem;
    padding: 2.3rem 4%;
    cursor: pointer;
    line-height: 2rem;
}

.footer-core .footer-univers, .footer-core .footer-infos-legales {
    padding: 0 0 2rem 4%;
    line-height: 1.5rem;
    margin-bottom: 4rem;
}

.footer-core .cursor-mobile {
    cursor: pointer;
}

.footer-core li .pj-link {
    position: relative;
    text-align: left;
    display: table;
    height: 100%;
    width: 100%;
    color: #3d4854;
    font-size: 1.3rem;
    background-color: transparent;
    font-family: inherit;
}

.footer-rail .pj-link {
    position: relative;
}

.footer-rail .groupe .small, .footer-rail .groupe img {
    vertical-align: middle;
}

.footer-core .icon-lt-arrow-down, .footer-core .icon-lt-arrow-up {
    font-size: 1rem;
    float: right;
    width: 1rem;
    color: #3d4854;
    line-height: 2rem;
    text-align: right;
}

.footer-core .open-aide .footer-univers, .footer-core .open-univers .footer-univers, .footer-core .open-aide .footer-infos-legales, .footer-core .open-info-legales .footer-infos-legales {
    padding: 0 4% 2.5rem;
}

.footer-core .open-aide .footer-aide, .footer-core .open-aide .footer-univers, .footer-core .open-aide .footer-infos-legales, .footer-core .open-aide .icon-lt-arrow-up, .footer-core .open-info-legales .footer-aide, .footer-core .open-univers .footer-univers, .footer-core .open-info-legales .footer-infos-legales, .footer-core .open-info-legales .icon-lt-arrow-up {
    display: block;
    visibility: visible;
}

.footer-core .footer-aide, .footer-core .footer-univers, .footer-core .footer-infos-legales, .footer-core .icon-lt-arrow-up {
    display: none;
    margin-bottom: 0;
}

.footer-rail .marques {
    margin-bottom: 1.6rem;
}

@media (min-width: 768px) {
    .footer-rail .marques {
        margin-bottom: 1.6rem;
    }
}

footer.wrapper {
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

/******************************
 Necessary CSS from main-tablet
 *****************************/

.footer-rail .marques a {
    margin-right: 1.6rem;
}

.footer-rail .marques img {
    max-width: none;
}

@media (min-width: 768px) {
    .footer-core {
        padding: 4.5rem 3.5rem 2rem;
        font-family: open sans, Arial, Helvetica, sans-serif;
    }

    .footer-title {
        padding: 0;
        height: 100%;
        cursor: default;
        font-family: open sans,Arial,Helvetica,sans-serif;
    }

    .footer-core #footer-univers, .footer-core #footer-infos-legales {
        padding: 0;
    }

    .wrapper {
        width: 98rem;
        padding: 0;
    }

    .footer-core .footer-univers, .footer-core .footer-infos-legales {
        margin-bottom: 3rem;
        display: block;
    }

    .footer-core-col1, .footer-core-col2, .footer-core-col3, .footer-core-col4 {
        width: 24%;
        display: inline-block;
        vertical-align: top;
    }

    .footer-title::after {
        display: block;
        content: ".";
        text-indent: -999em;
        background-color: #3d4854;
        width: 7rem;
        height: 0.1rem;
        margin-top: 1.2rem;
        margin-bottom: 0.5rem;
    }
}

.footer-core .footer-univers, .footer-core .footer-infos-legales {
    display: block;
}

.bg_jaune {
    background-color: #FFEC00;
    color: #000000 !important;
}

.icon-chevron::before {
    color: #000000 !important;
}

.meta_nav a:hover, .meta_nav .select_univers {
    background: #64D6DF !important;
}

.attention, .exemple, .note {
    padding: 2rem 1.5rem 2rem 7.5rem;
}

/******************************
 Necessary CSS from styles_1
 *****************************/

/* Header sous le logo PJ */
header hr {
    border-top: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
    border-left: none;
    margin: 0;
}

/* Pagination */
.pagination a {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-top: 1rem;
    background: #A990D9;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    -webkit-border-radius: 0.3rem;
    border-radius: 0.3rem;
    -webkit-transition: all .3s 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

/* Taille des H3 sur les pages */
h3 {
    margin: 2rem 0 1rem;
    font-size: 2.5rem;
    font-family: museo, Calibri, Arial, Helvetica, sans-serif;
}

/* Taille des titres sur les listing des astuces */
.astuce_liste .top_tips .w_2_3 .titre_contenu {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 3rem;
}

.astuce_liste .top_tips .w_1_3 .titre_contenu {
    overflow: hidden;
    font-size: 2rem;
}

/* Espacement dans le listing des fiches */
.astuce_liste .listing_astuce>div {
    font-size: 1.6rem;
}

.astuce_liste .listing_astuce>div+div {
    margin-top: 4rem;
}

/* Border des notes sur les pages fiches */
.note, .note_tableau {
    border-left: 3px solid #04101B;
}

/* Footer liens rapides */
.box_bas_page .titre_bas_page {
    position: relative;
    margin-bottom: 3rem;
    font-size: 4rem;
    font-family: open-sans, Calibri, Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: inherit;
}

.box_lien_rapide p {
    font-size: 2.6rem;
    font-family: museo, Calibri, Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.listing_guide .titre_listing_guide_mobile {
    display: none;
}

.box_lien_rapide p {
    font-size: 2.6rem;
    font-family: museo, Calibri, Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.box_lien_rapide div .liste_connexe {
    overflow: auto;
    margin: 1em 0 3rem;
    font-size: 1.8rem;
}

.box_lien_rapide div .liste_connexe li {
    position: relative;
}

.box_lien_rapide div .liens_rapides li {
    position: relative;
}

.w_1_4:nth-of-type(4n+1) {
    clear: both;
    margin-left: 0;
}

.w_1_4:nth-of-type(-n+4) {
    margin-top: 0;
}
.w_1_4 {
    float: left;
    width: 21.25%;
    margin: 2rem 0 0 5%;
}

.box_lien_rapide ul li::before {
    content: "" !important;
}

.box_lien_rapide div .liste_connexe li a {
    display: block;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-bottom: 1px solid #ccc;
}

/* Title Dico */
.moteur_plante .ss_titre {
    font-size: 3rem;
    font-family: museo, Calibri, Arial, Helvetica, sans-serif;
    margin: 0 0 2rem;
    line-height: 100%;
}

form fieldset textarea, form fieldset input {
    clear: both;
    display: block;
    width: 100%;
    min-height: 3.5rem;
    margin: 0.5rem 0 0;
    padding: 0 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 1.8rem;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

/* Page produit */
.content-commerce .bloc-article h3 {
    background-color:#A990D9;
}

/* Img on homepage for ex-PHP domains */
.img_droite {
    float: right;
    display: block;
    margin: 1rem 0 0 1rem;
    box-shadow: 0 0 0 8px #fff;
}

figure.bloc_image a.figureLink {
    display: block;
}

/* Fil d'Ariane */
.filArianeDiv {
    clear: both;
    box-sizing: content-box;
    max-width: 1000px;
    margin: auto;
}

.filArianeDiv ol, .filArianeDiv li, .filArianeDiv li::before {
    list-style: none !important;
    list-style-type: none !important;
    content: "";
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: -1em;
}

.filArianeDiv li {
    display: inline-block;
}

/******************************
PLACEHOLDER ADS BANNERS
 *****************************/
.placeholder-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 44;
    overflow: hidden;
}
.placeholder-banner{
    height: 60px;
}
.placeholder-activity {
    display: flex;
    justify-content: center;
}
.placeholder-activity iframe {
    margin: auto;
}
@media (min-width: 768px) {
    .placeholder-banner{
        height: 90px;
    }
}

@supports selector(:has(a)) {
    .placeholder-wrapper:not(:has(iframe)) {
        background-color: rgb(211, 211, 211);
        border-radius: 5px;
    }

    .placeholder-activity:not(:has(iframe)) {
        position: absolute;
        left: -45%;
        height: 100%;
        width: 45%;
        background-image: linear-gradient(to left, rgba(251, 251, 251, .05), rgba(251, 251, 251, .3), rgba(251, 251, 251, .6), rgba(251, 251, 251, .3), rgba(251, 251, 251, .05));
        animation: loading 1s infinite;
        z-index: 45;
    }

    @keyframes loading {
        0% {
            left: -45%;
        }
        100% {
            left: 100%;
        }
    }
}