
.account-container {
    display: flex;
    gap: clamp(8px, 2.143vw, 30px);
    position: relative;
    width: auto;
    transition: width 0.5s ease;
    flex-wrap: wrap;
    /* width: max-content; */
}

.account-main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: #F2F2F2;
    border-radius: var(--btn-and-input-radius);
    padding: clamp(8px,1.071vw,15px);
    margin-left: 65px;
    transition: all 0.5s ease;
    width: calc(100% - 65px);
    
}

.account-main-content > div {
    width: 100%;
}

.user-info-container, .container-password-change {
    background: var(--color-2);
    border-radius: var(--btn-and-input-radius);
    padding: clamp(10px,1.071vw,15px);
}

.page-id-74 #my_account .mon-compte .account-main-content 
.container-password-change 
.jet-fb-form-block .jet-form-builder-message.jet-form-builder-message{
    border: none;
}

.profile-presentation .image-label {
    display: flex;
    gap: clamp(5px,2.143vw,30px);
    align-items: center;
    width: max-content;
}


.profile-presentation .image-label .image-profile-container {
    width: clamp(45px, 5.143vw, 72px);
    border-radius: 50%;
    overflow: hidden;
    max-width: 44px;
    aspect-ratio: 1;
    height: auto;
}

.profile-presentation .image-label .image-profile-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-open-menu {

    text-align: right;
    margin-bottom: 20px;
    margin-right: 12.5px;
}

.account-container.open-in-mobile .mobile-open-menu {
    text-align: right;
}

.mobile-open-menu .icon-toggle {
    display: inline-block;
    background: url('../icons/open-menu.svg');
    width: 18px;
    height: 14px;
    cursor: pointer;
    
}

.account-container.open-in-mobile .mobile-open-menu .icon-toggle {
    transform: rotate(180deg);
    
}

.mon-compte {
    overflow-x: hidden;
}

.account-main-content .edit-user-form #user-edit-form #avatar-preview img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    max-width: 100%;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1;
}

@media screen and(max-width:475px){
    .account-main-content .edit-user-form #user-edit-form #avatar-preview img {
        width: 60px;
    }
}

.account-container .profile-presentation {
    width: 50px;
    
    color: var(--color-2);
    
    transition: all 0.5s ease;
    max-width: calc(100vw - 75px);
    position: fixed;
    
}

.account-container .profile-presentation .profile-presentation-card {
    background: #222;
    border-radius: var(--btn-and-input-radius);
}



.account-container .profile-presentation .profile-presentation-card {
    overflow: hidden;
    padding: 15px 3px;
}



.account-container.open-in-mobile {
    /* width: max-content; */
}


.account-container.open-in-mobile .profile-presentation {
    position: fixed;
    width: 275px;

}

.account-container.open-in-mobile .profile-presentation .profile-presentation-card {
 
    padding: 15px;
}

.account-container.open-in-mobile .profile-presentation .profile-presentation-card .icon-profile {
 
    margin-left: 0;
}



.account-container .link-hidden-mobile {
    transition: opacity 0.5s ease;
    color: var(--color-2);
    opacity: 0;
    font-size: clamp(14px,1.143vw,16px);
    transform: translateX(-30px);
}

.account-container.open-in-mobile .link-hidden-mobile {
    /* display: block; */
    opacity: 1;
    transform: translateX(0);

}

.account-container.open-in-mobile .account-main-content, .account-container.open-in-mobile .ad-for-mobile {
    transform: translateX(225px);
}

.account-container .profile-presentation .link-top {
    margin-bottom: 256px;
    margin-top: 15px;
}

.account-container .profile-presentation .link-container, .logout-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: max-content;
}


.account-container .profile-presentation .link-container a {
    line-height: 2.5;
}



.icon-profile {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 7px;
    background-repeat: no-repeat;
}

.account-container.mobile-open-menu {
    margin-left: 0;
}

.icon-profile.icon-padel {
    background: url('../icons/padel-1.svg');
    height: 27px;
}

