/* ============================================================================
 * paramIngredient.css — TripCooking · « Paramètres des ingrédients »
 * ----------------------------------------------------------------------------
 * Refonte v2 : thème SOMBRE « épices marocaines ». Structure repensée
 *   - barre de configuration en 3 groupes (Classification / Recette / Structure)
 *   - bandeau résumé (emblème + métriques)
 *   - compartiments en cartes autonomes (<details> repliables)
 *   - étapes en grille
 * Tous les hooks HTML/JS sont conservés (ids, classes, [hidden], data-*).
 * Astuce clé : les jetons de « surface claire » (--card, --field, --text…) sont
 * REDÉFINIS dans le scope des cartes de modales, si bien que les mêmes règles
 * s'affichent sombres sur la page et claires dans les modales, sans dupliquer.
 * ========================================================================== */

:root{
  /* --- Épices (accents partagés) --- */
  --saffron:#E8A33D;
  --harissa:#C6402E;
  --harissa-2:#E0563E;

  --primary:var(--harissa);
  --primary-deep:#9E2E1D;
  --primary2:var(--saffron);
  --primary-soft:rgba(232,163,61,.14);
  --primary-soft-2:rgba(232,163,61,.22);

  --ok:#5FBF7A;
  --danger:#E0565B;
  --danger-soft:rgba(224,86,91,.16);

  /* --- Surfaces SOMBRES (page) --- */
  --ink:#0F0E13;
  --ink-2:#17161D;
  --bg:var(--ink);
  --card:#1E1D26;
  --card-strong:#26242F;
  --field:#26242F;
  --border:#2E2C39;
  --border-2:#242230;
  --border-strong:rgba(232,163,61,.5);

  --text:#F3F0EA;
  --muted:#9B98A8;
  --muted-2:#6C6A78;

  --shadow:0 18px 40px -22px rgba(0,0,0,.75);
  --shadow2:0 10px 30px -18px rgba(0,0,0,.7);
  --shadow-pop:0 34px 80px -24px rgba(0,0,0,.85);

  --r:18px; --r2:22px; --rsm:14px;
  --focus:0 0 0 3px rgba(232,163,61,.24);

  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  font-family:var(--ui);
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(232,163,61,.12), transparent 60%),
    radial-gradient(900px 480px at 0% 4%, rgba(198,64,46,.12), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }
button{ cursor:pointer; border:0; background:none; color:inherit; }
[hidden]{ display:none !important; }

@keyframes tcSpin{ to{ transform:rotate(360deg); } }
@keyframes tcPopIn{ from{ opacity:0; transform:translateY(8px) scale(.975); } to{ opacity:1; transform:none; } }
@keyframes tcFade{ from{ opacity:0; } to{ opacity:1; } }


/* =========================================================
   WRAPPER
========================================================= */
.parametre-bg{ min-height:100vh; padding:26px 20px 120px; }
.parametre-shell{ max-width:1240px; margin:0 auto; }
.param-page{ margin-top:8px; }


/* =========================================================
   FIL D'ARIANE + TITRE
========================================================= */
.ps-crumb{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--muted-2); margin:2px 2px 14px; flex-wrap:wrap; }
.ps-crumb a{ color:var(--muted-2); }
.ps-crumb a:hover{ color:var(--muted); }
.ps-crumb .sep{ color:var(--muted-2); opacity:.6; }
.ps-crumb b{ color:var(--saffron); font-weight:700; }

.ps-pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 2px 22px; }
.ps-pagehead__ttl h1{ margin:0; font-size:32px; font-weight:800; letter-spacing:-.02em; }
.ps-pagehead__sub{ margin-top:6px; display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; }
.ps-pagehead__acts{ display:flex; align-items:center; gap:10px; }


/* =========================================================
   BOUTONS
========================================================= */
.tc-btn,.option-btn,.btnSmall,.post-button,.tc-qty__submit,.etapePhoto-submit,.etapePhoto-cancel{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:10px 15px; border-radius:12px; font-weight:700; white-space:nowrap;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease, border-color .12s ease;
}
.tc-btn,.option-btn,.btnSmall,.etapePhoto-cancel{
  background:var(--card-strong); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow2);
}
.tc-btn:hover,.option-btn:hover,.btnSmall:hover,.etapePhoto-cancel:hover{
  transform:translateY(-1px); border-color:var(--muted-2);
}
.tc-btn-primary,.post-button,.tc-qty__submit,.etapePhoto-submit{
  border:none; color:#1a0f0a;
  background:linear-gradient(135deg,var(--harissa),var(--saffron));
  box-shadow:0 14px 28px -12px rgba(232,163,61,.7);
}
.tc-btn-primary:hover,.post-button:hover,.tc-qty__submit:hover,.etapePhoto-submit:hover{
  transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 18px 34px -12px rgba(232,163,61,.8);
}
.tc-btn:active,.option-btn:active,.tc-btn-primary:active,.post-button:active{ transform:translateY(0); }
.tc-btn-wide{ width:100%; }
.tc-btn:disabled,.tc-btn-primary:disabled,.post-button:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }

