/* ------ ÉTAT DE L’INGRÉDIENT --------- */

.ing-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* tout à la suite */
  gap:10px;                     /* espace régulier entre éléments */
  margin: 6px 0 14px;
  padding-right:18px;
}

/* Bloc titre + état */
.ing-title-wrap{
  display:flex;
  align-items:baseline;
  gap:10px;
}

/* Titre */
.ing-title{
  margin:0;
  font-size:26px;
  line-height:1.2;
  white-space:nowrap;           /* pas de retour à la ligne */
}

/* Séparateur */
.ing-etat-sep{
  opacity:.6;
}

/* État ingrédient — même rendu que le tableau (badge pill) */
.ing-etat{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  line-height:18px;
  font-weight:600;
  white-space:nowrap;
}

/* Couleurs états ingrédient — mets ici les 4 HEX utilisés dans le tableau */
.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é */


/* Actions (bouton modifier) */
.ingredient-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  margin-left:10px;             /* petit espace après l’état */
}


/* ----------------------------*/

 #ingredients-table tr:hover {
            background-color: #e3f1ff;
            cursor: pointer;
        }
        .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;
        }
        select {
            margin-right: 8px;
            padding: 4px;
        }
        #ingredients-table {
            border-collapse: collapse;
            width: 100%;

        }
        #ingredients-table th {
            background: #0073aa;
            color: white;
        }
        #ingredients-table th,
#ingredients-table td {
    text-align: center;
    vertical-align: middle;
}
/* Icône Modifier (table ingrédients) */
.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;
}

/* Icône Dupliquer (table ingrédients) */
.ing-dup-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;
  text-decoration:none;
}

/* Mini “saveas” dans la table */
.ing-dup-icon .dup-saveas{
  position:relative;
  font-size:16px;
  line-height:1;
  color:#2271b1; /* bleu */
}

.ing-dup-icon .dup-saveas .arrow{
  position:absolute;
  right:-8px;
  bottom:-8px;
  font-size:12px;
  color:#2271b1;
}


/* ===== Fichiers attachés ===== */

.kl-files-box {
  border: 1px solid #ddd;
  background: #fafafa;
  padding: 10px;
  border-radius: 4px;
}

.kl-files-empty {
  color: #777;
  font-style: italic;
}

.kl-files-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kl-files-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.kl-files-item:last-child {
  border-bottom: none;
}

.kl-files-item a {
  text-decoration: none;
}

.kl-files-item a:hover {
  text-decoration: underline;
}

.kl-file-del {
  margin-left: auto;
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

.kl-file-del:hover {
  background: #ffecec;
  border-color: #cc0000;
  color: #a00000;
}

.kl-files-actions {
  margin-top: 8px;
}

.kl-files-actions input[type="file"] {
  font-size: 13px;
}

.kl-files-actions button {
  margin-left: 6px;
}

.kl-files-status {
  font-size: 12px;
  color: #555;
}







  /* ========================
   message ajouter fichier
   ========================= */


.kl-files-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 12px 0;
  padding: 8px 10px;
  background: #f4f8fc;
  border-left: 4px solid #4a90e2;
  font-size: 13px;
  color: #333;
  border-radius: 3px;
}

.kl-files-hint-icon {
  font-size: 16px;
  line-height: 1.2;
}

.kl-files-hint-text {
  line-height: 1.4;
}








  /* ========================
    Tableau des ingrédients boutons ajouter
   ========================= */



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

/* gauche */
.ing-list-filters{
  width: 100%;
}

/* droite : les boutons commencent au début de la moitié droite */
.ing-list-actions{
  width: 100%;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
}

/* anti-règles "fantômes" (thème/plugins) qui poussent à droite */
.ing-list-actions > *{
  margin-left: 0 !important;
}


/* un mini-style pour ton bouton ❌ si tu veux enlever l’inline */
#select-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#alphabet-filters{ margin-bottom:10px; }
#versions-filter{ margin-top:10px; }

.ing-mini-btn{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #ccc;
  background:#f5f5f5;
  cursor:pointer;
}

/* un mini-style pour ton bouton ❌ si tu veux enlever l’inline */
#select-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#alphabet-filters{ margin-bottom:10px; }
#versions-filter{ margin-top:10px; }

.ing-mini-btn{
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #ccc;
  background:#f5f5f5;
  cursor:pointer;
}



  /* ========================
    BOUTONS ENREGISTRER...
   ========================= */






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


.btn-action.icon-only .label {
  display: none;
}
.saveas-icon{
  position:relative;
  font-size:26px;
  line-height:1;
}


.saveas-icon .arrow {
  position: absolute;
  right: -6px;
  bottom: -6px;
  font-size: 14px;
  color: #b32d2e; /* rouge WP */
}

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




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