.icon-profile.icon-info {
    background: url('../icons/information.svg');
}

.icon-profile.icon-logout {
    background: url('../icons/logout.svg');
}


.user-info-container h3, .container-password-change h3, .categories-container h3{
    font-size: clamp(16px,1.429vw,20px);
    color: var(--color-3);
    font-weight: 600;
}

.user-info-container .form-group:not(:last-child) {
    margin-bottom: clamp(15px,1.429vw,20px);
}

.user-info-container .form-group .label, .user-info-container label {
    font-weight: 600;
    color: var(--color-3);
}

.user-info-container .form-group {
    font-size:  clamp(14px,1.143vw,16px);
}

.user-info-container .form-group .value {
    color: #777;
}

.user-info-container:not(.wrapped) {
    color: var(--color-3);
    display: flex;
    flex-direction: column-reverse;
}

.edit-infos-btn {
    margin-bottom: 15px;
    /* max-width: 445px; */
    text-align: end;
}

.edit-infos-btn:focus {
    box-shadow: none;
    background-color: none;
}
.edit-infos-btn #edit-infos{
    text-align: end;
    font-weight: 600;
}

.edit-infos-btn #edit-infos:focus {
    box-shadow: none;
    background: var(--color-1);
    color: var(--color-3);
}

@media screen and(max-width:767px) {
    .edit-infos-btn #edit-infos:focus {
        box-shadow: none;
        background: var(--color-1);
        color: var(--color-3);
    }
}

.edit-infos-btn #edit-infos:hover {
    /* background-color: var(--color-3); */
    background-color: transparent;
    color: #b89d4a;
}

.container-password-change .field-type-submit-field + p {
    display: contents;
}

.container-password-change .jet-form-builder-row:not(:last-child) {
    margin-bottom: clamp(10px,1.071vw,32px);
}

.container-password-change .jet-form-builder__action-button-wrapper {
    justify-content: center;

}

.container-password-change .field-type-submit-field .jet-form-builder__action-button {

    width: 100%;
    justify-content: center;
}

#user-edit-form [type="file"] {
    width: 100%;
    white-space: normal;

}


.ad img {
    width: 100%;
    border-radius: var(--btn-and-input-radius) !important;
}
@media(min-width:992px){
    .ad img {
        min-height: clamp(178px,9.271vw,129px) !important;
        max-height: clamp(178px,9.271vw,129px) !important;
    }
}
@media(max-width:992px){
    #carousel-pubs-mobile-compte_1 .ad-slide img, 
    #carousel-pubs-mobile-compte_2 .ad-slide img{
        width:calc(100% - 65px);
        margin: 0;
        min-height: 105px;
        max-height: 105px !important;
    }
}
@media(max-width:575px){
    .ad img {
        min-height: 78px;
        max-height: 85px !important;
    }
    #carousel-pubs-mobile-compte_1 .ad-slide img, 
    #carousel-pubs-mobile-compte_2 .ad-slide img{
        min-height: 78px;
        max-height: 85px !important;
    }
}

.ad-for-desktop {
    display: none;
}

.ad-for-mobile {
    margin-left: 65px;
    width: 100%;
    transition: all 0.5s ease;
}

.user-info-container.wrapped {
    flex-wrap: wrap;
}

.user-info-container.wrapped .edit-infos-btn {
    margin-top: clamp(15px,1.429vw,20px);
    text-align: right;
    width: 100%;
}

.user-info-container.wrapped .edit-user-form {
    width: 100%;
}

.user-info-container.wrapped .edit-user-form .form-group.fichier {
    position: relative;
  }

  .user-info-container.wrapped .edit-user-form .form-group.fichier .custom-file-wrapper {
    position: relative;
    align-items: center;
  }
  
  .user-info-container.wrapped .edit-user-form .form-group.fichier .custom-file-label {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    padding: .5rem 1rem;
    border: 1px solid var(--color-3);
    border-radius: var(--btn-and-input-radius);
    color: var(--color-3);
    font-size: 14px;
    cursor: pointer;
}
  
