/* Not Mobile */
@media only screen and (min-width: 768px) {
    .mobileOnly {
        display: none !important;
    }
}
@media only screen and (max-width: 960px) {
    .cookie-acceptance-container {
      flex-direction: column;
      padding: 10px 20px;
      text-align: center;
    }
    .cookie-acceptance-container > div:first-child {
      margin-bottom: 10px;
    }
    .cookie-acceptance-container > div:last-child button {
      margin: 5px;
      width: 100%;
      max-width: 200px;
    }
  }


  @media only screen and (min-width: 961px) and (max-width: 1023px) {
    #header .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 120px; /* Ajuster en fonction de la taille du logo */
    }
    
    #stepsNav {
        margin-left: auto;
        margin-right: 18px;
    }
    
    #cartBox {
        margin-right: 16px;
        margin-left: 0;
    }
    
    .languageSelector {
        margin-left: 0;
    }
}
/* Tablette */
@media only screen and (max-width: 960px) {

    #header .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between; 
        overflow: visible;
        width: 100%;
        position: relative;
    }


    #header .logo {
        left: 10px;
    }
    #stepsNav ul li a .stepLabel {
        display: none;
    }
    #header .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between; 
        overflow: visible;
        width: 100%;
        position: relative;
    }

    #header .wrapper .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }

    #header .wrapper #cartBox {
        padding: 0;
        margin-left: 0px;
        margin-right:10px;
    }

    #stepsNav ul li a {
        line-height: 30px;
    }

    .languageSelector #lanNavSel {
        display: none;
    }

    .open > .dropdown-menu {
        left: auto;
        right: 0;
    }

    #cartBox a {
        padding-right: 16px;
    }

    #cartBox a .count {
        margin-top: -20px;
    }

    #cartBox .cartText {
        display: none;
    }

    .deskOnly {
        display: none !important;
    }

    .mobileOnly {
        display: inline-block !important;
    }

    #stepsNav ul li + li {
        margin-left: 8px;
    }

    #stepsNav ul li a .stepLabel {
        display: none;
    }

    #topSection .overlay {
        padding: 16px 0 132px;
        min-height: 288px;
    }

    #topSection + .mainContent {
        margin-top: -136px !important;
    }

    .step1Form {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        -ms-grid-rows: auto auto auto;
        grid-template-rows: auto auto auto;
        grid-row-gap: 50px;
        padding-left:16px;
        padding-right:16px;
    }

    .cardPart {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .step1Form .cardPart > * {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 540px;
    }

    .cardSection {
        position: static;
        width: auto;
        max-width: 100%;
        padding: 0;
    }

    .cardPreview {
        margin: 0 auto;
        padding: 0 8px;
    }

    .step1Form .cardPreview {
        width: 100%;
    }

    .slick-prev {
        left: 10px;
    }

    .slick-next {
        right: 10px;
    }

    .topBox {
    }

    .cardInfoSection {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        margin: 0px auto 24px;
        padding: 0 8px;
    }

    .step1Form .cardInfoSection {
        position: static;
        padding: 0 8px;
    }

    .cardAmexSection {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        margin: 0px auto 24px;
        padding: 0 8px;
    }

    .step1Form .cardAmexSection {
        position: static;
        padding: 0 8px;
    }

    .montant {
        margin: 18px auto 12px;
        position: static;
    }

    .step1Form .montant {
        position: relative;
        margin: 0;
    }

    .mainCol {
        max-width: 100%;
        margin-left: 0;
        min-height: 600px;
    }

    .step1Form .mainCol {
        grid-column: 1;
        grid-row: 2;
        margin-left:8px;
        margin-right:8px
    }

    .cardQuantitiesSection {
        padding: 10px 150px 0 0px;
    }

    .cardSection2 {
        position: static;
        max-width: 100%;
        width: auto;
        max-height: inherit;
        overflow: hidden;
    }

    .cardSection3 {
        position: static;
        max-width: 100%;
        width: auto;
        margin: 0;
        max-height: inherit;
        overflow: hidden;
    }

    .cardInfoSection2 {
        position: static;
        padding: 0 8px;
    }

    .cardInfoBox {
        background: transparent;
        height: auto;
    }

    .whiteBox {
        padding-top: 14px;
        padding-right: 0px;
        padding-bottom: 40px;
        padding-left: 0px;
        border-radius: 0;
    }

    .emtyCart {
        padding: 62px 32px !important;
    }

    .bottomSection, .bottomSection2, .bottomSectionTop {
        position: static !important;
        padding-right: 0px;
        padding-bottom: 14px;
        padding-left: 0px;
        width: auto;
    }

    .step1Form .bottomSection {
         padding: 0 25px 14px;
         grid-column: 1;
         grid-row: 3;
         width: auto;
     }

    .myCart {
        width: 100%;
        font-size: 16px;
    }

    .cartQte {
        width: 40%;
        font-size: 16px;
    }

    .cartTotal {
        width: 60%;
        font-size: 16px;
    }


    #topSection .headContent {
        line-height: 28px;
        font-size: 22px;
    }

    #app {
        padding-bottom: 0px;
    }

    #footer {
        position: static;
    }

    .mainWrapper {

        /*padding-bottom: 40px;*/

    }

    .cartItem {
        width: auto;
        padding: 12px 54px 12px 6px;
    }

    .cartItem .itemPreview {
        float: none;
    }

    .cartItem .itemData {
        margin-left: 0px;
        margin-top: 12px;
    }

    .cartItem .itemData .iPrice {
        position: absolute;
        top: 8px;
        left: 192px;
    }

    .modalBtnsRow .col-6 {
        float: none;
        width: auto;
        padding: 6px;
    }

    .cartRecap > span {
        display: block;
    }

    .cartItem .qtyContainer label {
        display: none;
    }

    .cartItem .qtyContainer {
        top: 72px;
        right: auto;
        left: 188px;
    }

    .cartItem .deleteItem {
        top: auto;
        margin-top: 0;
        bottom: 12px;
    }

    .cartRecap {
        font-size: 18px;
        padding: 18px 0;
    }

    .cartRecap > span .val {
        font-size: 23px;
    }

    #modalBox {

        top: 48px;
        left: 0;
        right: 0;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
        border-radius: 0px;
        box-shadow: 0 0 28px -7px rgba(0, 0, 0, 0.3);
        min-width: 0px;

    }

    #modalBox.centerPopup {
        left: 8px;
        right: 8px;
        bottom: auto;
    }

    .slick-prev, .slick-next {
        width: 28px;
        height: 28px;
        margin-top: -14px;
        z-index: 99;
    }

    .stores {
        flex-direction: column;
    }

    .stores > div {
        max-width: 90%;
        padding: 0;
    }

    .row .myCart {
        display: block;
        width: 100%;
    }

    .step-2 > .wrapper > div, .step-payment > .wrapper > div {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        padding-left: 8px;
        padding-right:8px;
      
    }

    .step-2 > .wrapper > div .cardSection2, .step-payment > .wrapper > div .cardSection2 {
        grid-row-start: 1;
        grid-column-start: 1;
    }

    .step-2 > .wrapper > div .bottomSection2, .step-payment > .wrapper > div .bottomSection2 {
        grid-row-start: 3;
        grid-column-start: 1
    }

    .step-2 > .wrapper > div .orderSection, .step-payment > .wrapper > div .orderSection {
        grid-row-start: 2;
        grid-column-start: 1;
    }

    .step-2 > .wrapper > div .orderSection {
        margin-left: 0;
    }

    .orderRecap {
        margin-left: 0;
    }

    .customCheckbox label {
        width: auto;
    }
}