/* Bouton avec texte (ex: "Passer en mode édition") */
.btn-with-label{
  width:auto;
  padding:0 14px;
  gap:10px;
}

.btn-with-label .label{
  display:inline;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}

/* Variante "édition" */
.btn-edit{
  color:#2271b1;
}

.btn-edit:hover{
  border-color:#2271b1;
}

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

    /* =========================
   SWEETALERT – MODIFICATIONS
   ========================= */

   .swal-change-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}

.swal-change-label{
  min-width:180px;
  font-weight:600;
  text-align:left;
}

.swal-change-values{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.swal-change-values .old{
  color:#c0392b;
}

.swal-change-values .new{
  color:#27ae60;
  font-weight:600;
}

.swal-version{
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid #ddd;
  font-weight:600;
}

.swal-changes {
  text-align: left;
  font-size: 14px;
}

.swal-change-row {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.swal-change-row:last-child {
  border-bottom: none;
}

.swal-change-label {
  font-weight: 600;
  margin-bottom: 2px;
}

.swal-change-values {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: monospace;
}

.swal-change-values .old {
  color: #b00020;
}

.swal-change-values .new {
  color: #0a7d2c;
}

.swal-change-values .arrow {
  color: #555;
}




/* SweetAlert2 - popup "Enregistrer sous…" */
.ing-swal-popup{
  border-radius: 14px !important;
  padding: 18px 18px 14px !important;
  text-align: left !important;
  overflow: hidden !important;
}
.ing-swal-title{
  margin: 0 0 12px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.ing-swal-popup .swal2-html-container{
  margin: 0 !important;
}
.ing-swal-popup .swal2-input{
  margin: 6px 0 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.ing-swal-popup label{
  display:block;
  margin: 8px 0 2px;
  font-weight: 600;
}
.ing-swal-confirm{
  background:#4f46e5;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
}
.ing-swal-cancel{
  background:#6b7280;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  margin-left:10px;
}


/* =========================================================
   UI — 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; }



/* =========================================================
   LAYOUT — GRILLES PRINCIPALES
   ========================================================= */

/* Informations : 2x2 */
.info-4grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}

/* Infos techniques : grille 3 colonnes */
.tech-6grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}


/* =========================================================
   CADRES / CARTES (styles génériques)
   ========================================================= */

/* Carte principale (cadre externe) */
.info-card{
  border:2px solid #222;
  border-radius:14px;
  background:#fbfbfb;
  padding:0;
  overflow:hidden;
  min-height:160px;
  display:flex;
  flex-direction:column;
}

/* Bandeau titre */
.info-card h4{
  margin:0;
  padding:10px 12px;
  font-size:16px;
  font-weight:700;
  background:#e9f3ff;
  border-bottom:1px solid #222;
}

/* Corps */
.info-body{
  padding:12px;
  color:#444;
}

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


/* =========================================================
   BLOCS “PETIT / GRAND” (Identification & Classification)
   ========================================================= */

/* Grilles */
.identification-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:10px;
}
.classif-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Base commune aux “petits/grands” */
.box-card{
  border:2px solid #333;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}

/* Variantes */
.box-card--small{
  padding:10px;
  min-height:70px;
}
.box-card--large{
  padding:12px;
  min-height:130px;
  grid-column: 1 / -1; /* utile quand placé dans une grille 2 colonnes */
}


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

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



/* =========================================================
   BOUTON ENREGISTREMENT
   ========================================================= */
.ing-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  position:sticky;
  top:10px;
  z-index:50;
}
.ing-actions-left, .ing-actions-right{ display:flex; gap:10px; align-items:center; }


/* =========================================================
   PARAMÉTRAGE — BLOC + LIGNES
   ========================================================= */
.param-block{
  border:2px solid #222;
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
}
.param-line{
  display:grid;
  grid-template-columns: 260px 1fr;
  align-items:center;
  padding:8px 0;
}
.param-label{
  font-weight:600;
  color:#222;
}
.param-value{
  color:#111;
}
.param-value em{
  color:#777;
  font-style:italic;
  margin-left:6px;
}


/* =========================================================
   TECHNIQUE — LIGNES / TEXTBOX / SELECT
   ========================================================= */
.tech-line{ margin-bottom:12px; }
.tech-line:last-child{ margin-bottom:0; }

.tech-line strong{
  display:block;
  margin-bottom:4px;
  font-weight:600;
}

.tech-textbox{
  border:1px solid #ccc;
  border-radius:6px;
  padding:8px;
  min-height:60px;
  background:#fafafa;
  color:#555;
}
.tech-textbox.short{ min-height:34px; }

.tech-select{
  width:100%;
  border:1px solid #ccc;
  border-radius:6px;
  padding:8px;
  background:#f7f7f7;
  color:#555;
}

/* Forcer le sous-cadre à remplir la hauteur dans la grille technique */
.tech-6grid .info-body{
  flex:1;
  display:flex;
  flex-direction:column;
}
.tech-6grid .inner-subcard{ flex:1; }

/* Attestation */
.attestation-line{
  display:flex;
  align-items:center;
  gap:15px;
}
.attestation-label{ min-width:160px; }
.attestation-radios label{ cursor:default; }

/* Icône PDF */
.pdf-icon{
  margin-left:10px;
  font-size:18px;
  cursor:default;
}


/* =========================================================
   INFORMATIONS NUTRITIONNELLES
   ========================================================= */
/* bouton déplier tout */
.nutri-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* bouton à gauche, filtres à droite */
  gap:10px;
  padding:8px 12px;
  background:#fff;
  flex-wrap:wrap;                  /* propre sur petit écran */
}


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

