.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;
	  background-color: #f5f8ff; /* léger bleu très clair, neutre */
      color: #333;            /* texte assorti à la bordure */
      border-color: #5c84cb;     /* la bordure demandée */
    }

    .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;
      color: #333;
    }

    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;
    }

/* ─────────────────────────────────────────────── */
/*  SI LA PREMIÈRE CELLULE CONTIENT UN CHECKBOX   */
/* ─────────────────────────────────────────────── */

/* Le premier TH n'est plus le "premier" */
tr:has(th:first-child input[type="checkbox"]) th:first-child {
  text-align: center;
  font-weight: normal;
}

/* Le deuxième TH devient le "premier" */
tr:has(th:first-child input[type="checkbox"]) th:nth-child(2) {
  text-align: left;
  font-weight: bold;
}

/* Idem pour TD */
tr:has(td:first-child input[type="checkbox"]) td:first-child {
  text-align: center;
  font-weight: normal;
}

tr:has(td:first-child input[type="checkbox"]) td:nth-child(2) {
  text-align: left;
  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;
  z-index: 2;
  box-shadow: none; /* Par défaut, aucun shadow */
}

.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');
}
.role-select-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-select-container img {
  width: 1em;
  vertical-align: middle;
  opacity: 0.7;
}

.role-select {
  background: #fff;
  color: #222;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.role-select:hover {
  border-color: #888;
}

.role-select:focus {
  outline: none;
  border-color: #555;
}

.user-select-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-select-container img {
  width: 1em;
  vertical-align: middle;
  opacity: 0.7;
}

.user-select {
  background: #fff;
  color: #222;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-select:hover {
  border-color: #888;
}

.user-select:focus {
  outline: none;
  border-color: #555;
}
/* ——————————————————————————————
   STYLE DES INPUTS (propre, unifié)
—————————————————————————————— */
.form-input {
    width: 100%;
    background: #ffffff !important;      /* fond blanc visible */
    color: #222222 !important;           /* texte gris foncé */
    font-size: 16px !important;
    
    padding: 12px 14px !important;       /* taille ajustée (visuelle + confortable) */
    border: 1px solid #cccccc !important; 
    border-radius: 6px !important;
    
    box-sizing: border-box;
    transition: all .2s ease;
}

/* hover */
.form-input:hover {
    border-color: #888 !important;
}

/* focus */
.form-input:focus {
    border-color: #5c84cb !important;
    box-shadow: 0 0 0 2px rgba(92, 132, 203, 0.2) !important;
    outline: none !important;
}

/* ——————————————————————————————
   STEPS
—————————————————————————————— */
.steps-indicator {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.step-pill {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-bottom: 3px solid #ddd;
    color: #777;
	white-space: nowrap;
}
.step-pill.active {
    color: #5c84cb;
    border-color: #5c84cb;
    font-weight: 700;
}
.step-pill.done {
    color: #00D26A;
    border-color: #00D26A;
}

/* Version mobile : steps en colonne */
@media (max-width: 600px) {
    .steps-indicator {
        flex-direction: column;   /* au lieu d'être en ligne */
        gap: 8px;
    }

    .step-pill {
        text-align: left;
        font-size: 14px;
        padding: 8px 10px;
        border-bottom-width: 2px;
    }
}

/* ——————————————————————————————
   FORM
—————————————————————————————— */
.form-step { display: none; }
.form-step.active { display: block; }

form label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.btn-primary {
	display: inline-block;
    background: #DB7358!important;
    color: #fff!important;
    font-weight : 600!important;
    padding: clamp(.6rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem)!important;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
.btn-secondary {
	display: inline-block;
    background: #DB7358!important;
    color: #fff;
    font-weight : 600;
    padding: clamp(.6rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.break-word {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Alignement boutons */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Checkbox : style carré avec check blanc */
.addon-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease;
  position: relative;
}

.addon-checkbox:hover {
  border-color: #888;
}

.addon-checkbox:focus {
  outline: none;
  border-color: #555;
}

.addon-checkbox:checked {
  background-color: #5c84cb;
  border-color: #5c84cb;
}

.addon-checkbox:checked::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 13px;
  color: #fff;
}
label .addon-checkbox {
    margin-top: 1px; /* ajuste verticalement le check */
}
    .actions a {
     background-color: #00D26A;
      color: white;
      padding: 8px 16px;
      margin: 0 5px;
      border-radius: 4px;
      text-decoration: none;
      display: inline-block;
    }

    .actions a.refuse {
      background-color: #FF4C4C;
    }


.actions-bar.inline{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 6px 0 10px;
}

/* Select Action */
.actions-select{
  background: #fff;
  color: #222;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actions-select:hover {
  border-color: #888;
}

.actions-select:focus{
  outline: none;
  border-color: #555;
}

/* Tant que rien n’est choisi (donc value=""), le select est invalid => placeholder en gris */
.actions-select:required:invalid {
  color: #ccc;
}

/* Dès qu’on choisit une vraie valeur, on repasse en couleur normale */
.actions-select:required:valid {
  color: #222;
}

/* Optionnel: certains navigateurs affichent quand même les options disabled */
.actions-select option[disabled] {
  color: #ccc;
}

/* 🔑 Forcer les options de la liste à rester normales */
.actions-select option,
.actions-select optgroup {
  color: #222;
}

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

.actions-select option[value=""]{
  color:#9ca3af;
}
.empty-state-illustration {
  max-width: 420px;   /* taille max du dessin */
  width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;  /* centré dans le container */
}

.addon-plus{
  width:18px;
  height:18px;

  background:#ccc;
  border:1px solid #ccc;
  border-radius:4px;

  display:inline-block;
  vertical-align:middle;
  position:relative;
  top:-1px;              /* 🎯 ajuste l’alignement vertical */

  /* facultatif si tu veux garder le “non cliquable” */
  pointer-events:none;
  cursor:default;
  opacity:.9;
}

.addon-plus::after{
  content:"+";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -60%);
  font-size:16px;
  font-weight:700;
  color:#fff;
}

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