@font-face {
    font-family: 'Dolce Vita';
    src: url('DolceVitaHeavy-Bold.woff2') format('woff2'),
        url('DolceVitaHeavy-Bold.woff') format('woff'),
        url('DolceVitaHeavy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*, div, p {
    font-family: 'Roboto', sans-serif;
    outline: none;
    -webkit-appearance:none;
    box-sizing: border-box;
}

input[type=checkbox] {
    -webkit-appearance:checkbox;
}

select {
    -webkit-appearance:select;
}

a {
    text-decoration: none;
}
.none {
    display: none;
}


nav {
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      position: fixed;
      background-color: #256FF2;
      display: flex;
      justify-content: space-between;
      width: 100%;
      width: 100vw;
      align-items: center;
      padding: 10px;
      box-shadow: 0 0 7px rgb(0 0 0 / 40%);
}

nav .left {

}

nav .left img {
      max-width: 140px;
      margin-left: 100px;
      cursor: pointer;
}

nav .center {
      color: white;
      font-size: 25px;
}

nav .right {
      margin-right: 100px;
}

nav .btn {
      color: white;
      font-size: 18px;
      padding: 8px 13px;
      border-radius: 4px;
      margin-right: 15px;
      transition: 0.1s;
}

nav .btn:hover {
      background: rgba(0, 0, 0, 0.1);
}

nav .btn-account {
      color: white;
      background: #FC7921;
      font-size: 18px;
      padding: 8px 13px;
      border-radius: 5px;
      margin-right: 15px;
      transition: 0.1s;
}


nav .btn-account:hover {
      background: #cd5f15;
}


/* Media queries / Navbar Mobile */

@media screen and (max-width: 1100px) {
      nav .left img {
            margin-left: 50px;
      }
      nav .left img {
            max-width: 135px;
      }

      nav .right {
            margin-right: 50px;
      }
}

@media screen and (max-width: 950px) {
      nav .left img {
            margin-left: 5%;
      }
      nav .left img {
            max-width: 120px;
      }

      nav .center {

            text-align: center;
      }

      nav .center p {
            font-size: 20px;
            display: inline-block;
            width: 40vw;
            text-align: center;
      }

      nav .right {
            margin-right: 5%;
      }
      nav .right:last-child {
            margin-right: 0px;
      }

}

@media screen and (max-width: 700px) {
      nav .left img {
            margin-left: 5%;
      }
      nav .left img {
            max-width: 100px;
      }

      nav .center p {
            font-size: 17px;
            width: 30vw;
      }

}

@media screen and (max-width: 430px) {
      nav .center {
            display: none;
      }

}

/* Body dev /

/* Zone d'emoticônes */



#content {
      /* Height opposed by JS */
      width: 100%;
      display: flex;
      justify-content: space-around;
}


.centerContent {
      text-align: left;
      width: 95%;
      max-width: 1800px;
}

.category_pictos {
      text-align: center;
      margin-top: 50px;
}

.category_pictos a {
      transition: 0.1s;
      cursor: pointer;
}

.category_pictos a img {
      width: 55px;
      margin: 0px 25px;
      transition: 0.1s;
}

.category_pictos a:hover img {
      transform: scale(1.2);
}




/* Title zone */


.centerContent .title_side {
      text-align: center;
      margin-top: 35px;
}

.centerContent .title_side p {
      text-align: center;
      font-size: 40px;
      color: #225CC2;
      font-weight: bold;
}


/* Zone home page */


/*
* Trois parties :
*  - Partenaires
*  - Live DaCast
*  - Gagants (avec redirection sur la vidéo correspondante ! (à valider.))
*/



.triple_disp_homepage {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
}


.triple_disp_homepage .ad {
      width: 100%;
      max-width: 250px;
      /* background: rgba(0, 0, 0, 0.1); */
}


.triple_disp_homepage .ad h2 {
      color: white;
      background: #225CC2;
      display: block;
      font-size: 20px;
      text-align: center;
      padding: 8px;
      margin: 10px;
      border-radius: 5px;
      margin-bottom: 30px;
}


.triple_disp_homepage .ad a {
      display: block;
      text-align: center;
      color: #225CC2;
      text-decoration: none;
      font-size: 20px;
      margin-bottom: 30px;
}