/* Filtres à droite */
.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);
}

/* Checkbox compacte */
.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;
}

/* Zone body centrée */
.nutri-body{
  display:flex;
  justify-content:center;
}

/* Wrapper scrollable si jamais ça dépasse */
.nutri-wrap{
  background:#fff;
  border:2px solid #222;
  border-radius:14px;
  padding:12px;
  overflow:auto;
  width:fit-content;    /* fit-content */
  max-width:100%;
  margin:0 auto;
}

/* Dégradé visuel par niveau (0 > 1 > 2 > 3) */
.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;
}
.nutri-row.level-0 td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nutri-row.level-0 {
  background: rgba(0,0,0,0.03);
}
/* Fonds par niveau (nouvelle hiérarchie visuelle) */

/* Niveau 0 : ancien niveau 1 */
.nutri-row.level-0{
  background:#f6f7f9;
}

/* Niveau 1 : ancien niveau 2 */
.nutri-row.level-1{
  background:#fbfbfc;
}

/* Niveau 2 et + : blanc strict */
.nutri-row.level-2,
.nutri-row.level-3{
  background:#ffffff;
}


/* Tableau : s’adapte au contenu (pas full width) */
.nutri-table{
  width:auto;           /* <= clé de l’option B */
  max-width:1100px;
  margin:0 auto;
  border-collapse:collapse;
  table-layout:auto;
}

/* Hiérarchie + repli/dépli nutrition */
.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; }
.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; }
/* check box */
.nutri-filter-hidden { display:none; }
.nutri-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.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 (si tu veux garder le 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;
}
/* ===== Étape 1 — Infos nutritionnelles : enlever le cadre externe ===== */

/* on garde la structure HTML mais on supprime le "cadre carte" */
.info-card.nutri-card{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  overflow:visible;
  min-height:0;
}

/* on masque le titre "Informations nutritionnelles" */
.info-card.nutri-card > h4{
  display:none;
}

/* on enlève le padding du body pour éviter le double encadrement */
.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;                /* le padding doit être géré par le tableau */
}

/* 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 : même bleu, et coins arrondis */
.inner-subcard.nutri-subcard .nutri-table thead th{
  background:#f1f7fd;       /* bleu doux */
  border-bottom:1px solid #bbb;
}

/* Arrondir les coins du bandeau */
.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;
}

/* Redonner un padding interne propre aux cellules */
.inner-subcard.nutri-subcard .nutri-table th,
.inner-subcard.nutri-subcard .nutri-table td{
  padding:10px 12px;
}

/* =========================================================
   ALLERGÈNES — CARTE COMPACTE (propre, sans doublons)
   ========================================================= */

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

  /* 🔑 largeur maîtrisée */
  width:fit-content;
  min-width:1100px;    /* largeur “normale” du tableau */
  max-width:100%;

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



/* Une ligne = 3 colonnes */
.alg-row{
  display:grid;
  grid-template-columns: 120px 540px 540px;
  border-top:1px solid #bbb;
}
.alg-row:first-child{ border-top:0; }

/* Nom allergène */
.alg-name{
  padding:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  border-right:1px solid #bbb;
  background:#f3f1ea;
}

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


/* Bandeau titre interne */
.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;
}