/* Enregistrer (haut + liste) : rouge harissa marqué */
#psSaveTop, .ps-save, #psSaveList{
  background:linear-gradient(135deg,var(--harissa),var(--harissa-2)) !important;
  box-shadow:0 14px 28px -12px rgba(198,64,46,.7) !important; color:#fff !important; border:none !important;
}
#psSaveTop:hover, .ps-save:hover, #psSaveList:hover{ filter:brightness(1.05); transform:translateY(-1px); }


/* =========================================================
   BADGES
========================================================= */
.parametre-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:999px;
  background:var(--card-strong); border:1px solid var(--border);
  color:var(--text); font-weight:700; font-size:13px;
}
.parametre-badgeBtn{ background:rgba(232,163,61,.14); border-color:rgba(232,163,61,.3); cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease; }
.parametre-badgeBtn:hover{ transform:translateY(-1px); background:rgba(232,163,61,.22); border-color:rgba(232,163,61,.5); }


/* =========================================================
   BARRE DE CONFIGURATION (3 groupes étiquetés)
========================================================= */
.param-config{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 22px; }
.cfg-group{ background:var(--ink-2); border:1px solid var(--border-2); border-radius:var(--r); padding:14px 16px; }
.cfg-group__lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.cfg-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.cfg-chips .tc-btn,.cfg-chips .option-btn{ min-height:38px; padding:8px 13px; border-radius:11px; font-size:13.5px; }
.cfg-chips .parametre-badge{ font-size:13px; }


/* =========================================================
   BANDEAU RÉSUMÉ (emblème + métriques)
========================================================= */
.param-summary{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  padding:20px 22px; margin:0 0 22px; position:relative; overflow:hidden;
  background:
    radial-gradient(520px 260px at 92% 130%, rgba(198,64,46,.20), transparent 60%),
    linear-gradient(135deg,#211a17,#181620 60%);
  border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow);
}
.ps-emblem{ display:flex; align-items:center; gap:16px; min-width:0; }
.ps-emblem__media{ width:96px; height:96px; flex:0 0 auto; border-radius:18px; overflow:hidden;
  border:1px solid var(--border); background:rgba(232,163,61,.08); background-size:cover; background-position:center; box-shadow:var(--shadow2); }
.ps-emblem__id{ min-width:0; }
.ps-emblem__cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--saffron); }
.ps-emblem__ttl{ margin:6px 0 10px; font-size:26px; font-weight:800; letter-spacing:-.015em; line-height:1.05; }
.ps-emblem__badges{ display:flex; flex-wrap:wrap; gap:8px; }

.ps-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ps-metric{ position:relative; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:13px 14px; }
.ps-metric b{ font-size:26px; font-weight:800; line-height:1; display:block; letter-spacing:-.01em; }
.ps-metric span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; display:block; }
.ps-metric .barmini{ height:6px; border-radius:999px; background:var(--ink-2); margin-top:10px; overflow:hidden; }
.ps-metric .barmini i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--harissa),var(--saffron)); }
.ps-metric .param-icon-btn{ position:absolute; top:8px; right:8px; }


/* =========================================================
   CARTES GÉNÉRIQUES
========================================================= */
.param-card{
  background:var(--card); border:1px solid var(--border-2); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:visible;
}
.param-card + .param-card{ margin-top:18px; }
.param-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--border-2);
}
.param-card__title{ display:flex; align-items:center; gap:11px; min-width:0; }
.param-card__title h2,.param-card__title h3{ margin:0; font-size:1.02rem; font-weight:800; }
.param-icon{ width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
  background:rgba(232,163,61,.16); color:var(--saffron); font-weight:800; }
.param-icon-btn{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  color:var(--muted); transition:background .12s ease, color .12s ease; }
.param-icon-btn:hover{ background:rgba(232,163,61,.12); color:var(--text); }
.param-muted{ color:var(--muted); font-weight:600; }


/* =========================================================
   RECHERCHE (composer la liste)
========================================================= */
.tc-inline-search{ position:relative; padding:16px 18px; display:flex; align-items:center; gap:11px; }
.tc-inline-search .tc-muted{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--harissa),var(--saffron)); color:#1a0f0a; font-weight:700; }

