/* =========================================================
   TripCooking — Ingredients (v10)
   Modales unifiées (.is-open) + déclencheurs (boutons/links)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bg-0:#f7f5ff;
  --bg-1:#f3f1fe;
  --panel:#ffffff;
  --panel-2:#faf9ff;

  --ink:#191a2a;
  --muted:#7e7b8c;

  --violet:#6f54ee;
  --violet-2:#8a72ff;
  --ring:rgba(111,84,238,.22);

  --bd:#ece9ff;
  --bd-2:#e6e2ff;

  --shadow:0 14px 30px rgba(33,23,85,.10), 0 3px 10px rgba(33,23,85,.06);

  --r-sm:.7rem;
  --r:1.1rem;

  --gap:16px;
  --gap-lg:24px;

  --page-offset: 92px;   /* ↓ corps de page sous le header */
  --table-offset: 28px;  /* ↓ espace au-dessus du tableau */
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  font:15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
a{ text-decoration:none; color:inherit }

/* Boutons “link-like” par défaut */
button{
  font:inherit; color:inherit; background:none; border:none; padding:0; margin:0;
}
button:focus-visible, a:focus-visible{
  outline:3px solid var(--violet); outline-offset:2px;
}

/* ---------- Containers / layout ---------- */
.container-fluid{ padding:clamp(12px,2vw,24px) }
.corpsListe{ margin-top: var(--page-offset) !important; }
.corpsListe.container-fluid, .container-fluid.corpsListe{ margin-top: var(--page-offset) !important; }

.corpsListe .row{ display:flex; flex-wrap:wrap; gap:var(--gap-lg) }
.ingredientGauche{ min-width:320px; flex:1 1 340px }
.ingredientDroit{ flex:2 1 700px }

/* ---------- Cartes / panneaux ---------- */
.card,
.blocTheme,
.search-container,
.engine-card,
.compartiment-card,
.ingredientTableContainer{
  background:var(--panel);
  border:1px solid var(--bd);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* =========================================================
   SECTION — Moteur + Compartiment
   ========================================================= */
.ingredients-section{ margin-top: var(--gap-lg) }
.section-head{ margin-bottom:12px }
.section-head h2{ margin:0; font-size:20px; font-weight:800 }

.forms-grid{
  display:grid; grid-template-columns: 1.6fr .9fr;
  gap: var(--gap-lg);
}
.engine-card, .compartiment-card{ padding: var(--gap-lg) }

/* Inputs / boutons */
.form-control,
input[type="text"],input[type="number"],input[type="varchar"],select{
  width:100%; height:44px; padding:10px 12px;
  border:1px solid var(--bd-2); border-radius:12px;
  background:#fff; color:var(--ink);
  outline:0; transition:border-color .2s, box-shadow .2s;
}
.form-control::placeholder{ color:#9aa0b6 }
.form-control:focus{ border-color:var(--violet); box-shadow:0 0 0 4px var(--ring) }

.post-button, button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 16px; border-radius:12px;
  border:none; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg,var(--violet),var(--violet-2)); color:#fff;
  transition:transform .2s, filter .2s, box-shadow .2s;
}
.post-button:hover{ transform:translateY(-1px); filter:brightness(1.03) }

/* ---------- Résultats moteur sous le champ ---------- */
#resultatsIngredients{ 
  display:none; margin-top:10px; width:100%; position:relative; z-index:50;
}
#resultatsIngredients.is-open{ display:block; }
#resultatsIngredients ul{
  display:none; list-style:none; margin:0; padding:6px;
  border:1px solid var(--bd); border-radius:14px; background:#fff;
  box-shadow:0 14px 30px rgba(33,23,85,.10), 0 3px 10px rgba(33,23,85,.06);
  max-height:280px; overflow-y:auto;
}
#resultatsIngredients ul.show{ display:block }
#resultatsIngredients li{
  padding:12px 14px; border-radius:10px; font-weight:600; color:#2a2742;
  cursor:pointer; transition:background .18s ease, transform .15s ease;
}
#resultatsIngredients li:hover, #resultatsIngredients li.is-focused{
  background:linear-gradient(90deg,#f6f4ff,#f0edff); color:var(--violet); transform:translateX(3px);
}
#resultatsIngredients li + li{ border-top:1px solid #f3f0ff }