.triple_disp_homepage .ad a:hover {
      text-decoration: underline;
}

.triple_disp_homepage .wins {
      width: 100%;
      /* background: rgba(0, 0, 0, 0.1); */
      max-width: 350px;
}


.triple_disp_homepage .wins .title {
      width: 100%;
      text-align: center;
}

.triple_disp_homepage .wins .title h2 {
      color: white;
      background: #225CC2;
      display: inline-block;
      font-size: 20px;
      text-align: center;
      padding: 8px;
      margin: 10px;
      border-radius: 5px;
      margin-bottom: 30px;
}

.triple_disp_homepage .wins .table {
      width: 100%;
      padding: 0px 8px;
}

.triple_disp_homepage .wins .table table {
      width: 100%;
}

.triple_disp_homepage .wins .table table thead .th_date {
      text-align: center;
}

.triple_disp_homepage .wins .table table thead {
      margin-bottom: 20px;
      margin-bottom: 4px;
}


.triple_disp_homepage .wins .table table tbody tr {
      border-bottom: 2px solid #225CC2;
      cursor: pointer;
      width: 100%;
      position: relative;
      transition: 0.1s;
}

.triple_disp_homepage .wins .table table tbody tr:hover {
      background: rgba(0, 0, 0, 0.1);
}

.triple_disp_homepage .wins .table table tbody tr:hover td {
      transition: 0.1s;
}

.triple_disp_homepage .wins .table table tbody tr:hover td {
      transform: scale(1.1);
}

.triple_disp_homepage .wins .table table tbody .icon {
      text-align: left;
      padding-top: 20px;
}

.triple_disp_homepage .wins .table table tbody .icon img {
      width: 45px;
}

.triple_disp_homepage .wins .table table tbody .number {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      top: 32px;
}

.triple_disp_homepage .wins .table table tbody .number p {
      text-align: left;
      color: black;
      font-size: 18px;
}

.triple_disp_homepage .wins .table table tbody .date {
      position: relative;
}

.triple_disp_homepage .wins .table table tbody .date p {
      text-align: center;
      color: black;
      font-size: 18px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 64px;
      top: 8px;
      position: absolute;
}

/* Live (center) section */

/*
* Intégration d'un iframe DaCast
*/

.triple_disp_homepage .live {
      width: 100%;
      background: rgba(0, 0, 0, 0.1);
      aspect-ratio: 16 / 9;
      max-height: 600px;
}



@media screen and (max-width: 1400px) {
      .triple_disp_homepage .ad {
            max-width: 175px;
      }
      .triple_disp_homepage .wins {
            max-width: 275px;
      }
      .triple_disp_homepage .wins .title h2 {
            font-size: 18px;
      }
      .triple_disp_homepage .ad h2 {
            font-size: 18px;
      }
}


@media screen and (max-width: 1000px) {
      .triple_disp_homepage {
            display: block;
      }
      .triple_disp_homepage .ad {
            width: 100%;
            max-width: inherit;
      }
      .triple_disp_homepage .wins {
            width: 100%;
            max-width: inherit;
      }
}

/* Home page landing section */