.form-control{
  width:100%; border-radius:12px; border:1px solid var(--border);
  background:var(--field); padding:12px 13px; outline:none; color:var(--text);
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.form-control::placeholder{ color:var(--muted-2); }
.form-control:focus{ border-color:var(--border-strong); box-shadow:var(--focus); }
.tc-inline-search input[type="search"],.tc-inline-search .chercheIngredient{ height:46px; padding:0 15px; }

#resultatsIngredients.results{
  margin:0 18px 16px; padding:10px; border-radius:14px;
  border:1px solid var(--border); background:var(--card-strong);
  box-shadow:var(--shadow); max-height:320px; overflow:auto; display:none;
}
#resultatsIngredients.results ul{ list-style:none; margin:0; padding:0; }
#resultatsIngredients.results li{ display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:12px; cursor:pointer; transition:background .12s ease, transform .10s ease; }
#resultatsIngredients.results li:hover{ background:rgba(232,163,61,.10); transform:translateY(-1px); }


/* =========================================================
   COMPARTIMENTS — cartes autonomes repliables (<details>)
========================================================= */
.param-comps-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:8px 2px 14px; flex-wrap:wrap; }
.param-comps-head h3{ margin:0; font-size:20px; font-weight:800; }
.param-comps-head .hint{ font-size:12.5px; color:var(--muted-2); }
.param-comps{ display:flex; flex-direction:column; gap:16px; margin:0 0 30px; }

.pc-comp{ border:1px solid var(--border-2); border-radius:var(--r); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow); border-left:4px solid var(--spine,var(--saffron)); }

.pc-head{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:15px 18px; cursor:pointer; list-style:none;
  background:linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.015)); }
.pc-head::-webkit-details-marker{ display:none; }
.pc-title{ display:flex; align-items:center; gap:11px; min-width:0; }
.pc-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.pc-nm{ font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-n{ font-family:var(--mono); font-size:11px; background:var(--ink-2); border:1px solid var(--border); padding:3px 9px; border-radius:999px; color:var(--muted); }
.pc-fill{ display:flex; align-items:center; gap:10px; justify-self:center; min-width:190px; }
.pc-fill__t{ font-size:11.5px; color:var(--muted); white-space:nowrap; font-family:var(--mono); }
.pc-bar{ flex:1; height:6px; border-radius:999px; background:var(--ink-2); overflow:hidden; min-width:70px; }
.pc-bar i{ display:block; height:100%; }
.pc-chev{ color:var(--muted-2); font-size:14px; transition:transform .18s ease; }
.pc-comp[open] .pc-chev{ transform:rotate(180deg); }

.pc-actions{ display:flex; gap:8px; padding:0 18px 4px; margin-top:12px; }
.pc-add{ min-height:36px; padding:7px 13px; border-radius:10px; font-size:12.5px;
  border-color:color-mix(in srgb, var(--spine,var(--saffron)) 45%, var(--border)); }
.pc-add:hover{ border-color:var(--spine,var(--saffron)); }

.pc-body{ padding:8px 14px 14px; }

/* Tableau linéarisé en lignes-cartes (on garde <table>/<tr>/<td> pour le JS) */
.pc-body .param-table-wrap{ overflow:visible; border:0; background:transparent; border-radius:0; }
.pc-body .ingredientTable{ display:block; width:100%; min-width:0; border-collapse:separate; border-spacing:0; }
.pc-body .ingredientTable thead{ display:none; }
.pc-body .ingredientTable tbody{ display:flex; flex-direction:column; gap:9px; }
.pc-body .ing-group{ display:none !important; } /* en-tête de groupe remplacé par l'en-tête de carte */

.pc-body tr.ing-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 13px; border-radius:var(--rsm);
  background:var(--card-strong); border:1px solid var(--border-2);
  border-left:3px solid var(--spine,transparent);
  transition:transform .12s ease, border-color .12s ease;
}
.pc-body tr.ing-row:hover{ transform:translateX(2px); border-color:var(--border); }
.pc-body tr.ing-row td{ display:block; padding:0; border:0; background:transparent; }
.pc-body tr.ing-row td:nth-child(1){ flex:0 0 auto; }                 /* image */
.pc-body tr.ing-row td:nth-child(2){ flex:1 1 auto; min-width:120px; font-weight:700; color:var(--text); } /* nom */
.pc-body tr.ing-row td:nth-child(3){ flex:0 0 auto; }                 /* gramme */
.pc-body tr.ing-row td:nth-child(4){ flex:0 0 auto; color:var(--muted); } /* unité */
.pc-body tr.ing-row td:nth-child(5){ flex:0 0 auto; }                 /* compartiment (select) */
.pc-body tr.ing-row td:nth-child(6){ flex:0 0 auto; margin-left:auto; } /* actions */