/* Conteneur global résultat sélectionné */
#associeFormIngredient{
  margin-top:16px; padding:18px 20px;
  border:1px solid var(--bd); border-radius:14px; background:var(--panel);
  box-shadow:0 8px 20px rgba(33,23,85,.08); animation:fadeIn .25s ease;
}
#associeFormIngredient .selected-ingredient{
  font-size:1.05rem; font-weight:700; color:var(--violet); margin-bottom:12px; text-align:center;
}
#associeFormIngredient form{ display:flex; flex-direction:column; gap:12px }
#associeFormIngredient input[type="submit"],
#associeFormIngredient button{
  background:linear-gradient(90deg,var(--violet),var(--violet-2));
  color:#fff; border:none; border-radius:10px; padding:12px 16px; font-weight:700;
  cursor:pointer; transition:transform .2s, filter .2s;
}
#associeFormIngredient input[type="submit"]:hover,
#associeFormIngredient button:hover{ transform:translateY(-1px); filter:brightness(1.05) }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

/* =========================================================
   LEFT COLUMN (bloc ingrédients existant)
   ========================================================= */
.blocTheme{ padding:var(--gap-lg) }
.blocTheme h2{ margin:0 0 10px; font-size:18px; font-weight:800 }
.filTitre{
  padding:10px 12px; border:1px dashed var(--bd);
  background:var(--panel-2); color:var(--muted); border-radius:var(--r-sm)
}
.blocDesIngredients{ display:grid; gap:10px; margin-bottom:var(--gap-lg) }
.boucleIngredients{
  padding:10px 12px; border:1px solid var(--bd);
  border-radius:var(--r-sm); background:#fff
}
.ingredientNom{ font-weight:700 }

/* =========================================================
   TABLEAU d’ingrédients
   ========================================================= */
#zoneTableauIngredients{ margin-top: var(--table-offset) }
.ingredientTableContainer{ overflow:hidden; margin-top: var(--table-offset) }

.ingredientTable{
  width:100%; border-collapse:separate; border-spacing:0;
  border-radius:var(--r); overflow:hidden;
}
.ingredientTable thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; font-size:12.5px; font-weight:800; letter-spacing:.2px;
  color:#6b6a88;
  background:linear-gradient(0deg,#faf9ff,#ffffff);
  border-bottom:1px solid var(--bd);
  padding:14px 16px;
}
.ingredientTable tbody td{
  padding:16px; vertical-align:middle; background:#fff;
  border-bottom:1px solid var(--bd);
}
.ingredientTable tbody tr{ transition:background .2s, box-shadow .2s, transform .2s; }
.ingredientTable tbody tr:hover{
  background:#fbfaff; box-shadow:0 8px 18px rgba(30,10,60,.06); transform:translateY(-1px);
}

/* Cellule image & overlay */
.imageColumn{ width:110px }
.ingredientImageWrapper{
  position:relative; width:72px; height:72px; border-radius:14px; overflow:hidden;
  border:1px solid var(--bd-2); background:#faf9ff; display:grid; place-items:center;
}
.ingredientAvatar{ width:100%; height:100%; object-fit:cover }
.editOverlay{
  position:absolute; left:6px; right:6px; bottom:6px; height:32px;
  border-radius:10px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  background:rgba(111,84,238,.96); color:#fff; font-weight:700; font-size:12px;
  opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s;
  cursor:pointer;
}
.ingredientImageWrapper:hover .editOverlay{ opacity:1; transform:translateY(0) }

/* Chips “Modifier” (quantité / paramètre) */
.formulaireQuantite, .btnParametreType{
  display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  font:700 12px/1 ui-sans-serif, system-ui; color:var(--violet);
  background:#f4f1ff; border:1px solid #ede8ff;
  padding:6px 10px; border-radius:999px; text-decoration:none;
  transition: background .2s, border-color .2s, transform .12s;
  cursor:pointer;
}
.formulaireQuantite:hover, .btnParametreType:hover{
  background:#ece7ff; border-color:#dfd7ff; transform:translateY(-1px);
}

/* Select compartiment */
.selectPreparation{
  min-width:240px; height:40px; padding:8px 12px;
  border:1px solid var(--bd-2); border-radius:10px; background:#fff; color:#fff;
  color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.selectPreparation:focus{ border-color:var(--violet); box-shadow:0 0 0 4px var(--ring) }
.ingredientTable td:last-child{ width:130px; text-wrap:nowrap }

/* =========================================================
   MODALES — système unique via .is-open
   (JS ajoute/retire .is-open sur #modalParametre, #modalGramme, #modalImage, #modal-quantite)
   ========================================================= */
.modalParametre, .modalGramme, .modalImage, .modalQuantite{
  position:fixed; inset:0; padding:24px;
  z-index:9999;

  /* état fermé */
  display:block; opacity:0; visibility:hidden; pointer-events:none;
}
.modalParametre::before, .modalGramme::before, .modalImage::before, .modalQuantite::before{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,.8); opacity:0; transition:opacity .22s;
}

