@import url("https://use.typekit.net/qbb7upc.css");

* {
    box-sizing: border-box;
}

/**** FONT - START ****/
/*
@font-face {
font-family:"obviously";
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}
@font-face {
font-family:"obviously";
font-display:auto;font-style:normal;font-weight:800;font-stretch:normal;
}
@font-face {
font-family:"elza-round-variable";
font-display:auto;font-style:normal;font-weight:300 800;font-stretch:normal;
}
*/
/**** FONT - END ****/

/* ==========================================================================
   VARIABLES & CONFIGURATION
   ========================================================================== */

:root{
    --light-color:#F4F2F2;
    --dark-color:#333332;
    --yellow-default:#ffca00;
    --orange-default:#ff4400;
    --blue-default:#0A66DD;
    --blue-light:#abeefe;
    --pink-default:#ffccff;
    --brown-default:#826e50;
    --radius-default:10px;
}

::selection {
    background: var(--orange-default);
    color: var(--light-color);
}
::-moz-selection {
    background: var(--orange-default);
    color: var(--light-color);
}

body{
    background-color: var(--light-color);
    color: var(--dark-color);
    min-height: 100vh;
    font-family:"elza-round-variable";
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family:"obviously";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: uppercase;
    line-height: 1;
}

h2{
    font-size: 52px;
    letter-spacing: -1px;
}


a.crypted:after {
    content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}


a {
    color: var(--orange-default);
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--orange-default);
    }
}
a:active,
a:focus-within {
    color: var(--orange-default);
}

b, strong{
    font-weight: 700;
}