.user-info-container.wrapped .edit-user-form .form-group.fichier .custom-file-icon {
    margin-left: auto;
    display: flex;
    align-items: center;
}
  


#edit_avatar {
    border-radius: 0;
}

.ui-datepicker-title {
    display: flex;
    gap: 10px;
  }

.ui-datepicker select.ui-datepicker-year {
    padding: 0 6px 0 17px;
}

.account-container .link-hidden-mobile.image-label-text {
    flex: 1;
    line-height: 1.3;
    max-width: 195px;
}


@media screen and (min-width:992px) {
    .account-container .link-hidden-mobile.image-label-text {
        
        max-width: unset;
    }

    .profile-presentation .image-label {
        width: unset;
    }
    .profile-presentation .image-label .image-profile-container {
        max-width: unset;
    }

     .ad-for-desktop {
        display: block;
        margin-top: clamp(8px, 2.143vw, 30px);
    }

    .ad-for-mobile {
        display: none;
    }

    .account-container .link-hidden-mobile {
        
        transform: translateX(0);
    }
    

    



    .container-password-change .jet-form-builder__action-button-wrapper {
        justify-content: flex-end;
    }

    .container-password-change .field-type-submit-field .jet-form-builder__action-button {
        width: unset;
    }

    .icon-profile {
        margin-left: 0;
    }

    .account-main-content {
        width: 100%;
    }

    .user-info-container {
        color: #000000;
        flex-direction: row;
        justify-content: space-between;
        justify-content: flex-end;
    }
    .account-container .link-hidden-mobile {
        display: block;
        opacity: 1;
    }
    
    .mobile-open-menu {
        display: none;
    }

    .profile-presentation .image-label {
        justify-content: flex-end;
    }

    .account-container .profile-presentation {
        
        width: calc(25% - 15px);
        position: static;
        height: fit-content;
    }

    .account-container .profile-presentation .profile-presentation-card {
        padding: 15px;
    }

 

    .account-main-content {
        width: calc(75% - 15px);
        margin-left: 0;
        min-height: 745px;
        transform: translateX(25% + 15px) !important;
    }

    .account-main-content > .user-info-container, .account-main-content > .container-password-change {
        width: calc(50% - 10px);

    }

    .account-main-content .container-password-change {
        height: max-content;
    }
}

@media screen and (min-width:1200px) {
    .account-main-content .user-info-container {
        width: calc(60% - 10px);
    }

    .account-main-content .container-password-change {
        width: calc(40% - 10px);
    }
    
}

/*categories*/

.categories-container h3 {
    margin-top: 0;
    line-height: 1.5;
}

.categorie-item {
    color: var(--color-3);
    margin-top: 5px;
}

.categorie-item:not(:first-child) {
    margin-top: 20px;
}

.categorie-item .categorie-item-title {
    text-transform: uppercase;
    font-size: clamp(16px,1.429vw,20px);
    margin-bottom: 20px;
    font-weight: 600;
    gap: 10px;
    display: flex;
    align-items: center;
}