/* image d'ingrédient */
.imageColumn{ width:auto; }
.ingredientImageWrapper{ position:relative; width:52px; height:52px; border-radius:13px; overflow:hidden;
  border:1px solid var(--border); background:rgba(232,163,61,.10); }
.ingredientAvatar{ width:100%; height:100%; object-fit:cover; }
.editOverlay{ position:absolute; inset:auto 0 0 0; padding:3px 4px; border-radius:0;
  background:rgba(15,14,19,.78); border-top:1px solid var(--border); font-size:.66rem; font-weight:700; text-align:center;
  color:var(--saffron); opacity:0; transition:opacity .15s ease; }
.ingredientImageWrapper:hover .editOverlay{ opacity:1; }

/* gramme + liens modifier */
.js-gramme-valeur{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:.92rem;
  background:var(--ink-2); border:1px solid var(--border); border-radius:9px; padding:6px 10px; min-width:52px; text-align:center; }
.modificationGramme,.btnParametreType{ display:inline-block; margin-left:8px; color:var(--saffron); font-weight:700; font-size:.8rem;
  border-bottom:1px dashed rgba(232,163,61,.45); }
.modificationGramme:hover,.btnParametreType:hover{ color:var(--harissa-2); }

/* select compartiment (déplacer) */
.selectPreparation{ min-width:150px; padding:9px 32px 9px 12px; border-radius:11px;
  border:1px solid var(--border); background:var(--field); color:var(--text); outline:none; font-weight:600; font-size:12.5px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center;
  transition:border-color .14s ease, box-shadow .14s ease; }
.selectPreparation:focus{ border-color:var(--border-strong); box-shadow:var(--focus); }

/* supprimer */
.btnDelete,.supprimerIngredient{ display:inline-flex; align-items:center; gap:6px; color:var(--harissa-2) !important; font-weight:700;
  padding:7px 11px; border-radius:10px; border:1px solid transparent; white-space:nowrap; font-size:12.5px;
  transition:background .12s ease, border-color .12s ease; }
.btnDelete:hover,.supprimerIngredient:hover{ background:var(--danger-soft); border-color:rgba(224,86,91,.28); }


/* =========================================================
   ÉTAPES (grille)
========================================================= */
.param-steps{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px 18px 18px; }
.param-steps > .param-muted{ grid-column:1/-1; padding:16px 4px; text-align:center; }
.step-card{ background:var(--card-strong); border:1px solid var(--border-2); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow2); }
.step-card-body{ display:flex; flex-direction:column; gap:10px; }
.step-header{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.step-number{ font-weight:700; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--saffron);
  background:rgba(232,163,61,.16); border:1px solid rgba(232,163,61,.32); border-radius:999px; padding:4px 11px; font-family:var(--mono); }
.step-header .btnSmall{ margin-left:auto; min-height:32px; padding:6px 11px; border-radius:10px; font-size:.78rem; }
.step-header .editStepBtn{ color:var(--saffron); font-weight:700; font-size:.8rem; }
.step-text{ color:#dcd9e2; line-height:1.55; font-size:.92rem; }
.step-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--border-2); }
.sp-play{ border:1px solid var(--border); background:var(--ink-2); padding:9px 12px; border-radius:11px; color:var(--saffron);
  font-weight:700; transition:transform .12s ease, background .12s ease; }
.sp-play:hover{ transform:translateY(-1px); background:rgba(232,163,61,.1); }
.sp-status{ color:var(--muted); font-weight:700; font-family:var(--mono); font-size:.78rem; }


/* =========================================================
   PRIMITIVES DE FORMULAIRE (communes à toutes les modales)
========================================================= */
.tc-stack{ display:flex; flex-direction:column; gap:12px; }
.form-group{ display:flex; flex-direction:column; gap:7px; }
.form-group > label,
.form-group .param-muted{ font-weight:700; font-size:.9rem; color:var(--text); }
.form-group .param-muted{ color:var(--muted); }

textarea.form-control{ min-height:110px; resize:vertical; line-height:1.5; }
select.form-control{ -webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; }
input[type="number"].form-control{ font-variant-numeric:tabular-nums; }

/* ligne « total » (modale Temps) */
.param-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:12px; background:var(--primary-soft); border:1px solid rgba(232,163,61,.22); }
.param-meta{ display:flex; flex-direction:column; gap:2px; }
.param-meta .param-muted{ font-size:.8rem; }
.param-meta b{ font-weight:800; font-size:1.15rem; color:var(--primary-deep); font-family:var(--mono); }