.text-big{
    font-size: 26px;
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.uk-button{
    border-radius: var(--radius-default);
    padding: 16px 28px;
    text-transform: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.uk-button-default {
    background-color: var(--orange-default);
    color: var(--light-color);
    border: 2px solid var(--orange-default);
}

@media (hover: hover) and (pointer: fine) {
    .uk-button-default:hover,
    .uk-button-default.outline:hover{
        background-color: var(--dark-color);
        color: var(--light-color);
        border: 2px solid var(--dark-color);
    }
}
.uk-button-default:active,
.uk-button-default:focus-within {
    background-color: var(--dark-color);
    color: var(--light-color);
    border: 2px solid var(--dark-color);
}

.uk-button-default.outline {
    background-color: transparent;
    color: var(--dark-color);
    border: 2px solid var(--dark-color);
}
@media (hover: hover) and (pointer: fine) {
    .uk-button-default.bg-dark:hover{
        background-color: var(--light-color);
        color: var(--dark-color);
        border: 2px solid var(--light-color);
    }
}
.uk-button-default.bg-dark:active,
.uk-button-default.bg-dark:focus-within{
    background-color: var(--light-color);
    color: var(--dark-color);
    border: 2px solid var(--light-color);
}

/* ==========================================================================
   MENU-TOP
   ========================================================================== */

.menu-top h1{
    color: var(--light-color);
    font-family:"elza-round-variable";
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.menu-top .uk-navbar-sticky h1{
    display: none;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
    margin-top: -80px;
    color: var(--light-color);
}
.hero .uk-overlay-primary{
    background: #333332;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
}
.hero .logo img{
    width: 720px;
    height: auto;
}
.hero .info{
    font-size: 32px;
    font-weight: 500;
}
.hero .info svg{
    width: 20px;
    fill: var(--yellow-default);
    position: relative;
    top: -2px;
}

@media only screen and (max-width: 640px) {
    .hero .info{
        font-size: 24px;
        line-height: 1.2;
        font-weight: 500;
    }
}

/* ==========================================================================
   LINEUP
   ========================================================================== */

.lineup{
    font-size: 24px;
}
.lineup a{
    color: var(--dark-color);
}

.lineup .uk-grid.artist-grid .artist{
    height: 300px;
    overflow: hidden;
}
.lineup a img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .lineup a:hover{
        text-decoration: none;
        color: var(--orange-default);
    }
    .lineup a:hover img {
        transform: scale(1.08);
    }
}

.lineup .day{
    border-radius: var(--radius-default);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 20px 10px 20px 5px;
}
.lineup .day.day1{
    background-color: var(--orange-default);
    color: var(--light-color);
}
.lineup .day.day2{
    background-color: var(--blue-default);
    color: var(--light-color);
}
.lineup .day.day3{
    background-color: var(--yellow-default);
    color: var(--dark-color);
}

.lineup .day .content{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.lineup .day .content span.weekday{
    font-family:"obviously";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: uppercase;
    font-size: 28px;
    margin-bottom: 10px;
}

.lineup .uk-cover-container.artist{
    border-radius: var(--radius-default);
}
.lineup .uk-cover-container.artist .name{
    border-top-right-radius: var(--radius-default);
    background-color: #ffffff;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    padding: 12px 18px;
}
.lineup .name span{
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    padding: 5px 0;
    display: block;
}
.lineup .uk-cover-container.artist .name.small{
    font-size: 24px;
    line-height: 1;
}


@media only screen and (max-width: 960px) {
    .lineup .uk-grid.artist-grid .artist{
        height: 300px;
    }
    .lineup .day .content{
        writing-mode: inherit;
        transform: none;
        white-space: nowrap;
    }
    .lineup .day {
        border-radius: var(--radius-default);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        padding: 5px 10px 10px 10px
    }
    .lineup .day .content span.weekday {
        margin-bottom: 0;
        margin-right: 10px;
    }
}
@media only screen and (max-width: 640px) {
    .lineup .uk-grid.artist-grid .artist{
        height: 220px;
    }
}

/* ==========================================================================
   BILLETTERIE
   ========================================================================== */

.billetterie{
    background-color: var(--pink-default);
}

.billetterie .ticket{
    border-radius: var(--radius-default);
    font-size: 18px;
    padding: 40px;
}
.billetterie .ticket h3{
    font-size: 44px;
    line-height: 1;
}
.billetterie .ticket .before-title{
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}
.billetterie .ticket .price{
    font-size: 54px;
    font-family:"obviously";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: uppercase;
    line-height: 1;
}
.billetterie .ticket .price span{
    font-size: 18px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
}
.billetterie .ticket.ticket1j{
    background-color: var(--light-color);
}
.billetterie .ticket.ticket1j .before-title{
    color: var(--brown-default);
}

.billetterie .ticket.ticket3j{
    background-color: var(--blue-default);
    color: var(--light-color);
}
.billetterie .ticket.ticket3j h3{
    color: var(--light-color);
}
.billetterie .ticket.ticket3j .before-title{
    color: var(--blue-light);
}
.billetterie .ticket.ticket3j .price span{
    color: var(--blue-light);
}

.billetterie .badge{
    color: var(--dark-color);
    background-color: var(--yellow-default);
    padding: 8px 14px;
    border-radius: var(--radius-default);
    top: -19px;
    right: 32px;
    font-weight: 700;
}

@media only screen and (max-width: 960px) {
    .billetterie .ticket{
        border-radius: var(--radius-default);
        font-size: 18px;
        padding: 34px;
    }
    .billetterie .ticket h3{
        font-size: 36px;
        line-height: 1;
    }
    .billetterie .ticket .price{
        font-size: 44px;
        font-family:"obviously";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        text-transform: uppercase;
        line-height: 1;
    }
    .billetterie .badge{
        color: var(--dark-color);
        background-color: var(--yellow-default);
        padding: 5px 10px;
        border-radius: var(--radius-default);
        top: -16px;
        right: 28px;
        font-weight: 700;
    }
}

/* ==========================================================================
   ACTUALITES
   ========================================================================== */

.articles .thumb{
    border-radius: var(--radius-default);
    height: 240px;
    overflow: hidden;
}
.articles .thumb img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.articles a{
    text-decoration: none;
    color: var(--dark-color);
}
.articles .date{
    color: var(--brown-default);
}
.articles h3{
    font-size: 32px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 10px 0;
}

@media (hover: hover) and (pointer: fine) {
    .articles a:hover{
        text-decoration: none;
        color: var(--dark-color);
    }
    .articles a:hover .thumb img {
        transform: scale(1.08);
    }
    .articles a:hover h3{
        color: var(--orange-default);
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */


.footer{
    background-color: var(--dark-color);
    color: var(--light-color);
    font-size: 18px;
}

.footer h2{
    color: var(--yellow-default);
    font-size: 20px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:500;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: normal;
    margin-bottom: 30px;
}


.footer .social a{
    font-size: 28px;
    color:var(--light-color);
    margin: 0 10px 0 0;
}
.footer .social a:hover{
    color:var(--orange-default);
}


.footer .uk-nav>li>a{
    height: 100%;
    padding: 0 0 15px 0;
    color:var(--light-color);
    text-transform: none;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
}
.footer .uk-nav>li>a:hover {
    color:var(--orange-default);
}

.footer hr {
    overflow: visible;
    text-align: inherit;
    margin: 0 0 40px 0;
    border: 0;
    border-top: 1px solid var(--brown-default);
}


.footer .credits{
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 10px;
}
.footer .credits a{
    font-weight: 500;
    color:var(--light-color);
}
.footer .credits a:hover{
    color:var(--light-color);
    text-decoration: underline;
}

.footer .credits .logo img{
    height: 24px;
    margin-right: 20px;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.uk-modal-dialog {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    width: 600px;
    max-width: 100% !important;
    background: #fff;
    opacity: 0;
    border-radius: var(--radius-default);
}
.uk-modal-dialog h2{
    font-size: 28px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 10px 0;
}
.uk-modal-dialog img{
    border-radius: var(--radius-default);
}
.uk-modal-dialog .uk-modal-close-default {
    top: 0;
    right: 0;
    padding: 20px;
    background: transparent;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    color: var(--brown-default);
}
@media (hover: hover) and (pointer: fine) {
    .uk-modal-dialog .uk-modal-close-default:hover {
        color: var(--dark-color);
    }
}

/* ==========================================================================
   PAGE
   ========================================================================== */

.page h1 {
    font-size: 54px;
    line-height: 1;
    margin: 0 0 10px 0;
}

.page h2 {
    font-size: 32px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}
.page h3 {
    font-size: 28px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}
.page h4 {
    font-size: 24px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}
.page em {
    color: var(--dark-color);
}
.page img{
    border-radius: var(--radius-default)
}
.page a {
    color: var(--orange-default);
}


.page .uk-description-list>dt {
    color: var(--primary-color-xdark);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
}

.page.artiste h1 {
    font-size: 54px;
    line-height: 1;
    margin: 0 0 10px 0;
}
.page.artiste h1.small {
    font-size: 32px;
    line-height: 1;
    margin: 0 0 10px 0;
}
.page.artiste h1.small span {
    font-size: 24px;
}
.page.artiste .jour{
    font-size: 24px;
    font-weight: 500;
    color: var(--brown-default);
}
.page.artiste .social a{
    font-size: 20px;
    color: var(--brown-default);
    margin: 0 5px;
}
@media (hover: hover) and (pointer: fine) {
    .page.artiste .social a:hover{
        color: var(--dark-color);
    }
}

/**** PAGE STANDART -- END ****/


/**** EDITOR -- START ****/

.editor *+address, .editor *+dl, .editor *+fieldset, .editor *+figure, *.editor +ol, .editor *+p, .editor *+div, .editor *+pre, .editor *+ul {
    margin-top: 20px;
}
.editor address, .editor dl, .editor fieldset, .editor figure, .editor ol, .editor p, .editor div, .editor pre, .editor ul {
    margin: 0 0 20px 0;
}
.editor h2 {
    font-size: 32px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}
.editor h3 {
    font-size: 28px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}
.editor h4 {
    font-size: 24px;
    font-family: "elza-round-variable";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    text-transform: none;
    line-height: 1;
    margin: 0 0 20px 0;
}

.editor a {
    color: var(--orange-default);
}
.editor .uk-description-list>dt {
    color: var(--dark-color);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
}
.editor .uk-hr, .editor hr {
    overflow: visible;
    text-align: inherit;
    margin: 0 0 20px 0;
    border: 0;
    border-top: 1px solid var(--dark-color);
}
.editor .videodetector {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.editor .videodetector iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.editor blockquote {
    font-family: canvas-inline, sans-serif;
    color: var(--dark-color);
}

.editor input[type="button" i] {
    font-family: "elza-round-variable";
    font-weight: 700;
    line-height: 1;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 100px;
    background-color: transparent;
    color: var(--dark-color);
    border: 2px solid var(--dark-color);
}

@media (hover: hover) and (pointer: fine) {
    .editor input[type="button" i]:hover {
        cursor: pointer;
        background-color: transparent;
        color: var(--orange-default);
        border: 2px solid var(--orange-default);
    }
}
.editor input[type="button" i]:active,
.editor input[type="button" i]:focus-within {
    cursor: pointer;
    background-color: transparent;
    color: var(--orange-default);
    border: 2px solid var(--orange-default);
}

.editor table{
    border-collapse: collapse;
    border-color: var(--dark-color);
}



/**** FIX MOBILE ****/

a, button, [role="button"], [role="link"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

a:focus{
    outline: 0;
}

@media (hover: hover) and (pointer: fine) {
    /* tous tes :hover ici */
    a:hover { text-decoration: underline; }
}

@media (hover: none) and (pointer: coarse) {
    .has-hover, .uk-transition-toggle { /* exemple de classes d’effet */
        transition: none !important;
    }
}

/* Effets hover seulement sur pointeur fin (desktop) */
@media (hover: hover) and (pointer: fine) {
    .uk-card:hover .uk-transition-fade { opacity: 1; }
    /* …tous tes :hover ici… */
}

/* Sur tactile, neutraliser les hovers UIkit qui gênent */
@media (hover: none) and (pointer: coarse) {
    .uk-transition-toggle .uk-transition-fade { opacity: 1; } /* pas d’état intermédiaire */
}