.section-composi{border-radius: 75px;margin-top:  50px;margin-bottom:  50px;; background-color:white;padding:20px}.composi-h1{font-size:3.5rem;letter-spacing:1.5px;color:#7EBA28;font-family:'LilStuart',sans-serif;font-weight:300}.composi-p{padding:10px}.composi-ingredients-grid{display:grid;justify-items:center;grid-template-columns:repeat(6,1fr);gap:16px;padding:16px;border-radius:36px}.legume,.viande,.autres{position:relative;display:contents}@media (max-width:1200px){.composi-ingredients-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:900px){.composi-ingredients-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.container{grid-template-columns:1fr;gap:15px;padding:10px}.item:nth-child(1),.item:nth-child(3),.item:nth-child(4),.item:nth-child(5){grid-column:1}.item:nth-child(1){grid-row:1}.item:nth-child(2){grid-row:2;grid-column:1 / -1}.item:nth-child(3){grid-row:5}.item:nth-child(4){grid-row:4}.item:nth-child(5){grid-row:3}.composi-ingredients-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:576px){.composi-h1{font-size:2rem;text-align:center}.composi-p{text-align:center}.composi-ingredients-grid{grid-template-columns:repeat(2,1fr);gap:12px}.image-container img{max-width:65px;z-index:-1}}@media (max-width:375px){.composi-ingredients-grid{grid-template-columns:repeat(2,1fr);gap:10px}.image-container img{max-width:60px}}

/* ---------- New mobile-first Composi UI (hero + search + panier) ---------- */
.composi-hero{background:#fff;padding:0;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}.composi-hero-banner{position:relative;border-bottom-left-radius:30px;border-bottom-right-radius:30px;overflow:hidden;box-shadow:0 4px 3.6px rgba(0,0,0,.04)}.composi-hero-banner-image{width:100%;max-height:460px;object-fit:cover;display:block}.composi-hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px 16px 12px;pointer-events:none}.composi-hero-icon{width:110px;height:auto;margin-top:6px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.10))}.composi-hero-title{margin-top:6px;font-family:'Cocon','LilStuart',sans-serif;font-size:2.1rem;line-height:1;color:#7FB636;text-align:center}.composi-hero-title-light{font-weight:500}.composi-hero-title-bold{font-weight:700}.composi-hero-subtitle{margin-top:8px;max-width:360px;text-align:center;color:#656262;font-size:1rem;font-family:'Roboto',sans-serif;font-weight:300}
.composi-hero-controls{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:100%;max-width:1100px;padding:0 24px;z-index:2}
.composi-search-wrapper{margin-top:0}.composi-search-inner{background:#fff;border-radius:19px;box-shadow:0 4px 18.3px 1px rgba(0,0,0,.04);padding:5px}.composi-search-input-wrapper{position:relative;display:flex;align-items:center;background:#F1F6EB;border-radius:19px;border:1px solid #C4E5A2;padding:0 10px 0 40px;height:52px}.composi-search-icon{position:absolute;left:14px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.composi-search-icon img{width:18px;height:18px}.composi-search-input{flex:1;border:none;background:transparent;font-size:.95rem;font-family:'Roboto',sans-serif;color:#333;outline:none}.composi-search-input::placeholder{color:#656262;opacity:.7}.composi-search-add-btn{margin-left:8px;width:44px;height:36px;border:none;border-radius:18px;background:#E5F0D7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease}.composi-search-add-btn img{width:20px;height:20px}.composi-search-add-btn:hover{background:#d4e2c3}

.composi-panier{padding:18px 4px 8px;background:#FFB80024;border-radius:16px}.composi-panier-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.composi-panier-title{text-transform:capitalize;font-size:1.1rem;font-family:'Roboto',sans-serif;font-weight:500;color:#000;margin:0}.composi-panier-clear{background:none;border:none;padding:4px 0;font-size:.9rem;font-family:'Roboto',sans-serif;color:#A1A1A1;text-transform:capitalize;cursor:pointer}.composi-panier-scroll-shell{display:flex;align-items:center;gap:12px}.panier-arrow{width:52px;height:52px;border-radius:50%;border:none;background:transparent;display:none;align-items:center;justify-content:center;cursor:pointer}.panier-arrow img{width:30px;height:30px}.composi-selected-ingredients{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 0 2px;cursor:grab;scrollbar-width:none}.composi-selected-ingredients:active{cursor:grabbing}.composi-selected-ingredients::-webkit-scrollbar{display:none}.composi-panier-chip{display:inline-flex;align-items:center;background:#fff;border-radius:16px;border:1px solid #E2F2D1;box-shadow:0 4px 8.6px rgba(0,0,0,.04);padding:4px 10px 4px 40px;position:relative;min-height:32px;white-space:nowrap}.composi-panier-chip-image{position:absolute;left:8px;top:4px;width:26px;height:22px;border-radius:6px;overflow:hidden;background:#E5F0D7;display:flex;align-items:center;justify-content:center}.composi-panier-chip-image img{width:100%;height:100%;object-fit:cover}.composi-panier-chip-label{font-size:.85rem;font-family:'Roboto',sans-serif;color:#3B600A;font-weight:300}.composi-panier-chip-remove{margin-left:8px;width:16px;height:16px;border-radius:50%;border:none;background:#7FB636;color:#fff;font-size:.75rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.composi-panier-count{margin-top:4px;font-size:.85rem;font-family:'Roboto',sans-serif;color:#656262;font-weight:300}

.composi-search-submit{
  margin:10px auto 0;
  display:block;
  min-width:180px;
  height:38px;
  border:none;
  border-radius:19px;
  background:#7FB636;
  color:#fff;
  font-family:'Roboto',sans-serif;
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 4px 8.6px rgba(0,0,0,.16);
}
.composi-search-submit:hover{
  background:#6aa330;
}

.composi-ingredients-container{margin-top:4px}

/* Hide ingredients grid during JS pagination init to avoid flash of all items */
.ingredients-grid-initializing{
  visibility:hidden;
}

/* Results header (title + count) */
.results-count{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.results-count-value{
  font-family:'Cocon','Roboto',sans-serif;
  font-size:1.4rem;
  color:#3B600A;
  white-space:nowrap;
}

/* Recettes horizontal carousel (100% match) */
.section-recettes{
  margin-top:40px;
  padding:0 20px 40px;
}
.recettes-wrapper{
  max-width:1300px;
  margin:0 auto;
}
.recettes-carousel-shell{
  width:100%;
  height:100%;
  background:#F8FBF5;
  border-radius:60px;
  padding:24px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
}
.recettes-viewport{
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.recettes-viewport::-webkit-scrollbar{
  display:none;
}
.recettes-track{
  display:flex;
  gap:20px;
}
.recettes-arrow{
  width:100px;
  height:100px;
  border-radius:50%;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.recettes-arrow img{
  width:40px;
  height:40px;
}
.recette-item-card{
  width:290px;
  height:360px;
  position:relative;
  flex:0 0 auto;
}
.recette-card-shell{
  position:absolute;
  inset:0;
  background:#ffffff;
  box-shadow:0 4px 4px rgba(127,182,54,0.15);
  border-radius:17px;
  overflow:hidden;
}
.recette-card-header{
  position:absolute;
  left:4px;
  right:4px;
  top:6px;
  height:45px;
  background:#7FB636;
  border-top-left-radius:17px;
  border-top-right-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.recette-card-header span{
  color:#ffffff;
  font-family:'Roboto',sans-serif;
  font-size:20px;
  text-transform:capitalize;
}
.recette-card-image-wrapper{
  position:absolute;
  left:4px;
  right:4px;
  top:6px;
  height:201px;
  border-top-left-radius:17px;
  border-top-right-radius:17px;
  overflow:hidden;
}
.recette-card-image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.recette-card-title{
  position:absolute;
  left:17px;
  right:17px;
  top:225px;
  text-align:center;
  color:#000000;
  font-family:'Cocon','Roboto',sans-serif;
  font-size:24px;
  font-weight:500;
  line-height:1.1;
}
.recette-card-meta{
  position:absolute;
  left:19px;
  right:19px;
  bottom:40px;
  font-family:'Roboto',sans-serif;
  font-size:14px;
  line-height:1.2;
  color:#000000;
}
.recette-card-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.recette-card-meta-small{
  font-size:14px;
  color:#A5A5A5;
  display:flex;
  align-items:center;
  gap:4px;
}
.recette-card-time{
  display:flex;
  align-items:center;
  gap:6px;
}
.recette-card-stars{
  display:flex;
  align-items:center;
  gap:4px;
}
.recette-card-stars span{
  font-size:14px;
  color:#A1A1A1;
}

/* Ingredient pagination */
.ingredient-pagination{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:6px;
}
.ingredient-page-btn{
  min-width:28px;
  height:28px;
  padding:0 6px;
  border-radius:14px;
  border:1px solid #E2F2D1;
  background:#fff;
  font-size:.85rem;
  font-family:'Roboto',sans-serif;
  color:#3B600A;
  cursor:pointer;
}
.ingredient-page-btn-active{
  background:#7FB636;
  color:#fff;
  border-color:#7FB636;
}
.composi-ingredient-item.composi-ingredient-page-hidden{
  display:none;
}

/* Type filter row */
.composi-types{padding:16px 0 8px;background:#fff}
.composi-types-row{
  max-width:100%;
  margin:0 auto;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:6px;
  padding:0 8px;
}
.composi-type-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 12px 0 34px;
  background:#F8FBF5;
  border-radius:22px;
  border:1px solid #E2F2D1;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.composi-type-chip-icon{
  position:absolute;
  left:8px;
  top:4px;
  width:22px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.composi-type-chip-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.composi-type-chip-label{
  text-transform:capitalize;
  font-size:.85rem;
  font-family:'Roboto',sans-serif;
  font-weight:400;
  color:#000;
}
.composi-type-chip-active{
  background:#E7FFCF;
  box-shadow:0 4px 8.6px rgba(0,0,0,.04);
}
.composi-ingredient-item.composi-ingredient-hidden{display:none}

@media (min-width:768px){.composi-search-wrapper{padding:0 12%}.composi-panier{margin-top:20px;padding:20px 12% 8px}.composi-h1{text-align:left}.composi-p{text-align:left}}

/* Override ingredient card appearance to match new Figma style */
.image-container{
  position:relative;
  display:inline-block;
  width:174px;
  height:165px;
  transition:transform 0.2s ease;
}
.image-container:hover{
  transform:scale(1.03);
  z-index:2;
}
.image-checkbox{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.ingredient-card-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#F8FBF5 0%,#F8FBF5 100%);
  border-radius:12px;
  transition:background 0.2s ease,box-shadow 0.2s ease;
}
.ingredient-card-image{
  position:absolute;
  left:50%;
  top:26px;
  transform:translateX(-50%);
  width:96px;
  height:96px;
  object-fit:contain;
}
.ingredient-card-name{
  position:absolute;
  left:8px;
  right:8px;
  bottom:18px;
  text-align:center;
  color:#3B600A;
  font-size:18px;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  text-transform:capitalize;
  line-height:17px;
}
.ingredient-card-check{
  position:absolute;
  right:16px;
  top:12px;
  width:24px;
  height:24px;
  border-radius:9999px;
  background:#7FB636;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.2s ease,transform 0.2s ease;
}
.ingredient-card-check-mark{
  width:10px;
  height:6px;
  border:1px solid #fff;
  border-width:0 0 2px 2px;
  transform:rotate(-45deg);
  margin-top:-1px;
}
.image-checkbox:checked + .ingredient-card-bg{
  background:linear-gradient(180deg,#F8FBF5 0%,#E2F2D1 100%);
  box-shadow:0 3px 4.8px rgba(0,0,0,0.06);
}
.image-checkbox:checked ~ .ingredient-card-check{
  opacity:1;
  transform:scale(1);
}