/* choix radio en cartes (modale Difficulté) */
.param-choice{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--field); cursor:pointer; font-weight:700;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.param-choice:hover{ border-color:rgba(232,163,61,.45); background:rgba(232,163,61,.06); }
.param-choice input[type="radio"]{ width:20px; height:20px; accent-color:var(--saffron); flex:0 0 auto; cursor:pointer; }
.param-choice:has(input:checked){ border-color:var(--saffron); background:var(--primary-soft-2); box-shadow:var(--focus); }
.param-choice:has(input:focus-visible){ box-shadow:var(--focus); }

/* messages d'erreur inline */
.erreurType,.erreurEtape,.erreurTemps,.erreurDifficulte,.erreurCompartiment,.erreurMateriel,.erreurGeoloc,.tc-qty__error,.etapePhoto-message{
  min-height:0; color:var(--danger); font-weight:700; font-size:.86rem; }
.erreurType:not(:empty),.erreurEtape:not(:empty),.erreurTemps:not(:empty),.erreurDifficulte:not(:empty),
.erreurCompartiment:not(:empty),.erreurMateriel:not(:empty),.erreurGeoloc:not(:empty),.tc-qty__error:not(:empty){
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:var(--danger-soft); border:1px solid rgba(224,86,91,.28); }
.erreurType:not(:empty)::before,.erreurEtape:not(:empty)::before,.erreurTemps:not(:empty)::before,
.erreurDifficulte:not(:empty)::before,.erreurCompartiment:not(:empty)::before,.erreurMateriel:not(:empty)::before,
.erreurGeoloc:not(:empty)::before,.tc-qty__error:not(:empty)::before{ content:"⚠"; font-size:.95rem; }

/* loaders */
.loaderType,.loaderEtape,.loaderTemps,.loaderDifficulte,.loaderCompartiment,.loaderMateriel,.loaderGeoloc,
.tc-qty__loader,.etapePhoto-loader{ display:flex; justify-content:center; align-items:center; padding:4px 0; }
.loaderType img,.loaderEtape img,.loaderTemps img,.loaderDifficulte img,.loaderCompartiment img,.loaderMateriel img,.loaderGeoloc img,
.tc-qty__loader img,.etapePhoto-loader img,#loaderEtape img,#loader-photoEtape img{
  width:30px; height:30px; animation:tcSpin .9s linear infinite; }

.submitEtape,.submitType,.submitPart{ display:flex; }
.submitEtape .tc-btn-wide,.submitType input[type="submit"],.submitPart input[type="submit"]{ width:100%; }


/* =========================================================
   SYSTÈME DE MODALES — overlay + conteneur + carte
   (les cartes REDÉFINISSENT les jetons de surface en CLAIR)
========================================================= */
body.modal-open{ overflow:hidden; }

.param-overlay,.tc-qty__overlay,#qtyOverlay,.etapePhoto-overlay{
  position:fixed; inset:0; z-index:9998; background:rgba(6,4,10,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:tcFade .18s ease; }
.param-overlay[hidden],.tc-qty__overlay[hidden],#qtyOverlay[hidden],.etapePhoto-overlay[hidden]{ display:none !important; }

.param-modal,.tc-modal,.modalParametre,#qtyModal,.etapePhoto-modal{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:18px; }
.param-modal[hidden],.tc-modal[hidden],.modalParametre[hidden],#qtyModal[hidden],.etapePhoto-modal[hidden]{ display:none !important; }
.param-modal--with-bg,.modalParametre{ background:rgba(6,4,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

/* CARTES DE MODALES — surface claire (retour des jetons clairs dans ce scope) */
.param-modal__card,.tc-modal__card,.modalParametreContent,.tc-qty__card,.etapePhoto-card{
  --card:rgba(255,255,255,.80);
  --card-strong:rgba(255,255,255,.97);
  --field:#ffffff;
  --border:rgba(120,80,200,.16);
  --border-2:rgba(31,26,42,.08);
  --border-strong:rgba(232,163,61,.55);
  --text:#1f1a2a;
  --muted:rgba(31,26,42,.62);
  --muted-2:rgba(31,26,42,.46);

  position:relative; width:min(620px,100%); max-width:100%; max-height:90vh; overflow:auto; margin:auto;
  color:var(--text);
  background:var(--card-strong); border-radius:22px; border:1px solid rgba(60,40,90,.14);
  box-shadow:var(--shadow-pop); padding:22px 22px 20px;
  animation:tcPopIn .22s cubic-bezier(.2,.8,.2,1);
  scrollbar-width:thin; scrollbar-color:var(--saffron) transparent; overscroll-behavior:contain;
}
.param-modal__card::-webkit-scrollbar,.tc-modal__card::-webkit-scrollbar,.modalParametreContent::-webkit-scrollbar,
.tc-qty__card::-webkit-scrollbar,.etapePhoto-card::-webkit-scrollbar{ width:10px; }
.param-modal__card::-webkit-scrollbar-thumb,.tc-modal__card::-webkit-scrollbar-thumb,.modalParametreContent::-webkit-scrollbar-thumb,
.tc-qty__card::-webkit-scrollbar-thumb,.etapePhoto-card::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--harissa),var(--saffron)); border:2px solid transparent; border-radius:999px; background-clip:padding-box; }

