/* Font Moranga */
@font-face {
    font-family: 'Moranga';
    src: url('../fonts/Moranga-Bold.woff2') format('woff2'),
    url('../fonts/Moranga-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moranga';
    src: url('../fonts/Moranga-Regular.woff2') format('woff2'),
    url('../fonts/Moranga-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* System message */
#system-message-container  {
    position: fixed;
    bottom: 10px;
    z-index: 1000;
    left: 10px;
}

/* Accordion */
.uk-accordion-title {
    display: flex;  /* Use flexible box layout */
    align-items: center;  /* Vertically center the contents */
    justify-content: space-between;
    border-radius: 40px;
    line-height: 1.5;
    padding-left: 24px;
    padding-right: 0;
}
.uk-accordion-title::before {
    display: none;
}
.uk-accordion-title::after {
    content: "";
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin-right: 10px;  /* Use margin-right instead of margin-left to space it from the text */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23101010%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23101010%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 4px;
    border-radius: 50%;
    background-color: #FFC34F;
}
.uk-accordion .el-content {
    margin: 0 24px;
}
/* Additional sections */
.uk-section-beige-clair {
    background-color: #FAF7EB;
}
.uk-section-beige {
    background-color: #FFF0DA;
;
}
.uk-title-regular {
    font-weight: normal;
}
/* Cartouches */
.uk-title-pink {
    line-height: 1;
    font-family: "Moranga", serif;
    font-weight: bold;
    font-size: 50px;
}
.uk-title-pink span {
    background-color: #FFB0FD;
    border-radius: 50px;
    line-height: 1.2;
    padding: 0 20px;
    color:#101010;
}

/* Pour appliquer le style cartouche sur du texte, il faut appliquer 3 classes sur le containeur

1- la classe uk-title-round
2- 3 choix de taille : xl l ou s (en minuscules)
3- la couleur au choix parmis : pink yellow green beige white black
 */
.uk-title-round {
    line-height: 1;
    font-family: "Moranga", serif;
    font-weight: bold;
}
.uk-title-round span {
    line-height: 1.2;
}
.uk-title-round.pink span{
    background-color: #FFB0FD;
    color:#101010;
}
.uk-title-round.green span {
    background-color: #C6FF8C;
    
}
.uk-title-round.yellow span{
    background-color: #FFC34F;
}
.uk-title-round.beige span {
    background-color: #f0e7da;
    color:#101010;
}
.uk-title-round.black span {
    background-color: #101010;
    color:#FFFCF9;
}
.uk-title-round.white span {
    background-color: #FFFCF9;
    color:#101010;
}
/* Cards */
.uk-card-green {
    background-color: #C6FF8C;
}

/* Grid Filters */
.fs-filter-grid .el-nav.uk-subnav li {
    margin-bottom: 15px;
}

.uk-title-round.xl {
    font-size: 50px;
}
.uk-title-round.l {
    font-size: 25px;
}
.uk-title-round.s {
    font-size: 18px;
}
.uk-title-round.xl span{
    border-radius: 50px;
    padding: 0 20px;
}
.uk-title-round.l span{
    border-radius: 25px;
    padding: 0 10px;
}
.uk-title-round.s span {
    border-radius: 18px;
    padding: 0 7px;
}

@media (max-width: 640px) {
.uk-title-round.xl {
    font-size: 35px;
}
.uk-title-round.xl span{
    border-radius: 35px;
    padding: 0 15px;
}
}

/* Navbar */
.uk-navbar .uk-navbar-nav li.uk-active > a {
    text-decoration: underline;
    font-weight: bold;
}
.uk-navbar-dropbar {
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
/* Nav top */
.nav-categories .uk-active a {
    font-weight: bold;
    text-decoration: underline;
}
/* Level labels */
.uk-level {
    text-transform: uppercase;
    border: 2px solid;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}
/* Custom buttons */
.uk-button-inverse .uk-button-secondary {
    border-color: #101010;
    color: #101010;
    background-color: transparent;
}
.uk-button-price span {
    float: right;
}
.uk-button {
    padding-top: 10px;
    padding-bottom: 10px;
}
.uk-button-small {
    padding-top: 4px;
    padding-bottom: 4px;
}
.uk-button-large {
    padding-top: 20px;
    padding-bottom: 20px;
}
/* Border radius Utility */
.uk-border-radius-10 {
    border-radius: 10px;
}
.uk-border-radius-20 {
    border-radius: 20px;
}
.uk-border-radius-30 {
    border-radius: 30px;
}
/* Max-width utility */
.mw-20 {
    max-width: 20%;
}
.mw-50 {
    max-width: 40%;
}
.mw-60 {
    max-width: 60%;
}
.mw-100 {
    max-width: 100%;
}
/* Formulaire de souscription */
.uk-radio-block {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.uk-radio-block:hover {
    border-color: #101010;
    background: #FAEEDD;
}
.uk-radio-block.selected {
    border-color: #101010;
    background: #FAEEDD;
}
.uk-radio-block .price {
    font-size: 32px;
    font-weight: bold;
}
.uk-radio-block .price span {
    font-size: 18px;
    font-weight: normal;
    opacity: .5;
    text-decoration: line-through;
}
.uk-radio-block input {
    margin-right: 10px;
}
.uk-radio-block label {
    display: flex;
    align-items: center;
}
/* Sliding text */
.sliding-text-top {
    font-weight: normal;
    color: #FAEEDD !important;
}
/* Tous les plannings */
#cycles-tabs .el-nav:not(.uk-dotnav) a {
    font-size: 30px;
    font-family: "Moranga", serif;
    font-weight: bold;
    border: none;
    color: #101010;
    opacity: .2;
}
#cycles-tabs .el-nav:not(.uk-dotnav) .uk-active a {
    opacity: 1;
}
/* Scrolling wrapper for help videos */
.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.media {
    display: inline-block;
    vertical-align: text-top;
}
.media:not(:last-child) {
    margin-right: 10px;
}

.slider-lcdj ul.uk-subnav {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.slider-lcdj ul.uk-subnav li {
    display: inline-block;
}
.slider-lcdj ul.uk-subnav li:not(:last-child) {
    margin-right: 10px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrolling-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrolling-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.uk-card-primary {color:#101010;}

/* Page Avis */
#main-switcher > ul.el-nav > li a {
    font-family: "Moranga", serif;
    font-size: 24px;
    font-weight: bold;
    color: #b4b5ba;
    border: none;
}
#main-switcher > ul.el-nav > li.uk-active a {
    color: #101010;
    text-decoration: underline;
}
/* RESPONSIVE */

/* Mobile only */
@media screen and (max-width: 640px) {
    .multi-label > div {
        font-size: 16px;
    }
    .page-abo {
        font-size: 44px;
    }
    .uk-accordion .uk-accordion-title {
        line-height: 1.2;
        padding: 10px 0 10px 25px;
    }
    #cycles-tabs .el-nav li {
        padding-left: 0;
        margin-left: -3px;
  }
}

/* Tablets only */
@media screen and (max-width: 960px) and (min-width: 640px) {

}
/* slide Home */
@media screen and (min-width: 1200px)  {
.home-slide {width:600px;}
.p-top-left {margin-top:-630px;}
.home-slide .uk-h1 {font-size:75px;}
}
@media screen and (min-width: 960px) and (max-width: 1200px) {
.home-slide {width:600px;}
.p-top-left {position:absolute;top:-440px;}
.home-slide .uk-h1 {font-size:50px;}
}

@media screen and (max-width: 960px) and (min-width: 640px) {
.home-slide {width:450px;}
.home-slide .uk-h1 {font-size:30px;}
.p-top-left {padding-left:70px}
.home-slide p {
    margin:5px 0;
    width:300px;
    color:#101010;
    background:#fff;
    padding:10px;
    opacity:0.5;
    border-radius:15px;
}
.home-slide .uk-button {
font-size:15px;
padding:15px}    
}

/* Boostrap*/

.btn {

    margin: 10px 0 0 0 ;
    border: none;
    overflow: visible;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 20px;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: .1s ease-in-out;
    transition-property: color,background-color,background-position,background-size,border-color,box-shadow;
    font-family: DM Sans;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -1%;
    border-radius: 20px;
    background-origin: border-box
}

.btn:not(:disabled) {
    cursor: pointer
}

.btn::-moz-focus-inner {
    border: 0;
    padding: 0
}

.btn:hover {
    text-decoration: none
}

.btn-default {
    background-color: #f0e7da;
    color: #101010;
    border: 1px solid transparent
}

.btn-default:hover {
    background-color: transparent;
    color: #101010;
    border-color: #e5e5e7
}

.btn-default.uk-active,.btn-default:active {
    background-color: transparent;
    color: #101010;
    border-color: #cacacf
}

.btn-primary {
    background-color: #ffc34f;
    color: #101010;
    border: 1px solid transparent
}

.btn-primary:hover {
    background-color: transparent;
    color: #ffc34f;
    border-color: #ffc34f
}

.btn-primary.uk-active,.btn-primary:active {
    background-color: transparent;
    color: rgba(255,195,79,.8);
    border-color: rgba(255,195,79,.6)
}

.btn-danger {
    background-color: #e44e56;
    color: #fff;
    border: 1px solid transparent
}

.btn-danger:hover {
    background-color: transparent;
    color: #e44e56;
    border-color: #e44e56
}

.btn-danger.uk-active,.btn-danger:active {
    background-color: transparent;
    color: rgba(228,78,86,.8);
    border-color: rgba(228,78,86,.6)
}


/* Lecteur Vidéo -> Commentaires*/

#media_comment{ border-radius:10px}

.modal_comments_box input[type="submit"] {float:right;}

/* Vignette vidéo*/

.videoplayer-box-outer .mw-50 {
	max-width: 75% !important;
	max-height: 60% !important;
}