@font-face {
    font-family: 'Lithos-Black';
    src: url('/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/Lithos-Black.woff2') format('woff2'),
    url('/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/Lithos-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lithos-Bold';
    src: url('/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/Lithos-Bold.woff2') format('woff2'),
    url('/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/Lithos-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.bold {
    font-weight: 700;
}

.ensembleSliderAlbums .item a .collection_container .nouveaute {
    background-color: rgba(255,0,0,0.66);
}

.univers_les_petits_mythos .degradeRight {
    display: none !important;
}
.univers_les_petits_mythos .UniversResume .tags {
    max-width: 788px;
}

.univers_les_petits_mythos .bg_nuage {
    background: url(/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/bg-nuages.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.UniversResumeAsideMenu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    right: 30px;
}
.UniversResumeAsideMenu .aside_links {
    background: #1583b5;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    padding: 0 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.UniversResumeAsideMenu .aside_links:hover {
    background: #FF8000;
}

.univers_les_petits_mythos .bg_blue {
    background-color: #1784b6;
}
.univers_les_petits_mythos .bg_blue .eclair {
    position: absolute;
    left: -72px;
}

.univers_les_petits_mythos .bg_blue .UniversResume {
    max-width: 900px;
    margin: 0 auto 0 auto;
    padding: 20px 0 50px 0;
}

.univers_les_petits_mythos .bg_blue .personnages_principaux {
    max-width: 1072px;
    margin: 0 auto 0 auto;
    padding: 20px 2% 0 2%;
}
.univers_les_petits_mythos .bg_blue .personnages_principaux h3 {
    font-family: 'Lithos-Black';
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    color: #ffffff;
    margin: 2rem auto;
}
.slider_cartes {
    position: relative;
    padding: 20px 0 20px 0;
}
.slider_cartes .tns-controls {
    position: absolute;
    top: 40%;
    z-index: 1;
    width: 110%;
}
.slider_cartes .tns-controls [data-controls] {
    width: 52px;
    height: 52px;
    text-indent: -9999px;
    border: 0;
    background-color: transparent;
    position: absolute;
}
.slider_cartes .tns-controls [data-controls="prev"] {
    background: url(/customers/websites.xxx/assets/css/bamboo/gfx/prev-rounded-slider-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: -60px;
    visibility: hidden;
}
.slider_cartes .tns-controls [data-controls="next"] {
    background: url(/customers/websites.xxx/assets/css/bamboo/gfx/next-rounded-slider-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: 30px;
    visibility: hidden;
}
.personnages_principaux:hover .slider_cartes .tns-outer .tns-controls button {
    visibility: visible;
}
.slider_cartes .tns-outer [aria-controls], .slider_cartes .tns-outer [data-action] {
    cursor: pointer;
}

.univers_les_petits_mythos .cartes {
    display: flex;
}
.univers_les_petits_mythos .cartes .personnage {
    background: url("/customers/websites.xxx/templates/fr_FR/medias/visuels/les-incontournables/les_petits_mythos/bg-carte-petits-mythos.webp") no-repeat top center;
    background-size: cover;
    width: 337px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    margin: 0 15px 15px 15px;
    border-radius: 15px;
}
.univers_les_petits_mythos .cartes .personnage .nom {
    font-family: 'Lithos-Black';
    font-size: 2rem;
}
.univers_les_petits_mythos .cartes .personnage img {
    margin: 15px auto;
}
.univers_les_petits_mythos .cartes .personnage p {
    color: #000000;
    font-size: 1rem;
    padding: 0 15px;
    font-weight: 700;
    line-height: 1rem;
}

.univers_les_petits_mythos .bg_blue .presse {
    margin: 0 auto 0 auto;
    padding: 20px 2% 50px 2%;
}
.univers_les_petits_mythos .bg_blue .presse h3 {
    font-family: 'Lithos-Black';
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    color: #ffffff;
    margin: 2rem auto;
}
.bulle_container_01 {
    display: inline-block;
    position: relative;
    margin-left: 15%;
    width: 24%;
}
.bulle_container_02 {
    display: inline-block;
    position: relative;
    margin-left: 4%;
    width: 23%;
}
.bulle_container_03 {
    display: inline-block;
    position: relative;
    margin-left: 3%;
    width: 20%;
}
.bulle_container_04 {
    display: inline-block;
    position: relative;
    margin-left: 21%;
    width: 23%;
    margin-top: 13%;
}
.bulle_container_05 {
    display: inline-block;
    position: relative;
    margin-left: -14%;
    width: 22%;
}
.bulle_container_06 {
    display: inline-block;
    position: relative;
    margin-left: 4%;
    width: 22%;
}
.bulle_01, .bulle_02, .bulle_03, .bulle_04, .bulle_05, .bulle_06 {
    width: 100%;
    height: auto;
}
.bulle_03 {
    position: absolute;
    margin-top: -74%;
}
.bulle_05 {
    position: absolute;
    margin-top: -120%;
}
.bulle_06 {
    position: absolute;
    margin-top: -100%;
}

@media (max-width: 1140px) {
    .UniversResumeAsideMenu {
        flex-direction: row;
        position: static;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .UniversResumeAsideMenu .aside_links {
        margin-left: 5px;
        margin-right: 5px;
    }

    .bulle_container_01 {
        width: 32%;
    }
    .bulle_container_02 {
        width: 32%;
    }
    .bulle_container_03 {
        width: 32%;
    }
    .bulle_container_04 {
        width: 32%;
        margin-top: 7%;
    }
    .bulle_container_05 {
        margin-top: 12%;
        margin-left: 12%;
        width: 32%;
    }
    .bulle_05 {
        position: static;
        margin-top: 0;
    }
    .bulle_container_06 {
        width: 32%;
    }
    .bulle_06 {
        position: static;
        margin-top: 0;
    }
}

@media (max-width: 850px) {
    .UniversResumeAsideMenu {
        margin-top: 50px;
    }
}

@media (max-width: 650px) {
    .bulle_container_01,
    .bulle_container_02,
    .bulle_container_03,
    .bulle_container_04,
    .bulle_container_05,
    .bulle_container_06 {
        width: 72%;
    }
    .bulle_03 {
        position: static;
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    .univers_les_petits_mythos .bg_blue .eclair {
        display: none;
    }
}