.param-modal__card--xs{ width:min(560px,100%); }
.param-modal__card--sm{ width:min(520px,100%); }
.param-modal__card--md{ width:min(680px,100%); }
.param-modal__card--lg{ width:min(720px,100%); max-height:min(86vh,820px); }

#modalTemps .tc-modal__card,#difficulteModal .tc-modal__card{ width:min(520px,100%); }
#compartimentsModal .tc-modal__card{ width:min(620px,100%); }
#equipmentModal .tc-modal__card{ width:min(720px,100%); max-height:min(86vh,820px); }
#etapeModal .tc-modal__card{ width:min(680px,100%); }

/* en-têtes de modales */
.param-modal__header,.tc-modal__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:55px; }
.param-modal__titleRow,.tc-modal__titleRow{ display:flex; align-items:center; gap:10px; }
.param-modal__titleRow .param-icon,.tc-modal__titleRow .param-icon{ width:38px; height:38px; border-radius:13px; font-size:1.1rem;
  background:rgba(232,163,61,.18); color:var(--harissa); }
.param-modal__title,.tc-modal__title{ margin:0; font-size:20px; font-weight:800; color:var(--text); }
.param-modal__subtitle,.tc-modal__subtitle{ margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--muted); font-weight:500; }
.param-modal__body,.tc-modal__body{ margin-top:16px; }

/* boutons fermer */
.param-modal__close,.tc-modal__close{
  position:absolute; top:14px; right:14px; width:42px; height:42px; border:none; border-radius:13px;
  background:rgba(198,64,46,.12); color:var(--harissa); font-size:22px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .12s ease, transform .12s ease; }
.param-modal__close:hover,.tc-modal__close:hover{ background:rgba(198,64,46,.20); transform:rotate(90deg); }


/* =========================================================
   « param-card » imbriquée dans une modale (Matériel / Compartiments)
========================================================= */
.param-modal__body .param-card,
.tc-modal__card .param-card{ box-shadow:none !important; border:1px solid var(--border) !important;
  border-radius:16px; background:var(--card); }
.param-modal__body .param-card__head,
.tc-modal__card .param-card__head{ padding:12px 14px; }
.param-modal__body .param-card__title h2,
.tc-modal__body .param-card__title h2{ font-size:15px; }


/* =========================================================
   MODALE PARAMÈTRE UNITÉ
========================================================= */
.modalParametreContent{ width:min(520px,100%); padding:18px 18px 16px; }
.modalParametreContent h2{ margin:0 44px 14px 0; font-size:1.15rem; font-weight:800; }
.closeParametre{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  border:1px solid rgba(198,64,46,.2); background:rgba(198,64,46,.12); color:var(--harissa); font-size:22px; line-height:1;
  transition:background .12s ease, transform .12s ease; }
.closeParametre:hover{ background:rgba(198,64,46,.2); transform:rotate(90deg); }
#parametreForm{ display:flex; flex-direction:column; gap:12px; }
#parametreForm label{ font-weight:700; color:var(--text); font-size:.92rem; }
#parametreForm select,#typeQuantite{ width:100%; border-radius:12px; border:1px solid var(--border);
  background:var(--field); color:var(--text); padding:11px 38px 11px 12px; outline:none; -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6402E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; }
#parametreForm select:focus,#typeQuantite:focus{ border-color:var(--border-strong); box-shadow:var(--focus); }
.submitType input[type="submit"]{ width:100%; border:none; border-radius:12px; padding:13px 14px; font-weight:800; color:#1a0f0a;
  background:linear-gradient(135deg,var(--harissa),var(--saffron)); box-shadow:0 14px 28px -12px rgba(232,163,61,.6);
  transition:transform .12s ease, filter .12s ease; }
.submitType input[type="submit"]:hover{ transform:translateY(-1px); filter:brightness(1.05); }


/* =========================================================
   MODALE QUANTITÉ
========================================================= */
.tc-qty__card{ width:min(560px,100%); padding:18px 18px 16px; }
.tc-qty__close{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  border:1px solid rgba(198,64,46,.2); background:rgba(198,64,46,.12); color:var(--harissa); font-size:22px; line-height:1;
  transition:background .12s ease, transform .12s ease; }
