/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 30 2025 | 15:04:02 */
.container {
      background-color: #fff;
	  color: #333;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 800px;
      margin: auto;
}

    .section-title {
      font-size: 18px;
      font-weight: bold;
      padding: 10px 15px;
      border-left: 5px solid;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .waiting { background-color: #f0f0f0; color: #555; border-color: #aaa; }
    .accepted { background-color: #e6fff0; color: #00D26A; border-color: #00D26A; }
    .refused { background-color: #ffeaea; color: #FF4C4C; border-color: #FF4C4C; }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }

    th, td {
      padding: 10px;
      text-align: center;
      border-bottom: 1px solid #ddd;
    }

    th:first-child, td:first-child {
      text-align: left;
    }

    td:first-child {
      font-weight: bold;
    }

    .actions button {
	  font-size: 16px;
      background-color: #5c84cb;
      color: white;
      padding: 8px 16px;
      margin: 0 5px;
      border-radius: 4px;
	  border: 0px;
      text-decoration: none;
      display: inline-block;
	  cursor: pointer;
    }

    .actions button[data-q="false"] {
      background-color: #FF4C4C;
    }
			  
	.actions button[data-q="true"] {
      background-color: #00D26A;
    }

    .badge {
      padding: 4px 8px;
      border-radius: 4px;
      display: inline-block;
    }

    .mod { background-color: #e0ffe5; color: #00D26A; }
    .res { background-color: #ffe5e5; color: #FF4C4C; }
    .neutral { background-color: #f0f0f0; color: #555; }
    .actif { background-color: #d4fbe2; color: #007f3f; }
    .inactif { background-color: #fce4e4; color: #b30000; }

    tr.clickable-row {
      cursor: pointer;
    }

    tr.clickable-row:hover {
      background-color: #f9f9f9;
    }
	
	tr.disabled {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: not-allowed;
}
			  
	.hideMobile {
	display: inline-block;
	}
			  
	.showBlockMobile {
	display: none;
	}

.showMobile {
	display: none;
	}

    @media (max-width: 600px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }

      thead {
        display: none;
      }

      tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
      }

      td {
        text-align: left;
        padding: 8px 10px;
        border-bottom: none;
        position: relative;
      }

      td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
        color: #555;
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
		
	.hideMobile {
	display: none;
	}
		
	.showBlockMobile {
	display: block;
	}
		
	.showMobile {
	display: inline-block;
	}
    }
	.addL {
	cursor: pointer;
    background: #5c84cb;
    border: 0;
    border-color: #5c84cb;
    border-radius: 5px;
    box-shadow: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: clamp(.6rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);
	display: inline-block; /* harmonise avec button */
		}
			 
	#submit-btn {
	cursor: pointer;		  
			 }
	.emoji-cell {
        cursor: pointer;
    }
    .hidden-checkbox {
        display: none;
    }
	
	.table-container {
  overflow-x: auto;
  max-width: 100%;
}

th.sticky-col, td.sticky-col {
  position: sticky;
  left: 0;
  background-color: #fff; /* même fond que ton .container */
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.emoji-img:hover img {
  transform: scale(1.2);
}
			
/* Wrapper qui contient le scroll horizontal et encadre le tableau */
.table-wrap {
  overflow-x: auto;         /* scroll horizontal si nécessaire */
  max-width: 100%;          /* ne dépasse jamais le .container */
  border-right: 1px solid #ddd;   /* bordure autour de la zone */
  border-bottom: 1px solid #ddd;
  padding-bottom: 0 !important;    /* <-- important */
  margin-bottom: 20px;
}

/* Scrollbar stylisée (Chrome / Edge / Safari) */
.table-wrap::-webkit-scrollbar {
  height: 10px;
}
.table-wrap::-webkit-scrollbar-track {
  background: #f0f0f0;
  border: 1px solid #ddd; /* encadré en haut */
}
.table-wrap::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 5px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Scrollbar Firefox */
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: #bbb #f0f0f0;
}
			
/* Le tableau ne pousse plus la scrollbar vers le bas */
.table-wrap table{
  margin-bottom: 0 !important;     /* <-- important */
}
			
/* Le tableau à l’intérieur du wrapper */
#monTableau {
  border-collapse: collapse;
  width: max-content;  /* largeur réelle du contenu (permet le scroll) */
  min-width: 100%;     /* au moins la largeur visible */
}
			  
#monTableau tbody tr:last-child td{
  border-bottom: 0;
}

/* Pas de retours à la ligne pour un scroll propre */
#monTableau th,
#monTableau td {
  white-space: nowrap;
}

/* En-tête sticky (reste visible au scroll vertical) */
#monTableau thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 6;  /* au-dessus des cellules du corps */
}

/* Première colonne sticky (th + td) */
#monTableau th:first-child,
#monTableau td:first-child,
#monTableau .sticky-col {
  position: sticky;
  left: 0;
  background: #fff;   /* masque ce qui passe dessous */
  z-index: 5;         /* sous l’en-tête mais au-dessus des autres td */
}

/* Coin haut-gauche (cellule d’en-tête de la col. 1) doit être au-dessus de tout */
#monTableau thead th:first-child,
#monTableau thead .sticky-col {
  z-index: 7;
}

/* Séparateur vertical TOUJOURS visible à droite de la 1ère colonne
   (utilise un pseudo-élément pour éviter qu’il soit couvert au scroll) */
#monTableau th:first-child::after,
#monTableau td:first-child::after,
#monTableau .sticky-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;            /* colle à la droite de la cellule sticky */
  width: 1px;
  height: 100%;
  background-color: #ddd;  /* couleur de la séparation */
  pointer-events: none;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  z-index: 8 !important;
}

   .custom-checkbox {
      display: none;
    }

    .custom-checkbox {
      display: none;
    }

    .icon-toggle {
      cursor: pointer;
      user-select: none;
    }
			  
.custom-checkbox + .icon-toggle::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('/emojis/Xunselected.png'); /* ❌ */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.custom-checkbox + .icon-toggle:hover::before {
  background-image: url('/emojis/Xhover.png'); /* version foncée de ❌ */
}

.custom-checkbox:checked + .icon-toggle::before {
  background-image: url('/emojis/Xselected.png'); /* 🗑️ */
}

/* Changer l'image au hover */
.delete-icon:hover {
  content: url('/emojis/Xhover.png');
}
  </style>