.categorie-item .categorie-item-title .icon-yellow-racket {
    display: inline-block;
    background: url('../icons/yellow-tacket-big.svg');
    width: 50px;
    height: 50px;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--tabs {
    opacity: 1;
    height: auto;
    visibility: visible;
    gap: 15px;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--entry {
    min-height: 0;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--entry::before {
    display: none;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content {
    opacity: 1;
    transition: opacity 400ms ease-in-out;
    margin-top: 30px;
    /* min-height: 257px; */
    /* min-height: 360px; */
    min-height: 375px;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content.empty-pool {
    background: var(--color-1);
    font-size: 40px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: center;
}

.ootb-tabcordion.has-tabs .ootb-tabcordion--entry .ootb-tabcordion--entry-content {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}

.ootb-tabcordion--tabs {
    opacity: 0;
    height: 0;
    visibility: hidden;
    display: flex;
    flex-flow: wrap;
    margin: 0;
    list-style: none;
    padding: 0;

}

.ootb-tabcordion--tabs .tab {

    display: block;
    color: var(--color-3);
    border-radius: var(--btn-and-input-radius);
    font-weight: 600;
    border: 0;
    cursor: pointer;

}

.ootb-tabcordion--tabs .tab:hover,
.ootb-tabcordion--tabs .tab:focus {
    background: var(--color-3);
    outline: none;
    color: var(--color-2);
    border: 0;
}

.ootb-tabcordion--tabs .tab.is-active {
    background: var(--color-3);
    color: var(--color-2);

}


.ootb-tabcordion--entry {
    overflow: hidden;
}





.ootb-tabcordion--entry-container {
    overflow: hidden;
    margin-bottom: 1px;
}

.ootb-tabcordion--entry-content {
    position: relative;
    margin-top: -100%;
    height: 0;
    opacity: 0;
    transition: margin 500ms ease-in;
}

.ootb-tabcordion--entry-content a.more {
    color: #444;
}

.ootb-tabcordion--entry-content a.more:hover {
    color: #3bacff;
}

@media screen and (max-width:767px) {
    .ootb-tabcordion--entry::before {
        position: relative;
        content: attr(data-title);
        cursor: pointer;
        z-index: 1;
        background: var(--color-1);
        color: var(--color-3);
        padding: 0.5rem 1rem;
        display: block;
        border-radius: var(--btn-and-input-radius);
        padding: 10px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 15px;
        font-size: 14px;
    }

    
    .ootb-tabcordion--entry:hover,
    .ootb-tabcordion--entry:focus {
        outline: none;
    }
    
    .ootb-tabcordion--entry:hover::before,
    .ootb-tabcordion--entry:focus::before {
        background: var(--color-3);
        color: var(--color-2);
    }
    
    .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content {
        margin-top: auto;
        height: auto;
        opacity: 1;
        transition: margin 400ms ease-out -100ms;
        min-height: 130px;
    }
    .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content.empty-pool {
        background: var(--color-1);
        font-size: 20px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        font-weight: 600;
        justify-content: center;
        text-align: center;

    }
    

    .ootb-tabcordion--entry:not(:last-child).is-active .ootb-tabcordion--entry-content {
        margin-bottom: 15px;
    }
    
    .ootb-tabcordion--entry.is-active::before {
        background: var(--color-3);
        color: var(--color-2);
        
    }
    
    .ootb-tabcordion--entry.is-active:hover::before,
    .ootb-tabcordion--entry.is-active:focus::before {
        background: var(--color-3);
        color: var(--color-2);
    }
}

.ad.ad-category-big-top {
    margin-bottom: 20px;
    margin-top: 0;
}
/**fin categorie**/


/**confirmation inscription*/




/*mes classements*/
.classement-contenu  {
    background-color: #222;
    position: relative;
}

.classement-contenu .table-wrapper .sticky {
    display: table-cell;
}

.classement-contenu .table-wrapper {
    overflow-x: auto;
    max-width: 700px;
    margin: auto;
}

.classement-contenu .table-wrapper span {
   color:var(--color-2);
   font-size: 13px;
   position: absolute;
   top: 318px;
}
  
.classement-contenu .table-wrapper::-webkit-scrollbar {
    height: 8px;
  }
  
.classement-contenu .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--darkblue);
    border-radius: 40px;
  }
  
.classement-contenu .table-wrapper::-webkit-scrollbar-track {
    background: var(--white);
    border-radius: 40px;
  }
  
.classement-contenu .table-wrapper table {
    margin: 63px 0 20px;
    border-collapse: collapse;
    text-align: center;
    border-collapse: separate; 
    border-spacing: 0;
    background-color: #ffffff;
    border-radius: 6px;
  }


.classement-contenu th + th, td + td {
    border-left: none;
  }
  
  /* Remove top borders on th/td in rows after the first */
.classement-contenu tr + tr th, tr + tr td {
    border-top: none;
    
  }
  
.classement-contenu  .table-wrapper table th, .classement-contenu .table-wrapper table td {
    padding: 10px;
    min-width: 75px;
  }
  
.classement-contenu .table-wrapper table .sticky {
    position: sticky;
    left: 0;
    /* z-index: 10; */
  }
  
.classement-contenu .table-wrapper table th {
    color: var(--white);
    background: var(--darkblue);
  }
  
.classement-contenu .table-wrapper table tr .sticky:first-child{
    left: 0;
    width: 20px;
    max-width: 20px;
    /* min-width: 24px; */
    min-width: 35px;
  }

  .classement-contenu .table-wrapper table th, .classement-contenu .table-wrapper table td {
    vertical-align: middle;
  }




.classement-contenu th {
    border-bottom: 0 !important;
  }

.classement-contenu  .table-wrapper table tr .sticky:nth-child(2){
    left: 24px;
   
    width: 120px;
    max-width: 120px;
    min-width: 120px;
  }

 .classement-contenu .table-wrapper table tr td:not(.sticky),.classement-contenu .table-wrapper table tr th:not(.sticky) {
    width: 20px;
    max-width: 20px;
    min-width: 30px;

  }

.classement-contenu .table-wrapper table td, .classement-contenu  .table-wrapper table th {
        padding: 5px;
  }

.classement-contenu  .close-table {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 10;
}

.classement-contenu  .close-table:hover {
    background: none;
    border: none;
    color: #d2bc67;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

  @media screen and (max-width:767px) {
    .classement-contenu .table-wrapper table tr:first-child th:first-child {
        font-size: 0;
      }
    .classement-contenu .table-wrapper table tr .sticky:first-child{
        min-width: 24px;
    }
    
    .classement-contenu .table-wrapper span {
        color: var(--color-2);
        position: absolute;
        top: 344px;
        font-size: 10px;
        left: 10px;
    }

    .classement-contenu .table-wrapper table {
        margin: 63px 10px 81px;
        border-collapse: collapse;
        text-align: center;
        border-collapse: separate;
        border-spacing: 0;
        background-color: #222;
        color: white;
    }
    .classement-contenu .table-wrapper table .sticky {
        position: sticky;
        left: 8px !important;
        background-color: #222;
    }
    .classement-contenu  .table-wrapper table tr .sticky:nth-child(2){
        left: 32px !important;
        width: 120px;
        max-width: 120px;
        min-width: 120px;
        background-color: #222;
        box-shadow: 2px 0 5px rgb(0 0 0);
      }
  }
  

/*mes minis tournois*/

/* Mes matchs */
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content.contenu-matchs { 
    position: relative;
    background-color: #222222;
    min-height: 265px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: clamp(30px,2.857vw,40px) 10px;

    height: fit-content;
}

.match-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: #222222;
    flex-wrap: wrap;
    color: #fff;
    gap: 22px;
    /* align-items: center; */
    padding: 0 10px;
  }

.match-content .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}
  
.match-content .team {
    display: flex;
    gap: 15px;
    flex: 1;
    text-align: center;
  }

  
  .match-content .player {
    align-items: center;
  }
  
  .match-content .avatar {
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    max-width: 119.67px;
    height: auto;
  }
  
  .match-content .info strong {
    display: block;
    font-weight: 600;
    color: #ffffff;
    font-size:clamp(12px,1.143vw,16px);
  }
  
  .match-content .info span {
    font-size:clamp(12px,1.143vw,16px);
    display: block;
    color: #ffffff
  }
  
  .match-content .info small {
    font-size:clamp(12px,1.143vw,16px);
    color: #ffffff;
    display: block;
    margin-top: 4px;
  }
  
  .match-content .vs-block {
    display: flex    ;
    flex-direction: column;
    align-items: center;

  }
  
  .match-content .vs-image img {
    width: clamp(34px,4.848vw ,67.87px);
  }
  
  .match-content .plan-btn {
    background-color: #c5ac53;
    border: none;
    padding: 0;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    color: #000;
    max-width: 100%;
    min-width: 100%;
    height:clamp(41px,3.143vw, 44px);
    font-weight: 600;
    font-size: clamp(12px,1.143vw,16px);
    /* padding: 10px; */
    /* padding: 7px; */
    padding: 7px 0px 7px 0px;;
    width:clamp(175px,16.5vw,231px) ;
  }

  .ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content.contenu-matchs .close-table{
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    right: clamp(0px, 0.714vw, 10px);
    top: clamp(4px,0.714vw, 10px);
    cursor: pointer;
    z-index: 10;
}


/* Breack points */
@media screen and (max-width: 767px) {
    .contenu-matchs {
        position: relative;
        background-color: #222222;
        min-height: 265px;
    }
    .contenu-matchs .match-content {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #222222;
        flex-wrap: wrap;
        color: #fff;
        gap: 0;
        min-height: 100%;
        padding: 30px 10px;
    }

    .contenu-matchs .close-table{
        background: none;
        border: none;
        color: white;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        right: -6px;
        top: -4px;
        cursor: pointer;
        z-index: 1;
    }
    
    .match-content {
      flex-direction: column;
      align-items: center;
    }
  
    .match-content .team.team-left,
    .match-content .team.team-right {
      justify-content: center;
    }
  
    .match-content .vs-block {
      order: 2;
      max-width: 204px;
      min-width: 204px;
    }
    .match-content .plan-btn {
        height: clamp(38px,3.143vw,44px) ;
        font-weight: 600;
        font-size: 13px;
    }
    .match-content .team.team-right {
        margin-top: 10px;
    }
    .match-content .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
      }
    .match-content .vs-image img {
        max-width: 34px;
        max-height: 65.92px;
    }
    
    .match-content .team.team-left {
      order: 1;
      /* margin-top: 50px; */
    }
  
    .match-content .team.team-right {
      order: 3;
    }
}


/* Section VS */
.match-date-input {
    margin-top:clamp(0px,0.857vw, 12px);
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
    width: clamp(175px, 16.714vw, 234px);
    text-align: center;
    font-size: clamp(12px,1.143vw,16px);
    font-weight: 600;
}

  
  /* Bouton Score */
  .btn-score {
    background-color: #d1b15f;
    color: black;
    /* padding: 12px 24px; */
    padding: 8px 24px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    font-weight:600 !important;
    height: clamp(38px,3.143vw,44px);
  }
  .btn-score:hover {
    background-color: #b89d4a;
  }

  @media screen and (max-width: 767px) {
    .btn-score {
        padding:6px 10px;
        font-size: clamp(12px,1.143vw,16px);
      }
  }

  /* Afficher date  */

  .vs-block #date-affichee{
    font-size: clamp(13px,1.143vw,16px);
  }

  #zone-date h3{
    color:var(--color-2);
  }

  #zone-date #tooltip-icon{
    width: 20px;
    height: 20px;
    background-repeat: round;
    margin: 0 0 5px 0;
  }

  #zone-date #tooltip-icon :hover{
    background-color: #b89d4a;
  }
  #zone-date .tooltip-message{
    display: none;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(241, 241, 241);
    color: rgb(51, 51, 51);
    padding: 8px 10px;
    border-radius: 5px;
    box-shadow: rgb(255 255 255 / 17%) 0px 2px 5px;
    font-size: clamp(10px,0.929vw,13px);
    z-index: 1;
  }

  #zone-date  .close {
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    top: 1px;
    right: 3px;
    background: transparent;
    border: none;
    color: #000;
    width: 16px;
    height: 16px;
    line-height: 1;
    z-index: 9999;
}
  
  /* MODAL */
  .modal {
    display: none;
    bottom: 205px;
    left: 50%;
    background: white;
    border-radius: 8px;
    /* padding: 15px; */
    z-index: 1000;
    margin-top: clamp(30px, 3.286vw, 46px);
    width:clamp(280px,21.929vw,307px) !important;
    /* height: clamp(100px,8.143vw, 114px) !important; */
  }
  
  .modal-content {
    align-items: center;
    gap: 20px;
 
    text-align: center;
    position: relative;
  }
  
  /* Bouton Fermer */
  .close {
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #000;
    width: 16px;
    height: 16px;
    line-height: 1;
    z-index: 9999;
  }


  
  /* Résultat */
  #result-title {
    font-size:clamp(14px,1.714vw,24px);
    font-weight: bold;
    color: #4BB543;
    margin-bottom: -14px; 
    font-family: 'Poppins';
  }
  
  /* Gagner / Perdu */
  .btn-result {
    display: flex;
    justify-content: center;
    gap:clamp(10px, 1.429vw,20px);
    padding: 15px 0;
  }
 
  .btn-win,
  .btn-lose {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    color: white;
    cursor: pointer;
  }

  .modal .btn-result .btn-win {
    background-color: #4BB543;
    color: var(--color-2);
    border: none;
    width: 82px;
    padding: 10px;
    font-size: clamp(12px,1.143vw,16px);
    height:clamp(39px,3.143vw, 44px);
  }
  .modal .btn-result .btn-lose {
    background-color: #EB001B;
    color: var(--color-2);
    border: none;
    width: 82px; 
    padding: 10px;
    font-size: clamp(12px,1.143vw,16px);
    height:clamp(39px,3.143vw, 44px);
  }
  

  /* Scores */
  .score-inputs{
    width: 92%;
    margin: auto;
    justify-content: space-between;
    display: flex;
  }


  .score-inputs input.score {
    padding: 7px;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    /* margin: 0 8px; */
    text-align: center;
    color: var(--color-3);
    font-weight: 600;
    display: flex;
    width: calc(50% - 5px);
  }


  .score.green {
    background-color: #AFE9C5;
    border: solid 2px #4BB543 !important;
    color: #ffffff;
  }
  
  .score.red {
    background-color: #DC9595;
    border:solid 2px #f44336 !important;
    color: white;
  }
  
  /* Valider */
  .btn-valider {
    background-color: #d1b15f;
    color: #000000;
    padding: 8px 20px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: block;
    margin: 12px auto 0;
    font-size: clamp(12px,1.143vw,16px);
    width: 92%;
    font-weight: 600 !important;
  }
  .btn-valider:hover {
    background-color: #b89d4a;
  }

  .modal-body {
    position: relative;
    padding: 15px 8px;
  }
  

  /* Score finale */

  .score-final {
    display: none;
    left: 50%;
    background: transparent;
    border-radius: 4px;
    z-index: 1000;
    margin-top: clamp(30px, 3.286vw, 46px);
    width: clamp(280px, 21.929vw, 314px) !important;
    padding: clamp(10px, 3.571vw, 14px);
    text-align: center;
  }

  #btn-score.disabled {
    /* opacity: 0.6; */
    cursor: not-allowed;
    pointer-events: none;
    background:#222;
    border:none;
    color: #222;
  }

  .score-final h2{
    font-family: 'poppins';
    color: var(--color-2) !important;
    font-weight: 600;
    margin: 0;
    font-size:clamp(16px,1.857vw,26px);
  }

  /* Responsive */
@media (max-width: 767px) {
    .modal {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 230px !important;
    }
  
    .modal-content {
      width: 100%;
      min-width: unset;
    }
  
    .vs-block {
      gap: 16px;
    }

    .match-date-input {
        margin: 0;
    }

    .score-inputs input.score {
        /* margin: 0 4px; */
    }


    .score-final {
        /* display: block; */
        left:50%;
        background: #222;
        border-radius: 4px;
        z-index: 1000;
        position: absolute;
        margin-top: clamp(30px, 3.286vw, 46px);
        /* width: clamp(250px, 21.929vw, 314px) !important; */
        padding: clamp(10px, 3.571vw, 14px);
        top:162px;
        transform: translateX(-50%);
    }
}
  
#carousel-pubs-compte_2 .ad-slide img, #pubs-categories_2 .ad-slide img{
    max-height: 90px !important;
    object-fit: cover;
    min-height: 90px !important;
}