.tc-qty__close:hover{ background:rgba(198,64,46,.2); transform:rotate(90deg); }
.tc-qty__form{ display:flex; flex-direction:column; gap:12px; }
.tc-qty__title,#qtyTitle{ margin:0 44px 4px 0; font-size:1.2rem; font-weight:800; color:var(--text); }
#qtyIngredientName{ color:var(--harissa); }
#grammeContenu{ font-family:var(--mono); font-size:1.05rem; }


/* =========================================================
   MODALE ÉTAPE
========================================================= */
.etape-modal__card{ width:min(680px,100%); }
.etape-modal__header{ padding-right:55px; margin-bottom:14px; }
.etape-modal__badge,.etapePhoto-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px;
  border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; background:rgba(232,163,61,.16);
  border:1px solid rgba(232,163,61,.32); color:var(--harissa); margin-bottom:8px; }
.etape-modal__title{ margin:0; font-size:20px; font-weight:800; color:var(--text); }
.etape-modal__subtitle{ margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--muted); font-weight:500; }
#etapeContenu.form-control{ min-height:130px; resize:vertical; border-radius:16px; padding:14px; background:rgba(232,163,61,.05); }


/* =========================================================
   MODALE PHOTO ÉTAPE
========================================================= */
.etapePhoto-card{ width:min(560px,100%); padding:0; }
.etapePhoto-close{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(198,64,46,.2); background:rgba(198,64,46,.12); color:var(--harissa); font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .12s ease, transform .12s ease; }
.etapePhoto-close:hover{ background:rgba(198,64,46,.2); transform:rotate(90deg); }
.etapePhoto-header{ padding:24px 22px 14px; text-align:center; }
.etapePhoto-title{ margin:10px 0 6px; font-size:22px; font-weight:800; color:var(--text); }
.etapePhoto-subtitle{ margin:0; font-size:14px; color:var(--muted); font-weight:500; }
#form-photoEtape{ padding:0 22px 20px; }
.etapePhoto-drop{ margin-top:6px; position:relative; }
.etapePhoto-drop input[type="file"]{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.etapePhoto-dropLabel{ width:100%; min-height:104px; border-radius:16px; border:2px dashed rgba(232,163,61,.4);
  background:rgba(232,163,61,.06); display:flex; align-items:center; gap:14px; padding:18px; cursor:pointer;
  transition:border-color .14s ease, background .14s ease, transform .14s ease; }
.etapePhoto-dropLabel:hover{ border-color:var(--saffron); background:rgba(232,163,61,.1); transform:translateY(-1px); }
.etapePhoto-dropIcon{ width:48px; height:48px; border-radius:13px; background:#fff;
  border:1px solid rgba(232,163,61,.24); display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto; }
.etapePhoto-dropText strong{ display:block; font-size:15px; font-weight:800; }
.etapePhoto-dropText span{ display:block; margin-top:4px; font-size:13px; color:var(--muted); font-weight:500; }
.etapePhoto-previewWrap{ margin-top:14px; display:flex; justify-content:center; }
.etapePhoto-preview{ width:min(340px,100%); aspect-ratio:4/3; object-fit:cover; border-radius:16px;
  border:1px solid rgba(232,163,61,.2); box-shadow:0 14px 30px -14px rgba(0,0,0,.4); }
.etapePhoto-message{ margin-top:12px; text-align:center; font-size:14px; font-weight:600; }
.etapePhoto-message:empty{ display:none; }
.etapePhoto-actions{ margin-top:16px; display:flex; gap:12px; }
.etapePhoto-cancel{ flex:1; }
.etapePhoto-submit{ flex:2; }


/* =========================================================
   MODALE COMPARTIMENTS
========================================================= */
#compartimentsModal .param-modal__titleRow .param-icon,
#compartimentsModal .param-icon{ width:38px; height:38px; border-radius:13px; font-size:1.15rem; }
#compartimentsModal .param-modal__body > .param-card{
  box-shadow:none; border:1px solid var(--border); border-radius:16px; background:var(--card); margin:0 0 14px; }
#compartimentsModal .param-card__head{ padding:12px 14px; }
#compartimentsModal .param-card__head h2{ font-size:15px; font-weight:800; }
#compartimentsModal .param-card__head .param-icon{ width:28px; height:28px; border-radius:9px; font-size:14px; }

#compartimentCount,#materielResultCount,#materielLinkedCount,#geolocResultCount{
  font-family:var(--mono); font-weight:700; font-size:12px; color:var(--muted);
  background:rgba(232,163,61,.12); border:1px solid rgba(232,163,61,.2); border-radius:999px; padding:3px 10px; }