/* Mobile */
@media only screen and (max-width: 460px) {

    .discount {
        font-size: 17px;
        margin: auto;
        padding: 15px;
    }

    #topSection .headContent {
        line-height: 24px;
        margin-bottom: 8px;
    }

    .topBox {
        min-height: 70px;
        padding: 14px 16px;
    }

    .cardInfoSection {
        margin: 0px auto 24px;
    }

    .cardLabel {
        font-size: 24px;
        line-height: 52px;
        font-weight: 600;
    }

    .showMoreBox a {
        font-size: 15px;
    }

    .userInfos .name {
        font-size: 20px;
    }

    .userInfos .email {
        font-size: 16px;
    }

    .cardInfos .amount {
        font-size: 34px;
        padding: 0;
    }

    .bottomBox {
        padding: 4px 16px;
        font-size: 16px;
        line-height: 26px;
    }


    #modalBox {
        top: 48px;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
        border-radius: 0px;
    }

    #modalBox .modalcontent {
        height: 100%;
    }

    #modalBox.centerPopup {
        left: 8px;
        right: 8px;
        bottom: auto;
        height: auto;
    }

    .scrollable {
        height: 96%;
        max-height: 96%;
    }

    .templateArea {
        width: 100%;
    }

    .btnsArea .buyCard {
        display: block;
    }

    .confActionsRow a.buyCard {
        padding: 15px 22px;
        font-size: 14px;
    }

    .emtyCart {
        text-align: center;
        padding: 62px 8px !important;
    }

    .myCart {
        font-size: 12px;
    }

    .cartQte {
        font-size: 12px;
    }

    .cartTotal {
        font-size: 12px;
    }

    .cardSection2 {
        padding: 8px 12px 10px;
    }
    .bottomSection2-step2{
        padding-left: 0px;
    }

    .cartItem2 {
        padding: 16px 26px 16px 4px;
    }

    .cartItem2 .itemPreview {
        width: 100px;
    }

    .cartItem2 .itemData {
        margin-left: 108px;
    }

    .cartItem2 .itemData .iPrice {
        font-size: 26px;
        margin-bottom: 4px;
    }

    .cartItem2 .itemData .iSender {
        font-size: 13px;
    }

    .cartItem2 .itemData .iDate {
        font-size: 13px;
    }

    .cartItem2 .deleteItem {
        font-size: 24px;
        top: 41px;
        right: 5px;
    }

    .whiteBox {
     
    }

    .dateMode, a.dateMode {
        padding: 0 12px;
    }

    a.buyCard {
        font-size: 17px;
    }

    .slick-prev, .slick-next {
        width: 28px;
        height: 28px;
        margin-top: -14px;
        z-index: 99;
    }

    .montantManual {
        flex-basis: 80%;
    }
    
    .customRadio label, .customCheckbox label {
        width: 90%;
    }

    #modalBox .emtyCart {
        padding: 31px 8px !important
    }

    .copyCard {
        flex-direction: column;
        gap: 16px;        
    }
}