/* =========================================================
   Recettes consultation — CSS (inspiré d'Ingredients)
   Objectif : garder exactement le look & feel existant,
              mais avec un fichier propre, commenté,
              et sans doublons contradictoires.
   Base : ton CSS qui fonctionnait (pasted.txt).
   ========================================================= */


/* =========================================================
   1) LISTE — TABLE / HOVER / FILTRES RAPIDES
   ========================================================= */

/* Hover sur table */
#recettes-table tr:hover{
  background-color:#e3f1ff;
  cursor:pointer;
}

/* Table */
#recettes-table{
  border-collapse:collapse;
  width:100%;
}
#recettes-table th{
  background:#0073aa;
  color:#fff;
}
#recettes-table th,
#recettes-table td{
  text-align:center;
  vertical-align:middle;
}

/* Alphabet */
.alpha-btn{
  margin:2px;
  padding:5px 8px;
  border:1px solid #ccc;
  background:#f5f5f5;
  cursor:pointer;
  border-radius:4px;
}
.alpha-btn.active{
  background:#0073aa;
  color:#fff;
}

/* Selects & input (⚠️ volontairement global comme dans ton CSS d’origine) */
select{ margin-right:8px; padding:4px; }
#search-input{ padding:4px; }

/* Mini bouton (❌ etc) */
.ing-mini-btn{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #ccc;
  background:#f5f5f5;
  cursor:pointer;
}


/* =========================================================
   2) BARRE OUTILS — FILTRES + ACTIONS (gabarit 2 colonnes)
   ========================================================= */

.ing-list-toolbar{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr; /* 3 colonnes */
  column-gap:12px;
  align-items:center;
  width:100%;
  margin: 0 0 12px 0;
}
.ing-list-filters{ width:100%; }

.ing-list-actions{
  display:flex !important;
  justify-content:center !important; /* centre le + */
  align-items:center;
  gap:8px;
}
.ing-list-actions > *{ margin-left:0 !important; }

#select-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#alphabet-filters{ margin-bottom:10px; }
#versions-filter{ margin-top:10px; }


/* =========================================================
   3) BOUTONS ACTION (➕ / enregistrer / etc) + TOOLTIP
   ========================================================= */

.btn-action.icon-only{ width:46px; height:46px; padding:0; }
.btn-action.icon-only .label{ display:none; }

.btn-action{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:10px;
  border:1px solid #d0d7de;
  background:#fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position:relative;
}
.btn-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.btn-action .icon{
  font-size:22px;
  line-height:1;
  margin:0;
}