#compartimentsList{ display:flex; flex-direction:column; gap:8px; padding:4px 14px 14px; }
#compartimentsList .param-muted{ padding:10px 2px; color:var(--muted); font-weight:700; }
#compartimentsList .comp-item{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  background:var(--card-strong); border:1px solid var(--border); transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
#compartimentsList .comp-item:hover{ border-color:rgba(232,163,61,.4); transform:translateY(-1px); box-shadow:0 10px 22px -14px rgba(0,0,0,.4); }
#compartimentsList .comp-item__ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex:0 0 auto;
  background:rgba(232,163,61,.14); color:var(--harissa); }
#compartimentsList .comp-item__nm{ font-weight:700; font-size:14px; color:var(--text); }

#creerCompartiment{ display:flex; flex-direction:column; gap:12px; margin-top:2px; }
#preparationContenu{ height:48px; }
#creerCompartiment .tc-btn-wide{ height:48px; }

#compartimentLoader{ display:none; justify-content:center; align-items:center; padding:2px 0; }
#compartimentLoader img{ width:28px; height:28px; animation:tcSpin .9s linear infinite; }

#compartimentError:empty{ display:none; }
#compartimentError:not(:empty){ display:flex; align-items:center; gap:8px; color:var(--danger); font-weight:700; font-size:.86rem;
  padding:10px 12px; border-radius:12px; background:var(--danger-soft); border:1px solid rgba(224,86,91,.28); }
#compartimentError:not(:empty)::before{ content:"⚠"; font-size:.95rem; }
#compartimentNotice{ display:none; align-items:center; gap:8px; margin-top:2px; padding:10px 12px; border-radius:12px; font-weight:700; font-size:.86rem; }
#compartimentNotice[data-kind="ok"]{ color:#137a52; background:rgba(31,169,113,.12); border:1px solid rgba(31,169,113,.3); }
#compartimentNotice[data-kind="info"]{ color:var(--harissa); background:rgba(232,163,61,.12); border:1px solid rgba(232,163,61,.3); }


/* =========================================================
   MODALE MATÉRIEL
========================================================= */
#equipmentModal .tc-inline-search{ padding:0; margin-bottom:12px; }
#materielHint,#geolocHint{ font-size:.86rem; }
#resultMateriel,#linkedMateriel{ display:flex; flex-direction:column; gap:8px; padding:0 14px 12px; }
#resultMateriel .param-row,#linkedMateriel .param-row,#equipmentModal .param-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px;
  border-radius:14px; background:var(--card-strong); border:1px solid var(--border); }


/* =========================================================
   MODALE GÉOLOCALISATION
========================================================= */
#geolocModal .param-modal__body > .param-card{
  box-shadow:none; border:1px solid var(--border); border-radius:16px; background:var(--card); }
#resultGeoloc ul{ list-style:none; margin:0; padding:0; }
#resultGeoloc li{ padding:6px 2px; }


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .param-config{ grid-template-columns:1fr; }
  .param-summary{ grid-template-columns:1fr; }
  .ps-metrics{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:900px){
  .param-steps{ grid-template-columns:1fr; }
  .ps-metrics{ grid-template-columns:repeat(2,1fr); }
  .pc-head{ grid-template-columns:1fr auto; row-gap:12px; }
  .pc-fill{ grid-column:1/-1; justify-self:stretch; }
}
@media (max-width:768px){
  .parametre-bg{ padding:18px 12px 100px; }
  .ps-pagehead__ttl h1{ font-size:26px; }
  .ps-emblem__ttl{ font-size:22px; }
  .pc-body tr.ing-row td:nth-child(2){ flex:1 1 100%; order:-1; }
  .pc-body tr.ing-row td:nth-child(6){ margin-left:0; }
  .param-modal,.tc-modal,.modalParametre,#qtyModal,.etapePhoto-modal{ padding:12px; align-items:flex-end; }
  .param-modal__card,.tc-modal__card,.modalParametreContent,.tc-qty__card,.etapePhoto-card{
    width:100%; max-height:92vh; border-radius:22px 22px 16px 16px; }
}
@media (max-width:560px){
  .ps-pagehead{ align-items:stretch; }
  .ps-pagehead__acts{ width:100%; }
  .ps-pagehead__acts .tc-btn{ flex:1; }
  .ps-emblem{ flex-direction:column; align-items:flex-start; }
  .ps-metrics{ grid-template-columns:1fr 1fr; }
  .cfg-chips{ width:100%; }
  .param-modal__header,.tc-modal__header{ padding-right:48px; }
  .param-modal__close,.tc-modal__close,.etapePhoto-close,.tc-qty__close,.closeParametre{ width:38px; height:38px; font-size:20px; }
  .etapePhoto-actions{ flex-direction:column; }
  .etapePhoto-actions > *{ width:100%; }
  .pc-body tr.ing-row td:nth-child(5){ flex:1 1 100%; }
  .selectPreparation{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}