/* =========================================================
   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 1fr;
  column-gap:12px;
  align-items:start;
  width:100%;
  margin: 0 0 12px 0;
}
.ing-list-filters{ width:100%; }

.ing-list-actions{
  width:100%;
  display:flex !important;
  justify-content:flex-start !important;
  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: #f1f7fd;
  color: #111;
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid #bbb;
  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; }

/* 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:collapse;
  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:#e9f3ff;
  font-weight:700;
  text-align:center;
  padding:10px 12px;
  border-bottom:1px solid #222;
}

/* 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 */
}

/* Le tableau doit coller aux bords du cadre */
.inner-subcard.nutri-subcard .nutri-table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
}

/* En-tête : bleu doux, et coins arrondis */
.inner-subcard.nutri-subcard .nutri-table thead th{
  background:#f1f7fd;
  border-bottom:1px solid #bbb;
}
.inner-subcard.nutri-subcard .nutri-table thead th:first-child{ border-top-left-radius:14px; }
.inner-subcard.nutri-subcard .nutri-table thead th:last-child{ border-top-right-radius:14px; }

/* Padding interne propre aux cellules */
.inner-subcard.nutri-subcard .nutri-table th,
.inner-subcard.nutri-subcard .nutri-table td{
  padding: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) */
.kl-comp-ing-table th.c-code,  .kl-comp-ing-table td:nth-child(1){ width: 110px; }
.kl-comp-ing-table th.c-ver,   .kl-comp-ing-table td:nth-child(2){ width: 70px; text-align:center; }
.kl-comp-ing-table th.c-etat,  .kl-comp-ing-table td:nth-child(3){ width: 110px; text-align:center; }
.kl-comp-ing-table th.c-cat,   .kl-comp-ing-table td:nth-child(5){ width: 160px; }
.kl-comp-ing-table th.c-sscat, .kl-comp-ing-table td:nth-child(6){ width: 170px; }
.kl-comp-ing-table th.c-fourn, .kl-comp-ing-table td:nth-child(7){ width: 170px; }
.kl-comp-ing-table th.c-act,   .kl-comp-ing-table td:nth-child(8){ width: 52px; text-align:center; }

/* Colonne Nom : on favorise la lisibilité */
.kl-comp-ing-table td:nth-child(4){
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* 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); }

/* Responsive */
@media (max-width: 1100px){
  .kl-comp-ing-table th.c-cat,   .kl-comp-ing-table td:nth-child(5),
  .kl-comp-ing-table th.c-sscat, .kl-comp-ing-table td:nth-child(6),
  .kl-comp-ing-table th.c-fourn, .kl-comp-ing-table td:nth-child(7){
    width: 140px;
  }
}
@media (max-width: 900px){
  .kl-comp-ing-table th.c-cat,   .kl-comp-ing-table td:nth-child(5),
  .kl-comp-ing-table th.c-sscat, .kl-comp-ing-table td:nth-child(6),
  .kl-comp-ing-table th.c-fourn, .kl-comp-ing-table td:nth-child(7){
    display:none;
  }
  .kl-comp-ing-table th.c-act, .kl-comp-ing-table td:nth-child(8){ width: 44px; }
}

/* =========================================================
   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(4){
  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 */