:root {
    --cdclient-main-color: #000000; /* Fallback si le CSS inline n'est pas chargé */
}

:root {
    --cdclient-secondary-color: #000000; /* Fallback si le CSS inline n'est pas chargé */
}

:root {
    --cdclient-button-border-radius: 0px; /* Fallback si le CSS inline n'est pas chargé */
}
.box-menu-mobile {
    border-radius: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-contenu-principal-factures {
        width: 100%;
    }
    
    /* Responsive pour tablette - carte Projets assignés */
    .projects-stats-compact[data-responsive-grid="true"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .project-item-content {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .project-item-info {
        min-width: 200px !important;
    }
    
}
@media (max-width: 767px) {
    /* ============================================
       MOBILE SAFE ZONE - Header fixe 60px
       ============================================ */

    /* Safe zone sur le body */
    body {
        padding-top: 70px !important;
        min-height: 100vh;
    }

    /* Safe zone sur les conteneurs principaux WordPress/Elementor */
    .elementor-location-single,
    .elementor-location-archive,
    .site-main,
    main,
    #main,
    .entry-content,
    .page-content {
        padding-top: 0 !important; /* Reset car body a déjà le padding */
    }

    /* Conteneurs spécifiques CDClient */
    .columns.is-gapless:first-child,
    section.section:first-of-type,
    .contenu-principal:first-child {
        margin-top: 0 !important;
    }

    /* ============================================ */

    /* Forcer le masquage de l'icon-bar sur mobile */
    #icon-bar,
    #icon-bar.is-hidden-mobile,
    body.menu-icon-bar #icon-bar,
    body.menu-icon-bar #icon-bar.is-hidden-mobile,
    .column#icon-bar,
    div#icon-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .columns {
        margin-left:0 !important;
        margin-right: 0 !important;
    }
    section {
        padding:0 !important;
    }

    #admin-sidebar {
        min-height: 100vh;
        padding: 2rem;
        background-color:var(--cdclient-secondary-color);
        display: flex;
    }
    /* MENU ADMIN */
    #admin-sidebar .menu .menu-label {
        font-size: 20px;
        font-weight: 700;
        color:white;
    }

    #admin-sidebar .menu .menu-list li a {
        color:white;
        border-radius: var(--cdclient-button-border-radius);
    }

    #admin-sidebar .menu .menu-list li a:hover {
        background-color:rgba(255,255,255,0.2) !important;
    }
    #admin-sidebar .menu-list li a.is-active {
        background-color: var(--cdclient-main-color) !important;
    }


    /* AUTRES MENUS */

    .menu .menu-label {
        font-size: 20px;
        font-weight: 700;
        color:#4a4a4a;
    }

    .menu .menu-list li a {
        color:#4a4a4a;
    }

    .menu .menu-list li a:hover {
        background-color:var(--cdclient-main-color) !important;
        color:white;
    }
    .menu-list li a.is-active {
        background-color: var(--cdclient-secondary-color) !important;
        color:white;
    }

    .table-div {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .table-row {
        display: flex;
    }

    .table-cell {
        display: flex;
        flex: 1;
        padding: 0.1em;
        border-bottom: 1px solid #dbdbdb;
        min-width:130px;
        align-items: center;
        justify-content: space-between;
    }

    .list-group {
        padding-left: 20px; /* Indentation pour les sous-éléments */
    }

    .draggable.list-group-item {
        display: flex;
        flex-direction: column;
    }


    .progress {
        transition: 1s;
    }

    .nestedhidden {
        display: none;
    }

    .swal2-cancel {
        color: white !important;
    }

    .swal2-confirm {
        border-color: rgba(48,133,214,0.2) !important;
        color:white !important;
    }

    .mb-1 {
        margin-bottom:10px;
    }
    .mb-2 {
        margin-bottom:20px;
    }
    .mb-3 {
        margin-bottom:30px;
    }
    .mb-4 {
        margin-bottom:40px;
    }
    .mb-5 {
        margin-bottom:50px;
    }
    .mb-6 {
        margin-bottom:60px;
    }
    .mb-7 {
        margin-bottom:70px;
    }
    .mb-8 {
        margin-bottom:80px;
    }
    .mb-9 {
        margin-bottom:90px;
    }
    .mb-10 {
        margin-bottom:100px;
    }

    button {
        border-radius: var(--cdclient-button-border-radius) !important;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Supprimer les flèches pour Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    .contenu-principal {
        margin-left:0px;
        padding:0em !important;
    }
    .column-video-formation {
        padding: 1.5rem 0 0 0 !important;
    }
    .card-cdvideoh {
        width:100%;
        position: relative;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-cdvideoh-image-figure {
        margin-left: 0.5em !important;
        margin-right: 0.5em !important;
    }
    .card-cdvideoh-content-title {
        margin-left: 0.5em !important;
        margin-right: 0.5em !important;
        padding: 0.25em .75em .75em .75em !important;
    }
    #video-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    progress.is-primary::-webkit-progress-value {
        background-color:var(--cdclient-main-color) !important;
    }

    progress.is-primary::-moz-progress-bar {
        background-color:var(--cdclient-main-color) !important;
    }

    emoji-picker {
        max-width: 350px;
        max-height: 400px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }


    .emojidisplayer {
        position: absolute;
        top: 35px;
        left: 40px;
        z-index: 20;
        display: none;
    }
    .emojipickr {
        display: none;
        top : calc(50% - 12px) !important;
        text-align: right;

    }

    .is-digico-orange {
        background-color:var(--cdclient-main-color);
        color:white;
        border:none;
    }

    .is-digico-orange:hover {
        background-color:var(--cdclient-secondary-color);
        color:white;
        border:none;

    }

    button.is-digico-orange[disabled] {
        background-color:var(--cdclient-main-color) !important;
        color:white !important;
        border:none !important;
    }

    .is-digico-bleu {
        background-color:var(--cdclient-secondary-color);
        color:white;
        border:none;
    }

    button.is-digico-bleu[disabled] {
        background-color:var(--cdclient-secondary-color) !important;
        color:white !important;
        border:none !important;
    }

    .is-digico-bleu:hover {
        background-color:var(--cdclient-main-color);
        color:white;
        border:none;

    }


    .media-menu-item {
        margin-right:10px !important;
        background-color:var(--cdclient-main-color) !important;
        color:white !important;
        border:none !important;
    }

    .media-menu-item:hover {
        background-color:var(--cdclient-secondary-color) !important;
        color:white !important;
        border:none !important;

    }

    button.media-menu-item.active {
        background-color:var(--cdclient-secondary-color) !important;
        color:white !important;
        border:none !important;
    }


    button.media-modal-close {
        border: 0 !important;
        color: black !important;
        padding: 4px 17px !important;
    }

    button.media-modal-close:hover {
        border: 0 !important;
        background:white !important;
        color:grey !important;
    }

    .time-estimate-wrappers {
        display: flex;
    }

    .time-estimate {
        width: 100%;
        border:0;
    }

    @media (max-width: 768px) {
        .masonry-grid {
            display: flex; /* Masonry.js gère la disposition via JS */
            margin: 0 auto; /* Centrer la grille */
        }

        .masonry-item {
            width: 100% !important; /* Force 1 colonne sur mobile */
            margin-bottom: 15px; /* Espacement vertical entre les items */
        }

        .masonry-grid-business {
            display: flex; /* Masonry.js gère la disposition via JS */
            margin: 0 auto; /* Centrer la grille */
        }
        .masonry-item-business {
            width: 100% !important; /* Force 1 colonne sur mobile */
            margin-bottom: 15px; /* Espacement vertical entre les items */
        }
    }

    .canvasjs-chart-canvas {
        margin-left: auto;
        margin-right: auto;
        right: 0;
        left: 0;
    }


    .stepper-wrapper {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .stepper-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .stepper-item .step-counter {
      position: relative;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--cdclient-secondary-color);
      margin-bottom: 6px;
      color: white;
    }

    /* Tooltip styles pour mobile */
    .tooltip {
      position: absolute;
      top: 50px;
      left: 0; /* Alignement à gauche pour couvrir toute la largeur */
      transform: none; /* Pas de translation horizontale */
      width: 100vw; /* Prend toute la largeur de l'écran */
      background-color: #333;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 1.5;
      white-space: normal;
      opacity: 0;
      visibility: hidden;
      z-index: 10;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      text-align: center;
      max-width: none; /* Pas de limite de largeur */
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .stepper-item:hover .tooltip {
      opacity: 1;
      visibility: visible;
    }

    /* Triangle (flèche) modifié pour correspondre à l'alignement */
    .tooltip::after {
      content: "";
      position: absolute;
      bottom: 100%; /* Place la flèche au-dessus */
      left: 50%; /* Position centrée sur le stepper-item */
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #333 transparent; /* Triangle orienté vers le bas */
    }

    /* Supprime les bordures inutiles pour les éléments latéraux */
    .stepper-item:first-child .tooltip {
      left: 0; /* Reste aligné à gauche pour éviter de dépasser l'écran */
    }

    .stepper-item:last-child .tooltip {
      left: auto;
      right: 0; /* Aligne le dernier élément à droite */
    }

    .bg-digico-bleu {
        background-color:var(--cdclient-secondary-color);
    }

    .bg-digico-orange {
        background-color: var(--cdclient-main-color);
    }

    .bg-white {
        background-color: white;
    }

    .navbar-burger-white span {
        background-color: #ffffff !important;
    }

    .navbar-item {
        color:white;
        margin-bottom: 10px;
    }

    a.navbar-item.is-active {
        background-color: var(--cdclient-main-color);
        color:white;
        border-radius: var(--cdclient-button-border-radius);
    }

    a.navbar-item:hover{
        background-color: var(--cdclient-main-color) !important;
        color:white;
        border-radius: var(--cdclient-button-border-radius);
    }

    .scroll-x-mobile {
        overflow-x: scroll;
    }

    .scroll-y-mobile {
        overflow-y: scroll;
    }

    .container-parrainage-ajout {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .m-0-mobile {
        margin:0 !important;
    }

    .p-0-mobile {
        padding:0 !important;
    }

    .p-1-mobile {
        padding:1rem !important;
    }

    .header-parrainage-revenus{
        display: flex;
        justify-content: space-between;
        align-items: right;
        padding:0.5rem 1.5rem 0 1.5rem;
    }

    .is-text-right {
        text-align: right !important;
    }

    .is-fullwidth {
        width: 100% !important;
    }

    .container-pel {
        display:flex;justify-content: space-between;flex-direction: column;
    }

    #chartContainer {
        height: 80px; width: 35%;margin:30px 0;
    }

    .pel-legend-label-restant {
        border-radius:var(--cdclient-button-border-radius);width:20px;height:20px;background-color:var(--cdclient-main-color);display:inline-block;margin-top:0
    }

    .pel-legend-label-effectues {
        border-radius:var(--cdclient-button-border-radius);width:20px;height:20px;background-color:var(--cdclient-secondary-color);display:inline-block;
    }

    .chart-container {
        display: flex
    }

    .container-legend {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:55%;
    }

    .grid-documents {
        display:flex;gap:15px;
        flex-direction:column;
    }

    .cell-grid-documents {
        width: 100%;gap:15px;display:flex;flex-direction: column;
    }

    .content-documents {
        display: flex;flex-direction: column;justify-content: space-between;flex-wrap: wrap;
    }

    .card-content-document {
        width:100%;position: relative;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: space-between;
    }

    .minia-document {
        margin:0 !important;
    }

    .columns-contenu-principal-factures {
        padding: 1.2rem !important;
        display: flex;
        flex-direction: column;
        gap:15px;
        flex-wrap:wrap;
        justify-content: space-between;
    }

    .card-conten-principal-factures {
        width: 100%;
    }
    
    .hello-elementor-notice {
        display: none !important;
    }

    .swal-custom-popup {
        text-align: center;
    }

    .swal-custom-input {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .swal-custom-input label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        padding: 10px;
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
    }

    .swal-custom-input input[type="radio"] {
        margin-bottom: 10px; /* Espacement entre radio et label */
    }

    .swal-radio-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        padding: 10px;
        transition: all 0.2s ease-in-out;
    }

    .swal-radio-option:hover {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    .swal-radio-option img {
        max-width: 50px;
        margin-bottom: 5px;
    }

    .columns-contenu-principal-factures {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 10px;
    }

    .card-contenu-principal-factures {
        width: 100%;
    }

    /* Responsive pour la carte Projets assignés */
    .projects-stats-compact[data-responsive-grid="true"] {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 8px !important;
    }

    .project-item-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .project-item-info {
        min-width: unset !important;
        width: 100% !important;
    }

    .project-item-stats {
        justify-content: center !important;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e5e7eb;
    }

    .project-item-stats > div:first-child {
        margin-right: 15px;
    }

    .cdclient-navbar-icon-white {
        filter: invert(100%) sepia(21%) saturate(2476%) hue-rotate(190deg) brightness(103%) contrast(116%) !important;
    }
    
    .cdclient-navbar-logo {
        filter: none !important;
    }

}