/* Couleurs/variantes */
.btn-save{ color:#1d7f37; }
.btn-save:hover{ border-color:#1d7f37; }
.btn-cancel{ color:#b32d2e; }
.btn-cancel:hover{ border-color:#b32d2e; }
.btn-saveas{ color:#2271b1; }
.btn-saveas:hover{ border-color:#2271b1; }
.btn-edit{ color:#2271b1; }
.btn-edit:hover{ border-color:#2271b1; }

/* Tooltip */
.btn-action::after{
  content: attr(data-tooltip);
  position:absolute;
  bottom:-38px;
  left:50%;
  transform: translateX(-50%);
  white-space:nowrap;
  background:#1d2327;
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:1000;
}
.btn-action:hover::after{
  opacity:1;
  transform: translateX(-50%) translateY(4px);
}


/* =========================================================
   4) ONGLET / PANELS
   ========================================================= */

.ing-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 15px;
}
.ing-tab{
  border:1px solid #cfcfcf;
  background:#f5f5f5;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
.ing-tab.is-active{
  background:#0073aa;
  color:#fff;
  border-color:#0073aa;
}
.ing-panel{ display:none; }
.ing-panel.is-active{ display:block; }


/* =========================================================
   5) INFORMATIONS — 4 CADRES (2x2)
   ========================================================= */

.info-4grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.info-card{
  border:2px solid #222;
  border-radius:14px;
  background:#fbfbfb;
  padding:0;
  overflow:hidden;
  min-height:160px;
  display:flex;
  flex-direction:column;
}
.info-card h4{
  margin:0;
  padding:10px 12px;
  font-size:16px;
  font-weight:700;
  background:#e9f3ff;
  border-bottom:1px solid #222;
}
.info-body{
  padding:12px;
  color:#444;
}
@media (max-width: 900px){
  .info-4grid{ grid-template-columns: 1fr; }
}

/* Grilles internes (Identification / Classification) */
.identification-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:10px;
}

/* Classification = 1 colonne (comme ton CSS actuel) */
.classif-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* Cadres internes */
.ident-small{
  border:2px solid #333;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  padding:10px;
  min-height:70px;
}
.ident-large{
  grid-column: 1 / -1;
  border:2px solid #333;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  padding:12px;
  min-height:130px;
}
.classif-small{
  border:2px solid #333;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  padding:10px;
  min-height:70px;
  width:100%;
  box-sizing:border-box;
}
.classif-large{
  grid-column: 1 / -1;
  border:2px solid #333;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  padding:12px;
  min-height:130px;
}

/* Sous-cadre interne (si utilisé) */
.inner-subcard{
  border:2px solid #222;
  border-radius:12px;
  padding:14px;
  background:#fff;
  flex:1;
  box-sizing:border-box;
}


/* =========================================================
   6) READONLY — RADIOS + CHAMPS
   ========================================================= */

.radio-options{
  display:flex;
  gap:14px;
  margin-top:6px;
  align-items:center;
}
.radio-option{
  display:inline-flex;
  gap:6px;
  align-items:center;
}

/* Champs texte en lecture seule */
.readonly-fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 20px;
}
.readonly-fields .field{
  display:flex;
  flex-direction:column;
}
.readonly-fields label{
  font-size:0.85em;
  color:#555;
  margin-bottom:4px;
}
.readonly-fields input[readonly]{
  background:#f2f2f2;
  border:1px solid #ccc;
  color:#333;
}

/* Surcadre pour Produit de la gamme / Actif */
.ident-radio-box{
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px 14px;
}
.ident-small.radio-readonly input[type="radio"]{
  pointer-events:none;
}


/* =========================================================
   7) HEADER (titre + état + bouton édition)
   ========================================================= */

.ing-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin: 6px 0 14px;
  padding-right:18px;
}
.ing-title-wrap{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.ing-title{
  margin:0;
  font-size:26px;
  line-height:1.2;
  white-space:nowrap;
}
.ing-etat-sep{ opacity:.6; }

/* Actions (bouton modifier) */
.ingredient-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  margin-left:10px;
}

/* icône ✏️ dans la table recettes */
.ing-edit-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;
  color:#0b5f8a;
  text-decoration:none;
  font-size:15px;
}


/* =========================================================
   8) COMPOSITION RECETTE — TABLE COMPACTE
   ========================================================= */

/* Sous-cadre (centré / largeur maîtrisée) */
.recette-subcard.recette-comp-subcard{
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cfcfcf;
  background: #fff;
}

/* Table */
.recette-comp-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

/* En-tête */
.recette-comp-table thead th{
  background:#0b6fa4;
  color:#fff;
  font-weight:700;
  padding:10px 12px;
  border-bottom:1px solid #0a5f8c;
  text-align:center;
  white-space:nowrap;
}

/* Cellules */
.recette-comp-table tbody td{
  padding: 7px 10px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
  text-align: center;
}

/* Zébrage + hover */
.recette-comp-table tbody tr:nth-child(even) td{ background: #fbfdff; }
.recette-comp-table tbody tr:hover td{ background: #eaf4ff; }
/* ===== Ligne TOTAL ===== */

/* ===== Ligne TOTAL (même style que header) ===== */

.recette-comp-table tfoot td{
  background:#0b6fa4;
  color:#fff;
  font-weight:700;
  padding:10px 12px;
  border-top:2px solid #0a5f8c;
  text-align:right;
}

.recette-comp-table tfoot td.col-total-label{
  text-align:right;
  letter-spacing:0.3px;
}

.recette-comp-table tfoot td.col-total-value{
  font-variant-numeric:tabular-nums;
  font-size:16px;
}
.recette-comp-table tfoot td.col-total-label{
  text-align: right;
  letter-spacing: 0.3px;
}

.recette-comp-table tfoot td.col-total-value{
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
/* Colonnes */
.recette-comp-table .col-code{ text-align:left; width: 520px; white-space: normal; word-break: break-word; }
.recette-comp-table .col-etat{ width: 140px; text-align:center; }
.recette-comp-table .col-qty{ width: 120px; text-align:right; }
.recette-comp-table .col-pct{ text-align: right; font-variant-numeric: tabular-nums; width: 120px; }
.recette-comp-table .col-sample{ width: 120px; }

/* Carte conteneur (si utilisée) */
.recette-comp-card{
  max-width: 1400px;
  margin: 0 auto;
  min-height: 0;
}

/* Onglet techniques : pas de hauteurs/paddings trop grands */
.ing-panel[data-panel="techniques"]{
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 12px;
}
.ing-panel[data-panel="techniques"] .info-body{
  padding: 12px !important;
}
.ing-panel[data-panel="techniques"] .info-card{
  min-height: 0 !important;
}


/* =========================================================
   9) “ETAT” — PILLS (ingrédients / recettes)
   ========================================================= */

.ing-etat,
.rec-etat{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  line-height:18px;
  font-weight:600;
  white-space:nowrap;
}

/* mêmes couleurs que côté ingrédients */
.ing-etat-1{ background:#9aa0a6; } /* Encore */
.ing-etat-2{ background:#fbbc04; } /* Rédigé */
.ing-etat-3{ background:#1a73e8; } /* Validé */
.ing-etat-4{ background:#34a853; } /* Approuvé */

.rec-etat-0{ background:#9aa0a6; }
.rec-etat-1{ background:#9aa0a6; }
.rec-etat-2{ background:#fbbc04; }
.rec-etat-3{ background:#34a853; }


/* =========================================================
   10) INFORMATIONS NUTRITIONNELLES — TABLE HIÉRARCHIQUE
   (on conserve ton comportement replier/déplier + filtres)
   ========================================================= */

.nutri-invalid{
  border-color:#c0392b !important;
  background:#fff5f5;
}

/* Toolbar + filtres */
.nutri-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:#fff;
  flex-wrap:wrap;
}

.nutri-filters{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Pills (0 / NC) */
.nutri-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid #cfd6df;
  border-radius:999px;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  line-height:1;
}
.nutri-pill:hover{
  background: rgba(20, 120, 255, 0.06);
}
.nutri-pill input{
  width:14px;
  height:14px;
  margin:0;
}
/* Texte atténué quand décoché */
.nutri-pill input:not(:checked) + span{
  opacity:.45;
}

.nutri-toggle-all{
  border:1px solid #cfd6df;
  background:#fff;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:600;
}
.nutri-toggle-all:hover{
  background: rgba(20, 120, 255, 0.06);
}

/* Cadre qui s’auto-centre et s’adapte au contenu */
.nutri-card{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}
.nutri-body{
  display:flex;
  justify-content:center;
}
.nutri-wrap{
  background:#fff;
  border:2px solid #222;
  border-radius:14px;
  padding:12px;
  overflow:auto;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}

/* Hiérarchie typographique (texte) */
.nutri-row.level-0 .nutri-name-inner {
  font-weight: 700;
  font-size: 1.05em;
}
.nutri-row.level-1 .nutri-name-inner {
  font-weight: 600;
  font-size: 1.00em;
}
.nutri-row.level-2 .nutri-name-inner,
.nutri-row.level-3 .nutri-name-inner {
  font-weight: 500;
  font-size: 0.95em;
  opacity: 0.9;
}

/* Padding spécifique niveau 0 (groupe) */
.nutri-row.level-0 td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Fonds par niveau
   ✅ IMPORTANT : on garde UNE seule version (ton dernier choix),
   et on supprime l’ancienne ligne "background: rgba(...)" qui se contredisait. */
.nutri-row.level-0{ background:#f6f7f9; }
.nutri-row.level-1{ background:#fbfbfc; }
.nutri-row.level-2,
.nutri-row.level-3{ background:#ffffff; }

/* Tableau : s’adapte au contenu (pas full width) */
.nutri-table{
  width:auto;
  max-width:1100px;
  margin:0 auto;
  border-collapse:separate;
border-spacing:0;
  table-layout:auto;
}

/* Repli/dépli */
.nutri-name-inner { display:flex; align-items:center; gap:6px; }
.nutri-toggle { border:0; background:transparent; cursor:pointer; padding:0 4px; }
.nutri-toggle-spacer { display:inline-block; width:18px; }
.nutri-hidden { display:none; }

/* Indentation */
.nutri-indent[data-level="0"]{ width:0; }
.nutri-indent[data-level="1"]{ width:14px; }
.nutri-indent[data-level="2"]{ width:28px; }
.nutri-indent[data-level="3"]{ width:42px; }

/* Divers filtres */
.nutri-filter-hidden { display:none; }
.nutri-filter { font-size:12px; display:inline-flex; gap:6px; align-items:center; }

/* En-têtes */
.nutri-table th{
  background:transparent; /* IMPORTANT : le fond vient du thead */
  font-weight:700;
  text-align:center;
  padding:10px 12px;
  border-bottom:none;     /* IMPORTANT : on gère la bordure sous thead */
}

/* Cellules */
.nutri-table td{
  text-align:center;
  padding:10px 12px;
  border-bottom:1px solid #e6e6e6;
  vertical-align:middle;
}
.nutri-table tr:hover td{ background:#f7fbff; }

.nutri-val{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.nutri-muted{
  color:#888;
  text-align:center;
}
.nutri-empty{
  padding:14px 10px;
  text-align:center;
  color:#666;
  font-style:italic;
}

/* 1ère colonne : look “label” */
.nutri-table td:first-child{
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

/* Select (version NutriScore) */
.nutri-select{
  width:140px;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#f7f7f7;
  color:#555;
}

/* Enlever le cadre externe (si la nutrition est dans une info-card dédiée) */
.info-card.nutri-card{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  overflow:visible;
  min-height:0;
}
.info-card.nutri-card > h4{ display:none; }
.info-card.nutri-card .info-body.nutri-body{ padding:0; }

/* ===== Étape 2 — En-tête bleu qui suit l’arrondi ===== */

/* Le cadre qui contient le tableau doit "clipper" l'en-tête */
.inner-subcard.nutri-subcard{
  border-radius:14px;
  overflow:hidden;          /* clé : coupe le bleu dans l'arrondi */
  padding:0;                /* padding géré par toolbar/table */
}

/* ==============================
   EN-TÊTE NUTRITION — ARRONDI UNIQUEMENT EN HAUT (ligne 1)
   ============================== */

/* Fond bleu global */
.inner-subcard.nutri-subcard .nutri-table thead{
  background:#0b6fa4;
  color:#fff;
}

/* Les th héritent */
.inner-subcard.nutri-subcard .nutri-table thead th{
  background:transparent;
  color:#fff;
  font-weight:700;
  border-bottom:none;
}

/* Ligne 1 (barre haute) */
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th{
  padding:14px 12px 10px;
}

/* ✅ Arrondi seulement sur la 1ère ligne */
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th:first-child{
  border-top-left-radius:14px;
}
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th:last-child{
  border-top-right-radius:14px;
}

/* Ligne 2 (Apport/AET/...) */
.inner-subcard.nutri-subcard .nutri-table thead tr:nth-child(2) th{
  padding:8px 12px 14px;
  opacity:0.95;
  border-top:1px solid rgba(255,255,255,.25); /* légère séparation */
}

/* Bordure basse unique sous tout l’en-tête */
.inner-subcard.nutri-subcard .nutri-table thead{
  border-bottom:2px solid #0a5f8c;
}ding:10px 12px;
}
/* =========================================================
   11) ALLERGÈNES — CARTE COMPACTE
   ========================================================= */

.alg-table{
  border:2px solid #444;
  border-radius:14px;
  background:#fff;

  width:fit-content;
  min-width:1100px;
  max-width:100%;

  margin:10px auto 0;
  overflow-x:auto;
  overflow-y:hidden;
}

.alg-row{
  display:grid;
  grid-template-columns: 120px 540px 540px;
  border-top:1px solid #bbb;
}
.alg-row:first-child{ border-top:0; }

.alg-name{
  padding:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  border-right:1px solid #bbb;
  background:#f3f1ea;
  justify-content:center;
  text-align:center;
}

.alg-col{
  padding:8px 10px 10px;
  border-right:1px solid #bbb;
  background:#fff;
}
.alg-col:last-child{ border-right:0; }

.alg-col-title{
  font-weight:700;
  text-align:center;
  padding:8px 0;
  margin:-8px -10px 10px;
  background:#f1f7fd;
  border-bottom:1px solid #bbb;
}

/* Radios */
.alg-radios{
  display:flex;
  gap:12px;
  align-items:center;
  margin:4px 0 8px;
  flex-wrap:wrap;
  font-size:13px;
}
.alg-radios label{
  cursor:default;
  white-space:nowrap;
  color:#111;
}
.alg-radios input[type="radio"]{
  width:16px;
  height:16px;
  margin-right:6px;
  accent-color:#005a8c;
}

/* Champ texte */
.alg-field{
  border:1px solid #bbb;
  background:#fff;
  height:26px;
  padding:4px 6px;
  margin:6px 0 8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.alg-field input[type="text"]{
  border: 0;
  outline: none;
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* Sous-lignes */
.alg-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}
.alg-subline span{ font-weight:700; }
.alg-text{ font-weight:400; }

/* Responsive allergènes */
@media (max-width: 1100px){
  .alg-table{ width:100%; }
  .alg-row{
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "name vol"
      "name for";
  }
  .alg-name{ grid-area:name; }
  .alg-col--vol{
    grid-area:vol;
    border-right:0;
    border-bottom:1px solid #bbb;
  }
  .alg-col:not(.alg-col--vol){ grid-area:for; }
}

.alg-cause, .alg-presence{ flex-wrap:wrap; }

.alg-cause label,
.alg-presence label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:10px;
  font-weight:400;
}
.alg-cause input[type="checkbox"]{
  width:14px;
  height:14px;
}
.alg-presence input[type="radio"]{
  width:14px;
  height:14px;
}


/* =========================================================
   ALLERGÈNES — MATRICE (recette)
   1 ligne = 1 ingrédient / 2 colonnes = PV/PF par allergène
   ========================================================= */

.alg-matrix-wrap{
  overflow-x:auto;
  border:2px solid #444;
  border-radius:14px;
  background:#fff;
  padding:8px;
}

.alg-matrix{
  border-collapse:separate;
  border-spacing:0;
  min-width:900px;
  width:100%;
}

.alg-matrix th,
.alg-matrix td{
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  padding:8px 10px;
  text-align:center;
  white-space:nowrap;
}

.alg-matrix thead th{
  background:#f3f1ea;
  font-weight:700;
}

.alg-matrix th.alg-th-ing,
.alg-matrix td.alg-td-ing{
  text-align:left;
  min-width:260px;
}

.alg-matrix th:last-child,
.alg-matrix td:last-child{
  border-right:0;
}

.alg-matrix tbody tr:last-child td{
  border-bottom:0;
}

/* états */
.alg-cell--yes{ background:#d7f5dc; font-weight:700; }
.alg-cell--no{  background:#f2f2f2; color:#888; }
.alg-cell--nc{  background:#fff7d6; color:#8a6d00; font-weight:700; }


/* table large => scroll horizontal */
.alg-matrix-wrap{
  overflow-x:auto;
  border:2px solid #444;
  border-radius:14px;
  background:#fff;
  padding:8px;
}

.alg-matrix{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:1200px; /* matrice large (14 allergènes) */
}

.alg-matrix th,
.alg-matrix td{
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  padding:6px 8px;  /* un peu plus compact */
  text-align:center;
  white-space:nowrap;
}

.alg-matrix thead th{ background:#f3f1ea; font-weight:700; }

.alg-matrix th.alg-th-ing,
.alg-matrix td.alg-td-ing{ text-align:left; min-width:260px; }

.alg-matrix th:last-child,
.alg-matrix td:last-child{ border-right:0; }
.alg-matrix tbody tr:last-child td{ border-bottom:0; }

/* séparateur visuel au début de chaque allergène */
.alg-group-start{ border-left:2px solid #444 !important; }

/* états */



/* base cellule : cadre “neutre” */
.alg-matrix td.alg-td{
  background:#fff;
}
/* NON -> blanc */
.alg-cell--off{
  background-color:#fff !important;
}

/* NC -> gris plein */
.alg-cell--nc{
  background-color:#e6e6e6 !important;
  color:#666;
  font-weight:700;
}

/* PV -> rouge plein */
.alg-cell--pv-on{
  background-color:#e53935 !important;
  color:transparent;        /* au cas où */
}

/* PF -> bleu plein */
.alg-cell--pf-on{
  background-color:#1e88e5 !important;
  color:transparent;        /* au cas où */
}

/* légende alergènes oui non PV PF */

.alg-legend{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin: 6px 0 10px;
  font-size: 13px;
}

.alg-legend-item{
  display:inline-flex;
  gap:8px;
  align-items:center;
}

.alg-legend-swatch{
  width:18px;
  height:12px;
  border:1px solid #444;
  border-radius:3px;
  display:inline-block;
}

/* couleurs = celles des cellules */
.alg-legend-pv{ background-color:#e53935; }
.alg-legend-pf{ background-color:#1e88e5; }
.alg-legend-nc{ background-color:#e6e6e6; }
.alg-legend-off{ background-color:#fff; }


/* =========================================================
   13) COMPOSITION — SÉLECTEUR D'INGRÉDIENTS (haut de l'onglet)
   Objectif : utiliser toute la largeur disponible + noms lisibles
   ========================================================= */

.kl-comp-box{
  max-width: 1400px;
  margin: 0 auto;
}

.kl-comp-selector{
  margin:0 0 14px 0;
  padding:14px;
  border:1px solid #cfd6df;
  border-radius:14px;
  background:#fff;
}

.kl-comp-selector-toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.kl-comp-alpha{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.kl-comp-alpha-btn{
  padding:5px 10px;
  border:1px solid #cfd6df;
  border-radius:999px;
  background:#f8fafc;
  cursor:pointer;
  font-size:12px;
}
.kl-comp-alpha-btn.is-active{
  background:#0073aa;
  color:#fff;
  border-color:#0073aa;
}

.kl-comp-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.kl-comp-searchline{
  display:flex;
  gap:6px;
  align-items:center;
  flex: 1 1 420px;
  min-width: 280px;
}

.kl-comp-ing-search{
  width: 100%;
  padding:8px 12px;
  border:1px solid #cfd6df;
  border-radius:12px;
}
.kl-comp-ing-clear{
  padding:8px 10px;
  border:1px solid #cfd6df;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.kl-comp-selects{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  flex: 2 1 520px;
}

.kl-comp-selects select{
  padding:8px 12px;
  border:1px solid #cfd6df;
  border-radius:12px;
  min-width: 220px;
  max-width: 100%;
  background:#fff;
}

.kl-comp-versions{
  display:flex;
  gap:14px;
  align-items:center;
  font-size:13px;
}

.kl-comp-ing-tablewrap{
  max-height: 440px;
  overflow:auto;
  border:1px solid #e6edf3;
  border-radius:12px;
}

.kl-comp-ing-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  table-layout: fixed; /* permet de contrôler les largeurs */
}

.kl-comp-ing-table thead th{
  position: sticky;
  top: 0;
  background: #f1f7fd;
  z-index: 2;
  padding:8px 10px;
  border-bottom:1px solid #cfd6df;
  font-weight:700;
  text-align:left;
  white-space:nowrap;
}

.kl-comp-ing-table tbody td{
  padding:8px 10px;
  border-bottom:1px solid #eef2f6;
  vertical-align:top;
}

.kl-comp-ing-row:hover td{ background:#eaf4ff; }

/* Colonnes (sélecteur) — après suppression "Ver." + fusion Code/Nom */
.kl-comp-ing-table th.c-code,  .kl-comp-ing-table td:nth-child(1){
  width: 420px;
  text-align:left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}
.kl-comp-ing-table th.c-etat,  .kl-comp-ing-table td:nth-child(2){ width: 110px; text-align:center; }
.kl-comp-ing-table th.c-prod,  .kl-comp-ing-table td:nth-child(3){ width: 150px; text-align:center; }
.kl-comp-ing-table th.c-cat,   .kl-comp-ing-table td:nth-child(4){ width: 160px; text-align:left; }
.kl-comp-ing-table th.c-sscat, .kl-comp-ing-table td:nth-child(5){ width: 170px; text-align:left; }
.kl-comp-ing-table th.c-fourn, .kl-comp-ing-table td:nth-child(6){ width: 170px; text-align:left; }
.kl-comp-ing-table th.c-act,   .kl-comp-ing-table td:nth-child(7){ width: 52px; text-align:center; }

/* Bouton + */
.kl-comp-ing-add{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid #cfd6df;
  background:#fff;
  cursor:pointer;
  line-height:1;
  font-size:16px;
}
.kl-comp-ing-add:hover{
  border-color:#0073aa;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.kl-comp-ing-add[disabled]{ opacity:.35; cursor:not-allowed; }

/* Ligne statut */
.kl-comp-statusline{
  margin-top:8px;
  min-height:18px;
  font-size:13px;
  opacity:.85;
}

/* Delete en fin de ligne (composition) */
.kl-comp-del{
  border:0;
  background:transparent;
  color:#c40000;
  font-size:16px;
  cursor:pointer;
}
.kl-comp-del:hover{ transform:scale(1.06); }


/* =========================================================
   v14 — ajustements UI Composition (police + filtres sur 1 ligne)
   ========================================================= */

/* 1) Police légèrement plus grande */
.kl-comp-selector{ font-size:14px; }
.kl-comp-alpha-btn{ font-size:13px; }
.kl-comp-ing-table{ font-size:13.5px; }
.kl-comp-ing-table thead th{ font-size:13px; }
.kl-comp-ing-search,
.kl-comp-selects select{ font-size:13.5px; }

/* 2) Garder les filtres sur une seule ligne (écrans larges) */
@media (min-width: 1100px){
  .kl-comp-filters{
    flex-wrap:nowrap;
    gap:12px;
  }
  .kl-comp-searchline{
    flex: 0 1 360px;
    min-width: 300px;
  }
  .kl-comp-selects{
    flex: 1 1 auto;
    flex-wrap:nowrap;
    gap:10px;
  }
  .kl-comp-selects select{
    min-width: 180px;
    width: 220px;
  }
  .kl-comp-versions{
    margin-left:auto;
    white-space:nowrap;
  }
}

/* Sur écrans plus étroits, on repasse en wrap (sinon ça déborde) */
@media (max-width: 1099px){
  .kl-comp-filters{ flex-wrap:wrap; }
  .kl-comp-selects{ flex-wrap:wrap; }
  .kl-comp-versions{ margin-left:0; }
}

/* =========================================================
   v15 — Forcer la lisibilité (Elementor/Theme override fix)
   Symptôme : la police grossit puis redevient petite après chargement.
   Cause : une feuille (thème/Elementor) écrase les tailles.
   Solution : sélecteurs plus spécifiques + !important.
   ========================================================= */

/* Table du sélecteur (liste ingrédients du haut) */
html body .kl-comp-box table.kl-comp-ing-table{
  font-size: 14.5px !important;
}
html body .kl-comp-box table.kl-comp-ing-table thead th{
  font-size: 13.5px !important;
}
html body .kl-comp-box table.kl-comp-ing-table th,
html body .kl-comp-box table.kl-comp-ing-table td{
  vertical-align: middle !important;
  line-height: 1.25 !important;
  padding: 10px 12px !important;
}

/* Colonne Nom un peu plus lisible */
html body .kl-comp-box table.kl-comp-ing-table td:nth-child(1){
  font-size: 15px !important;
}

/* Table de composition (celle du bas) */
html body .kl-comp-box table.recette-comp-table{
  font-size: 15px !important;
}
html body .kl-comp-box table.recette-comp-table th,
html body .kl-comp-box table.recette-comp-table td{
  vertical-align: middle !important;
  line-height: 1.25 !important;
  padding: 10px 12px !important;
}
html body .kl-comp-box table.recette-comp-table td.col-code{
  font-size: 15.5px !important;
}

/* Badges état : bien centrés */
html body .kl-comp-box .ing-etat{
  display:inline-flex !important;
  align-items:center !important;
  line-height: 1.1 !important;
  padding: 4px 10px !important;
}

/* Cas Elementor : on augmente encore la spécificité */
body[class*="elementor-kit-"] .kl-comp-box table.kl-comp-ing-table,
body[class*="elementor-kit-"] .kl-comp-box table.recette-comp-table{
  font-size: 15px !important;
}



/* décale légèrement le champ "Nom recette" vers le bas */
.kl-swal-col--offset{ margin-top: 14px; }  /* ajuste 10–20px */
/* =========================================================
   COLONNES — Drag (centre) + Resize (bord droit)
   ========================================================= */

#recettes-table thead th{
  position: relative; /* nécessaire pour placer la poignée */
  user-select: none;
}

/* poignée resize (bord droit) */
#recettes-table thead th .kl-rec-resizer{
  position:absolute;
  top:0;
  right:-2px;
  width:8px;
  height:100%;
  cursor: col-resize;
  z-index: 10;
}

/* feedback visuel pendant drag */
#recettes-table thead th.kl-rec-dragging{
  opacity: .55;
}

/* pendant resize : évite sélection texte */
body.kl-rec-resize-active{
  cursor: col-resize !important;
  user-select:none !important;
}



/* =========================================================
   COMPOSITION — Toggle du sélecteur (Masquer/Afficher)
   ========================================================= */

.kl-comp-selector-togglebar{
  display:flex;
  justify-content:flex-end;
  margin: 0 0 8px 0;
}

.kl-comp-toggle{
  border:1px solid #cfd6df;
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
}

.kl-comp-toggle:hover{
  border-color:#0073aa;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}




/* ==============================
   Recettes INACTIVES — PREMIUM FIX
   Hachures permanentes + hover bleu sans effacer le texte
   ============================== */

/* Base cellule : crée une stacking context pour permettre z-index négatifs */
.kl-recettes #recettes-table tbody tr.rec-inactive td{
  position: relative;
  z-index: 0;              /* 🔑 stacking context */
  overflow: hidden;
  background-color: #eef1f4 !important;
  color: #6c757d;          /* texte atténué */
}

/* Hachures (derrière le texte) */
.kl-recettes #recettes-table tbody tr.rec-inactive td::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;             /* 🔑 derrière le contenu */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.055),
    rgba(0,0,0,0.055) 4px,
    transparent 4px,
    transparent 8px
  );
  pointer-events: none;
}

/* Voile bleu au hover (derrière le texte, au-dessus du fond) */
.kl-recettes #recettes-table tbody tr.rec-inactive td::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;             /* même couche que les hachures */
  background: rgba(227, 241, 255, 0);
  pointer-events: none;
  transition: background 120ms ease;
}

/* IMPORTANT : ton hover global colore le TR et casse l'effet.
   On le neutralise uniquement pour les inactifs. */
.kl-recettes #recettes-table tbody tr.rec-inactive:hover{
  background-color: transparent !important;
}
.kl-recettes #recettes-table tbody tr.rec-inactive:hover td{
  background-color: #eef1f4 !important;  /* garde le fond de base */
}

/* On “allume” le voile bleu (sans masquer texte/hachures) */
.kl-recettes #recettes-table tbody tr.rec-inactive:hover td::before{
  background: rgba(227, 241, 255, 0.75);
}

/* Optionnel : badge état un peu désaturé */
.kl-recettes #recettes-table tbody tr.rec-inactive .rec-etat{
  filter: grayscale(25%);
  opacity: 0.9;
}


/* Taille des icônes d'action = hauteur de ligne (au lieu de 28px fixe) */
.kl-ingredients.kl-ingredients-list{
  --ing-icon: calc(var(--ing-row-h) - 2px);
}

/* Empêche un enfant de forcer la ligne à 28px */
.kl-ingredients.kl-ingredients-list .ing-edit-icon,
.kl-ingredients.kl-ingredients-list .ing-dup-icon{
  width: var(--ing-icon) !important;
  height: var(--ing-icon) !important;
  border-radius: 6px;
}

/* Ajuste la taille du pictogramme */
.kl-ingredients.kl-ingredients-list .ing-edit-icon{
  font-size: calc(var(--ing-body-font) + 2px) !important;
}
.kl-ingredients.kl-ingredients-list .ing-dup-icon,
.kl-ingredients.kl-ingredients-list .ing-dup-icon .dup-saveas{
  font-size: calc(var(--ing-body-font) + 3px) !important;
  line-height: 1 !important;
}

/* Bonus : force la hauteur de la ligne elle-même */
.kl-ingredients.kl-ingredients-list #ingredients-table tbody tr{
  height: var(--ing-row-h) !important;
}



/* =========================================================
   FIX ROBUSTE — Centrer le bouton + dans la barre outils
   (indépendant des règles grid/flex précédentes)
   ========================================================= */

.kl-recettes .ing-list-toolbar{
  position: relative !important;
  min-height: 46px; /* hauteur du bouton */
}

.kl-recettes .ing-list-actions{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  justify-content: center !important;
}

/* Mobile : on évite l'absolu (sinon ça peut se chevaucher) */
@media (max-width: 900px){
  .kl-recettes .ing-list-toolbar{
    min-height: 0;
  }
  .kl-recettes .ing-list-actions{
    position: static !important;
    transform: none !important;
    margin-top: 8px;
  }
}

/* =========================================================
   RECETTES — listing ingrédient (sélecteur composition)
   ========================================================= */

.kl-comp-selector{
  margin: 10px 0 14px;
}

/* Toolbar (filtres) : carte */
.kl-comp-selector-toolbar{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  margin-bottom:10px;
}

/* Champs */
.kl-comp-filters select,
.kl-comp-filters input.kl-comp-ing-search{
  border:1px solid #d0d7de;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}

/* Table wrap */
.kl-comp-ing-tablewrap{
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

/* Table */
.kl-comp-ing-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

/* Cellules */
.kl-comp-ing-table th,
.kl-comp-ing-table td{
  padding:8px 10px;
  border-bottom:1px solid #e5e7eb;
  text-align:center;
  vertical-align:middle;
}

/* Header sticky + couleur */
.kl-comp-ing-table thead th{
  position: sticky;
  top: 0;
  z-index: 10;
  background:#0b6fa4;
  color:#fff;
}

/* Hover ligne */
.kl-comp-ing-table tbody tr:hover td{
  background-color:#e3f1ff;
}

/* Bouton + un peu plus joli */
.kl-comp-ing-add{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid #d0d7de;
  background:#fff;
  cursor:pointer;
}
.kl-comp-ing-add:hover{
  border-color:#0b6fa4;
}
.kl-comp-ing-add:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* ============================
   Inactifs (gris + hachures)
   ============================ */
.kl-comp-ing-table tbody tr.kl-ing-inactive td{
  position:relative;
  z-index:0;
  overflow:hidden;
  background-color:#eef1f4 !important;
  color:#6c757d;
}

.kl-comp-ing-table tbody tr.kl-ing-inactive td::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.055),
    rgba(0,0,0,0.055) 4px,
    transparent 4px,
    transparent 8px
  );
  pointer-events:none;
}


/* Overlay (comme ingredients.css) pour teinter en bleu au hover */
.kl-comp-ing-table tbody tr.kl-ing-inactive td::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: rgba(227, 241, 255, 0);
  pointer-events:none;
  transition: background 120ms ease;
}

/* Au hover : on injecte le bleu au-dessus des hachures */
.kl-comp-ing-table tbody tr.kl-ing-inactive:hover td::before{
  background: rgba(227, 241, 255, 0.75);
}

/* Important : ne pas écraser le hover bleu avec un gris fixe */
.kl-comp-ing-table tbody tr.kl-ing-inactive:hover td{
  background-color:#eef1f4 !important;
}
/* Hover doux sur inactif */
.kl-comp-ing-table tbody tr.kl-ing-inactive:hover td{
  background-color:#eef1f4 !important;
}

/* Badge état atténué (si tu utilises ing-etat) */
.kl-comp-ing-table tbody tr.kl-ing-inactive .ing-etat{
  filter: grayscale(25%);
  opacity:0.9;
}


/* Ligne batch au-dessus du tableau composition */
.kl-comp-batchline{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #e6edf3;
  background:#fff;
}

.kl-comp-batchlabel{ font-weight:700; opacity:.9; }

.kl-comp-batch{
  width:140px;
  padding:8px 10px;
  border:1px solid #cfd6df;
  border-radius:10px;
  text-align:right;
}

.kl-comp-batchunit{ font-weight:700; opacity:.85; }


/* En-tête nutrition : ligne "groupes" */
.nutri-table thead tr:first-child th{
  font-size: 13px;
  letter-spacing: .2px;
}

/* En-tête nutrition : ligne "colonnes" */
.nutri-table thead tr:nth-child(2) th{
  font-size: 12.5px;
  opacity: .95;
}


/* =========================================
   NUTRI — Traits verticaux propres et uniformes
   ========================================= */

/* Base : aucune bordure verticale par défaut */
.nutri-table th,
.nutri-table td{
  border-right: 0;
}

/* =====================================================
   BODY (tbody)
   ===================================================== */

/* traits légers entre colonnes */
.nutri-table tbody td{
  border-right: 1px solid #e1e6ee;
}

.nutri-table tbody td:last-child{
  border-right: 0;
}

/* séparateurs forts (Nutriments | Unités | 100g | Portion) */
.nutri-table tbody td:nth-child(1),
.nutri-table tbody td:nth-child(2),
.nutri-table tbody td:nth-child(7){
  border-right: 2px solid #0a5f8c;
}


/* =====================================================
   HEADER (thead) — traits propres sans doublons
   ===================================================== */

/* traits légers blancs sur fond bleu */
.inner-subcard.nutri-subcard .nutri-table thead th{
  border-right: 1px solid rgba(255,255,255,.35);
}
.inner-subcard.nutri-subcard .nutri-table thead th:last-child{
  border-right: 0;
}

/* séparateurs forts "Nutriments | Unités" (on garde en border-right) */
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th[rowspan="2"]:first-of-type{
  border-right: 2px solid rgba(255,255,255,.75);
}
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th[rowspan="2"]:nth-of-type(2){
  border-right: 2px solid rgba(255,255,255,.75);
}

/* HEADER (thead) : traits fins */
.inner-subcard.nutri-subcard .nutri-table thead th{
  border-right: 1px solid rgba(255,255,255,.35);
}
.inner-subcard.nutri-subcard .nutri-table thead th:last-child{
  border-right: 0;
}

/* ✅ Séparateur fort 100g / portion = VRAIE bordure (uniforme) */

/* Ligne 1 : "Pour 100 g" (c’est le 3e th de la ligne, après Nutriments + Unités) */
.inner-subcard.nutri-subcard .nutri-table thead tr:first-child th:nth-child(3){
  border-right: 2px solid rgba(255,255,255,.85) !important;
}

/* Ligne 2 : dernier th du bloc 100g = 5e th de la 2e ligne ("Allégation") */
.inner-subcard.nutri-subcard .nutri-table thead tr:nth-child(2) th:nth-child(5){
  border-right: 2px solid rgba(255,255,255,.85) !important;
}.btn-export img {
    width: 22px;
    height: 22px;
    display: block;
}

.btn-export {
    display: flex;
    align-items: center;
    justify-content: center;
}.btn-export img {
    width: 30px;
    height: 30px;
    display: block;
}