.normal-btn {
      color: white;
      background-color: #FC7921;
      padding: 15px;
      font-size: 24px;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 15px;
      transition: 0.1s;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.normal-btn:hover {
      background-color: #d46418;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}


.normal-btn-reversed {
      color: #FC7921;
      background-color: white;
      padding: 15px;
      font-size: 24px;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 15px;
      transition: 0.1s;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.normal-btn-reversed:hover {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}


.homepage_landing {
      text-align: center;
      margin-top: 75px;
}


.homepage_landing .content {
      width: 95%;
      max-width: 850px;
      text-align: left;
      display: inline-block;
}

.homepage_landing .content p {
      width: 100%;
      text-align: center;
      display: inline-block;
      font-size: 30px;
      color: black;
      margin-top: 50px;
}





.homepage_landing .content .plans {
      width: 100%;
}

.homepage_landing .content .plans h2 {
      margin: auto;
      color: white;
      background-color: #225CC2;
      font-size: 20px;
      padding: 6px 16px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 50px;
}

.homepage_landing .content .plans .sep {
      width: 100%;
      height: 0;
      border: 2px solid #225CC2;
      margin-top: 40px;
}

.homepage_landing .content .plans .plans_show {
      width: 100%;
      margin-top: 30px;
}


.homepage_landing .content .plans .plans_show {
      width: 100%;
      display: flex;
      justify-content: space-between;
}

.homepage_landing .content .plans .plans_show a {
      width: 49%;
      display: block;
}


/* Footer section */


footer {
      width: 100%;
      background-color: #256FF2;
      color: white;
      padding-top: 50px;
      padding-bottom: 50px;
}


footer .container {
      width: 90%;
      max-width: 600px;
      margin: auto;
}


footer .container .header {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
}



footer .container .header img {
      width: 150px;
}

footer .container .header p {
      display: inline-block;
      color: white;
      font-size: 30px;
}

footer .container .header p span {
      color: #FC7921;
}

@media screen and (max-width: 550px) {
      footer .container .header {
            display: block;
      }
      footer .container .header img {
            margin: auto;
            display: block;
      }
      footer .container .header p {
            width: 100%;
            text-align: center;
      }
      footer .container .sep {
            margin-top: 25px;
      }
}


footer .container .sep {
      width: 100%;
      height: 0px;
      border: 2px solid white;
}

footer .container .links {
      width: 100%;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
}

footer .container .links a {
      color: white;
      text-decoration: none;
      font-size: 20px;
      width: 40%;
      margin: 10px;
}

footer .container .links a:hover {
      text-decoration: underline;
}


@media screen and (max-width: 500px) {
      footer .container .links {
            display: block;
      }
      footer .container .links a {
            display: block;
            text-align: center;
            width: 100%;
            margin: 20px;
      }
}






/* Login page */

. {
      width: 90%;
      height: 0px;
      border: 2px solid #225CC2;
      margin: auto;
      margin-bottom: 35px;
      max-width: 1000px;
}


.login_container {
      width: 95%;
      max-width: 600px;
      margin-left: 15%;
      margin-left: 15vw;
}



@media screen and (max-width: 1200px) {
      .login_container {
            margin-left: inherit;
            margin: auto;
      }
}





.doubleInput {
      display: flex;
      width: 100%;
      justify-content: space-between;
}

.inputTxt {
      width: 100%;
      padding: 5px;
      font-size: 17px;
      color: black;
      border: none;
      border-bottom: 2px solid #FC7921;
      border-radius: 0px;
      background: #DCDEE1;
      margin-bottom: 15px;
}

.doubleInput .inputTxt {
      width: 48%;
}


.login_container h2 {
      margin-bottom: 25px;
      color: #225CC2;
      font-size: 25px;
      font-weight: normal;
}



.action-btn {
      display: inline-block;
      color: white;
      background: #FC7921;
      font-size: 18px;
      padding: 8px 13px;
      border-radius: 5px;
      margin-right: 15px;
      cursor: pointer;
      border: none;
      transition: 0.1s;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.action-btn:hover {
      background: #cd5e14;
}


.action-btn-inv {
      color: #FC7921;
      background: white;
}
.action-btn-inv:hover {
      background: rgba(0, 0, 0, 0.075);
}


.sepOr {
      display: flex;
      justify-content: space-between;
      align-items: center;
}


.sepOr span {
      width: 100%;
      height: 0;
      border: 2px solid #256FF2;
}

.sepOr p {
      color: black;
      display: inline-block;
      padding: 10px;
      font-size: 25px;
}




.ticket_header {
      max-width: 1000px;
      margin: auto;
      display: flex;
      width: 95%;
      justify-content: space-between;
      align-items: center;
}

.ticket_header img {
      max-width: 300px;
}

.ticket_header .text {
      width: 100%;
      padding-left: 20px;
      display: inline-block;
}


.ticket_header .text h2 {
      color: #256FF2;
      font-size: 20px;
      margin-bottom: 15px;
}

.ticket_header .text h2 span {
      color: #FC7921;
}

.ticket_header .text p {
      color: black;
      font-size: 17px;
}


.ticket_header .text .nbTickets {
      display: inline-block;
      font-size: 22px;
      color: black;
      margin-top: 25px;
}

.ticket_header .text .nbTickets span {
      color: white;
      display: inline-block;
      padding: 6px 15px;
      border-radius: 3px;
      background-color: #256FF2;
}



.geneSep {
      width: 100%;
      border: 2px solid #256FF2;
      max-width: 1000px;
      width: 95%;
      margin: auto;
      margin-bottom: 35px;
}


@media screen and (max-width: 700px) {
      .ticket_header {
            display: block;
      }
      .ticket_header img {
            margin: auto;
            display: block;
      }
}


@media screen and (max-width: 500px) {
      .ticket_header img {
            width: 95%;
      }
}

.ticket_top {
      width: 95%;
      max-width: 1200px;

      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.ticket_top .picture {
      width: 400px;
      height: 400px;
      box-shadow: 3px 3px 13px 0px rgb(0 0 0 / 30%);
      border-radius: 15px;
      flex-shrink: 0;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
}

.ticket_top .info {
      display: block;
      padding-left: 20px;
      width: 100%;
}

.ticket_top .info h2 {
      font-size: 30px;
      color: #256FF2;
      margin-bottom: 15px;
}

.ticket_top .info .command {
      display: flex;
      justify-content: space-around;
}

.command_box {
      width: 95%;
      max-width: 350px;
      overflow: hidden;
      border-radius: 5px;
      background: white;
      box-shadow: 3px 3px 13px 0px rgb(0 0 0 / 30%);

}

.command_box span {
      width: 100%;
      display: block;
      padding: 9px;
      color: white;
      font-size: 20px;
      text-align: center;
      background-color: #256FF2;
}

.command_box .info_tickets {
      color: #858585;
}


.command_box .counter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
}

.command_box .counter p {
      color: black;
      font-size: 17px;
}

.command_box .counter p i {
      font-size: 20px;
      color: #256FF2;
}


.command_box .counter .btns {
      display: flex;
      justify-content: space-between;
}

.command_box .counter .btns .less {
      border: none;
      font-size: 35px;
      text-align: center;
      border-radius: 50%;
      background: #FF3B30;
      color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 35px;
      width: 35px;
      cursor: pointer;
      margin-right: 15px;
}

.command_box .counter .btns .less:hover {
      background: #c82c23;
}

.command_box .counter .btns .add {
      border: none;
      color: white;
      font-size: 35px;
      text-align: center;
      border-radius: 50%;
      background: #4CD964;
      color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 35px;
      width: 35px;
      cursor: pointer;
}

.command_box .counter .btns .add:hover {
      background: #22c33e;
}

@media screen and (max-width: 800px) {
      .ticket_top {
            display: block;
      }
      .ticket_top .picture {
            margin: auto;
      }
      .ticket_top .info {
            text-align: center;
            margin-top: 25px;
      }
}

@media screen and (max-width: 470px) {
      .ticket_top .picture {
            width: 90vw;
            height: 90vw;
      }
}


.ticket_details {
      width: 95%;
      max-width: 1200px;

      margin: auto;
}



.ticket_details .iframePlace {
      aspect-ratio: 16 / 9;
}


.ticket_details h3 {
      font-size: 30px;
      color: #256FF2;
      margin-bottom: 15px;
}

.ticket_details .details_list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
}

.ticket_details .details_list .item {
      width: 48%;
      padding: 15px;
      background-color: #E4E4E4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
}

.ticket_details .details_list .item p {
      color: black;
      display: inline-block;
      font-size: 18px;
}

.ticket_details .details_list .item p:last-child {
      color: #225CC2;
}



.tickets_list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
}

.tickets_list .item {
      width: 48%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #EBEBEB;
      border-radius: 10px;
      border: 2px solid #A9BEE1;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 25px;
      transition: 0.1s;
}

.tickets_list .item:hover {
      transform: scale(1.05);
}


.tickets_list .item .picture {
      width: 200px;
      height: 120px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      background-color: white;
      flex-shrink: 0;
}

.tickets_list .item .text {
      width: 100%;
      padding: 10px;
}

.tickets_list .item h2 {
      font-size: 23px;
      color: #256FF2;
      margin-bottom: 15px;
}


.tickets_list .item p {
      font-size: 16px;
      color: black;
}

.tickets_list .item p span {
      color: #FC7921;
}

.tickets_list .item p i {
      font-size: 11px;
}






/**/