/* champs texte des allergènes */
.alg-field input[type="text"]{
  border: 0;
  outline: none;
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* Sous-lignes */
/* Alignement vertical cohérent des sous-lignes allergènes */
.alg-subline {
  display: flex;
  align-items: center;   /* 🔑 clé du centrage vertical */
  gap: 12px;
  min-height: 32px;      /* évite les sauts visuels */
}

.alg-subline span{ font-weight:700; }
.alg-text{ font-weight:400; }

/* Responsive */
@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-col--vol{ background:#fff; }
.alg-col{ background:#fff; }
.alg-name{
  justify-content:center;  /* centre horizontal */
  text-align:center;
}

.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;
}
/* =========================================================
   HISTORIQUE — CARTE + TABLEAU (style comme les autres cadres)
   Objectif : bandeau bleu arrondi + cadre unique
   ========================================================= */

/* On neutralise la carte externe pour éviter double cadre */
.info-card.hist-card{
  border:none;
  background:transparent;
  padding:0;
  overflow:visible;
  min-height:0;
}
.info-card.hist-card .info-body{ padding:0; }

/* La vraie "carte" devient l'inner-subcard */
.hist-subcard{
  border:2px solid #222;
  border-radius:14px;     /* comme tes autres cartes */
  background:#fff;
  overflow:hidden;        /* pour que le bandeau bleu suive l’arrondi */
  padding:0;              /* on gère padding dans le contenu */
}





/* --- Tableau --- */
.hist-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}

/* En-tête du tableau Historique (bleu + arrondis) */
.hist-table thead th{
  background:#e9f3ff;
  border-bottom:1px solid #222;
  padding:10px 12px;
  font-weight:700;
  font-size:14px;
}

/* Arrondis haut gauche / haut droit */
.hist-table thead th:first-child{
  border-top-left-radius:12px;
}
.hist-table thead th:last-child{
  border-top-right-radius:12px;
}


/* Cellules */
.hist-table td{
  border-bottom:1px solid #e6e6e6;
  padding:10px 12px;
  vertical-align:top;
  font-size:13px;
  color:#333;
}

.hist-table tbody tr:hover td{
  background:#f7fbff;
}

/* Alignements colonnes : 1-4 centrées, 5 à gauche */
.hist-table th:nth-child(1),
.hist-table td:nth-child(1),
.hist-table th:nth-child(2),
.hist-table td:nth-child(2),
.hist-table th:nth-child(3),
.hist-table td:nth-child(3),
.hist-table th:nth-child(4),
.hist-table td:nth-child(4){
  text-align:center;
  vertical-align:middle;
}

.hist-table th:nth-child(5),
.hist-table td:nth-child(5){
  text-align:left;
  vertical-align:top;
}

/* Liste des changements */
.hist-changes{
  margin:0;
  padding-left:18px;
}
.hist-changes li{
  margin:2px 0;
  line-height:1.35;
}

.hist-muted{
  color:#777;
  font-style:italic;
}
/* Historique : blocs regroupés */
.hist-block{ margin:0; }
.hist-block + .hist-block{ margin-top:10px; }

.hist-block-title{
  font-weight:700;
  margin:2px 0 6px;
  color:#222;
}

.hist-subblock{
  margin:6px 0 0;
  padding:6px 8px;
  border:1px solid #e6e6e6;
  border-radius:10px;
  background:#fafafa;
}

.hist-subblock-title{
  font-weight:700;
  margin:0 0 4px;
}
/* Historique : lignes alternées */
.hist-table tbody tr:nth-child(even) td{
  background:#fafafa;
}
/* =========================
   BASE PROPRE (scopée plugin)
   ========================= */
.kl-ingredients{
  color:#222;
}

.kl-ingredients .ing-list-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.kl-ingredients .ing-list-filters{
  flex: 1 1 680px;
  min-width: 260px;
}

.kl-ingredients .ing-list-actions{
  flex: 0 0 auto;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Alphabet */
.kl-ingredients #alphabet-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.kl-ingredients .alpha-btn{
  border:1px solid #d1d5db;
  background:#fff;
  padding:4px 8px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
}
.kl-ingredients .alpha-btn.active{
  background:#0b6fa4;
  border-color:#0b6fa4;
  color:#fff;
}

/* Selects + recherche */
.kl-ingredients #select-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.kl-ingredients #select-filters input[type="text"],
.kl-ingredients #select-filters select{
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:8px;
}

/* Table */
.kl-ingredients .ing-table-wrap{
  margin-top: 8px;
  overflow-x:auto;
}

.kl-ingredients #ingredients-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}

.kl-ingredients #ingredients-table th,
.kl-ingredients #ingredients-table td{
  padding:8px 10px;
  border-bottom:1px solid #e5e7eb;
  vertical-align:middle;
}

.kl-ingredients #ingredients-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background:#0b6fa4;
  color:#fff;
}

.kl-ingredients #ingredients-table tbody tr:nth-child(even){
  background:#f7fbff;
}
/* Mode "seul le tableau défile" */
body.kl-ing-lock {
  overflow: hidden; /* la page ne scroll plus */
}

/* la zone qui scrolle */
body.kl-ing-lock .ing-table-wrap {
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* en-tête du tableau figé dans la zone scrollable */
body.kl-ing-lock #ingredients-table thead th {
  position: sticky;
  top: 0;
  z-index: 30;
}