/* état ouvert */
.modalParametre.is-open, .modalGramme.is-open, .modalImage.is-open, .modalQuantite.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  display:grid; place-items:center;
}
.modalParametre.is-open::before, .modalGramme.is-open::before,
.modalImage.is-open::before, .modalQuantite.is-open::before{ opacity:1 }

/* Contenus */
.modalParametreContent, .modalGrammeContent, .modalImageContent, .quantite-content{
  width:min(620px,94vw); max-width:620px;
  background:#111; color:#fff;
  padding:22px; border-radius:12px; position:relative;
  transform:translateY(12px) scale(.985); transition:transform .26s ease, box-shadow .2s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.modalParametre.is-open .modalParametreContent,
.modalGramme.is-open .modalGrammeContent,
.modalImage.is-open .modalImageContent,
.modalQuantite.is-open .quantite-content{
  transform:translateY(0) scale(1);
}

/* Titres & close */
.modalParametreContent h2, .modalGrammeContent h2, .modalImageContent h2{ margin:0 0 12px; font-weight:800 }
.closeParametre, .closeGramme, .closeImage, .closeQuantite{
  position:absolute; right:16px; top:14px; font-size:24px; line-height:1;
  color:#a49be6; cursor:pointer; transition:transform .25s, color .2s;
}
.closeParametre:hover, .closeGramme:hover, .closeImage:hover, .closeQuantite:hover{
  transform:rotate(90deg); color:var(--violet);
}

/* Éléments spécifiques “Paramètre” */
#parametreForm .submitType .post-button{ width:100% }
#loaderType img{ width:20px; height:20px }

/* =========================================================
   Bloc “Par personne”
   ========================================================= */
#quantiteParPersonne{
  display:grid; gap:10px; margin-top:18px; padding:14px;
  border:1px solid var(--bd); border-radius:12px; background:var(--panel-2);
}
#quantiteParPersonne label{ font-weight:700 }
#quantiteParPersonne button{
  background:linear-gradient(90deg,var(--violet),var(--violet-2)); color:#fff; border:none;
  border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer;
}
#messageParPersonne{ margin-top:8px; color:var(--muted) }



/* ================= Overlay + Modale ================= */
.row-updated {
  animation: flashRow 1.2s ease-in-out;
}
@keyframes flashRow {
  0%   { background: #fff7cc; }
  100% { background: transparent; }
}

.modalGrammeContent h2 {
  margin: 0;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  color: #1d1b2e;   /* bien foncé */
  border-bottom: 1px solid #ece9ff;
}

/* Overlay (fond sombre semi-transparent) */
.modalGramme::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45); /* plus sombre et opaque */
  backdrop-filter: blur(3px);  /* floutage de l’arrière-plan */
  opacity: 0;
  transition: opacity .22s ease;
}

/* Carte modale */
.modalGrammeContent {
  width: min(560px, 92vw);
  margin: auto;
  background: #fff;                  /* fond bien opaque */
  border: 1px solid #ece9ff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 22px;
  position: relative;

  transform: translateY(12px) scale(.985);
  transition: transform .26s ease, opacity .26s ease;
  opacity: 1;                        /* toujours opaque */
}

/* Quand ouverte */
.modalGramme.is-open .modalGrammeContent {
  transform: translateY(0) scale(1);
  opacity: 1;                        /* pas de transparence */
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:992px){
  .ingredientGauche,.ingredientDroit{ flex:1 1 100% }
}
@media (max-width:560px){
  .forms-grid{ grid-template-columns:1fr }
  .ingredientTable thead{ display:none }
  .ingredientTable, .ingredientTable tbody, .ingredientTable tr, .ingredientTable td{
    display:block; width:100%;
  }
  .ingredientTable tbody tr{
    margin:10px 12px; border:1px solid var(--bd); border-radius:14px; padding:10px;
  }
  .ingredientTable tbody td{ border:none; padding:8px 4px }
  .imageColumn{ width:auto; margin-bottom:8px }
  .selectPreparation{ width:100% }
}

/* =========================================================
   Préférence d’animation (accessibilité)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}