/* ═══════════════════════════════════════════
 * RNF Live Search v3 – Rose&Fly (RAF Soft)
 * CSS complet – style plus doux / proche RAF
 * ═══════════════════════════════════════════ */

:root{
  --rf-rose:#d9537c;
  --rf-rose-dark:#a14b68;
  --rf-rose-soft:#f8e1e7;
  --rf-rose-veil:#fff6f9;
  --rf-ink:#2d2d2d;
  --rf-muted:#7b7b7b;
  --rf-border:#f0d6de;
  --rf-card:#ffffff;
  --rf-shadow:0 10px 30px rgba(161,75,104,.12);
  --rf-shadow-soft:0 6px 18px rgba(161,75,104,.10);
  --rf-radius:16px;
  --rf-radius-sm:12px;
  --rf-ease:cubic-bezier(.4,0,.2,1);
}

/* Container */
.rnf-lsa-v3{
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.rnf-lsa-v3 *, .rnf-lsa-v3 *::before, .rnf-lsa-v3 *::after{ box-sizing:border-box; }

/* Search field */
.rnf-lsa__search-container{ width:100%; }
.rnf-lsa__field{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 7px;
  background:linear-gradient(180deg,#fff, var(--rf-rose-veil));
  border:1.5px solid var(--rf-border);
  border-radius:999px;
  transition:border-color .2s var(--rf-ease), box-shadow .2s var(--rf-ease), transform .2s var(--rf-ease);
}
.rnf-lsa__field:hover{
  border-color:rgba(217,83,124,.55);
  transform:translateY(-1px);
}
.rnf-lsa__field:focus-within{
  border-color:rgba(217,83,124,.75);
  box-shadow:0 0 0 4px rgba(217,83,124,.10);
}

.rnf-lsa__rosy{
  height:42px;
  width:auto;
  flex-shrink:0;
  border-radius:0 !important;
  object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.10));
  transition:transform .25s var(--rf-ease);
}
.rnf-lsa__field:focus-within .rnf-lsa__rosy{ transform:scale(1.06); }

.rnf-lsa__input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent !important;
  font-size:16px;
  font-weight:400;
  color:var(--rf-ink);
  font-family:inherit;
  box-shadow:none !important;
  -webkit-appearance:none;
}
.rnf-lsa__input::placeholder{ color:var(--rf-muted); }
.rnf-lsa__input::-webkit-search-cancel-button{ display:none; }

.rnf-lsa__clear{
  border:0;
  background:transparent;
  color:var(--rf-muted);
  cursor:pointer;
  padding:8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s var(--rf-ease);
  visibility:hidden;
  opacity:0;
  flex-shrink:0;
}
.rnf-lsa__clear:hover{
  color:var(--rf-rose);
  background:rgba(217,83,124,.10);
}

/* Overlay (plus doux, rosé) */
.rnf-lsa-v3.is-open::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(248,225,231,.65);
  backdrop-filter:blur(2px);
  z-index:9998;
  animation:rf-fadeIn .18s ease-out;
}
@keyframes rf-fadeIn{ from{opacity:0} to{opacity:1} }

/* Panel */
.rnf-lsa__panel{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 8px);
  background:linear-gradient(180deg, #fff, var(--rf-rose-veil));
  border:1px solid var(--rf-border);
  border-radius:var(--rf-radius);
  box-shadow:var(--rf-shadow);
  overflow:hidden;
  z-index:9999;
  animation:rf-drop .2s var(--rf-ease);
}
@keyframes rf-drop{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}

/* Header */
.rnf-lsa__panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
}
.rnf-lsa__results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(240,214,222,.75);
  flex:1;
}
.rnf-lsa__results-title{
  font-size:15px;
  font-weight:800;
  color:var(--rf-ink);
  margin:0;
  letter-spacing:.2px;
}
.rnf-lsa__results-count{
  font-size:12px;
  font-weight:700;
  color:var(--rf-rose-dark);
  padding:3px 10px;
  background:rgba(217,83,124,.10);
  border:1px solid rgba(217,83,124,.18);
  border-radius:999px;
}
.rnf-lsa__close-mobile{
  display:none;
  border:0;
  background:transparent;
  color:var(--rf-muted);
  cursor:pointer;
  padding:14px;
}

/* Body */
.rnf-lsa__body{
  max-height:65vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(240,214,222,.9) transparent;
}
.rnf-lsa__body::-webkit-scrollbar{ width:6px; }
.rnf-lsa__body::-webkit-scrollbar-thumb{
  background:rgba(240,214,222,.9);
  border-radius:10px;
}
.rnf-lsa__body::-webkit-scrollbar-thumb:hover{
  background:rgba(217,83,124,.35);
}

/* Rosy/AI answer */
.rnf-lsa__ai-answer{
  background:linear-gradient(180deg, rgba(217,83,124,.08), rgba(248,225,231,.55));
  border:1px solid rgba(217,83,124,.18);
  border-left:4px solid rgba(217,83,124,.55);
  padding:13px 16px;
  margin:14px 16px 10px;
  border-radius:var(--rf-radius-sm);
  font-size:14px;
  line-height:1.55;
  color:var(--rf-ink);
}
.rnf-lsa__ai-message{ font-weight:700; margin-bottom:8px; }
.rnf-lsa__ai-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rf-rose-dark);
  font-weight:700;
  text-decoration:none;
  margin-top:6px;
  font-size:13px;
}
.rnf-lsa__ai-link:hover{ text-decoration:underline; }

.rnf-lsa__ai-products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

/* Category suggestion */
.rnf-lsa__cat-suggestion{
  background:rgba(255,255,255,.75);
  border:1px dashed rgba(217,83,124,.28);
  padding:12px 16px;
  margin:0 16px 10px;
  border-radius:var(--rf-radius-sm);
  font-size:13px;
  color:var(--rf-ink);
  text-align:center;
}
.rnf-lsa__cat-suggestion a{
  color:var(--rf-rose-dark);
  font-weight:800;
  text-decoration:none;
}
.rnf-lsa__cat-suggestion a:hover{ text-decoration:underline; }

/* Products */
.rnf-lsa__products{ padding:12px 16px 14px; }
.rnf-lsa__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

/* Product card (top 3) */
.rnf-lsa__product-card{
  display:flex;
  flex-direction:column;
  background:var(--rf-card);
  border:1px solid rgba(240,214,222,.9);
  border-radius:var(--rf-radius-sm);
  overflow:hidden;
  text-decoration:none;
  transition:transform .2s var(--rf-ease), box-shadow .2s var(--rf-ease), border-color .2s var(--rf-ease);
}
.rnf-lsa__product-card:hover{
  transform:translateY(-2px);
  border-color:rgba(217,83,124,.35);
  box-shadow:var(--rf-shadow-soft);
}
.rnf-lsa__product-image{
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:rgba(248,225,231,.35);
}
.rnf-lsa__product-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s var(--rf-ease);
}
.rnf-lsa__product-card:hover .rnf-lsa__product-img{ transform:scale(1.05); }
.rnf-lsa__product-img.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  color:rgba(217,83,124,.28);
  background:rgba(248,225,231,.55);
}
.rnf-lsa__product-info{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.rnf-lsa__product-title{
  color:var(--rf-ink);
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:36px;
}
.rnf-lsa__product-price{
  color:var(--rf-rose-dark);
  font-weight:800;
  font-size:14px;
  margin-top:auto;
}

/* Product list item (4+) */
.rnf-lsa__product-list-item{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(240,214,222,.9);
  border-radius:12px;
  padding:9px;
  text-decoration:none;
  transition:border-color .2s var(--rf-ease), background .2s var(--rf-ease);
}
.rnf-lsa__product-list-item:hover{
  border-color:rgba(217,83,124,.32);
  background:rgba(248,225,231,.25);
}
.rnf-lsa__list-image{
  width:56px;
  height:56px;
  flex-shrink:0;
  border-radius:10px;
  overflow:hidden;
  background:rgba(248,225,231,.35);
}
.rnf-lsa__list-image img{ width:100%; height:100%; object-fit:cover; }
.rnf-lsa__list-info{ flex:1; min-width:0; }
.rnf-lsa__list-info .rnf-lsa__product-title{
  font-size:13px;
  min-height:auto;
  -webkit-line-clamp:1;
}
.rnf-lsa__list-info .rnf-lsa__product-price{
  font-size:13px;
  margin-top:2px;
}

/* Blog */
.rnf-lsa__blog-section{
  border-top:1px solid rgba(240,214,222,.75);
  padding:14px 16px;
  background:rgba(255,255,255,.55);
}
.rnf-lsa__blog-header{ margin-bottom:10px; text-align:center; }
.rnf-lsa__blog-title{
  font-size:14px;
  font-weight:800;
  color:var(--rf-ink);
  margin:0;
}
.rnf-lsa__blog-grid{ display:grid; gap:8px; }
.rnf-lsa__blog-card{
  display:flex;
  gap:10px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(240,214,222,.9);
  border-radius:12px;
  padding:9px;
  text-decoration:none;
  transition:border-color .2s var(--rf-ease), background .2s var(--rf-ease);
}
.rnf-lsa__blog-card:hover{
  border-color:rgba(217,83,124,.30);
  background:rgba(248,225,231,.22);
}
.rnf-lsa__blog-img{
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:12px;
  object-fit:cover;
  background:rgba(248,225,231,.35);
}
.rnf-lsa__blog-info{ flex:1; min-width:0; }
.rnf-lsa__blog-card-title{
  font-size:13px;
  font-weight:700;
  color:var(--rf-ink);
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rnf-lsa__blog-excerpt{
  font-size:12px;
  color:var(--rf-muted);
  line-height:1.35;
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Favorites */
.rnf-lsa__favorites{
  border-top:1px solid rgba(240,214,222,.75);
  padding:14px 16px;
  background:rgba(255,255,255,.55);
}
.rnf-lsa__fav-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
}
.rnf-lsa__fav-title{
  font-size:14px;
  font-weight:800;
  color:var(--rf-ink);
  margin:0;
}
.rnf-lsa__fav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.rnf-lsa__fav-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(240,214,222,.9);
  border-radius:var(--rf-radius-sm);
  overflow:hidden;
  text-decoration:none;
  transition:transform .2s var(--rf-ease), box-shadow .2s var(--rf-ease), border-color .2s var(--rf-ease);
}
.rnf-lsa__fav-card:hover{
  border-color:rgba(217,83,124,.35);
  transform:translateY(-1px);
  box-shadow:var(--rf-shadow-soft);
}
.rnf-lsa__fav-image{
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:rgba(248,225,231,.35);
}
.rnf-lsa__fav-img{ width:100%; height:100%; object-fit:cover; }
.rnf-lsa__fav-info{ padding:10px; text-align:center; }
.rnf-lsa__fav-info .rnf-lsa__fav-title{
  font-size:12px;
  font-weight:700;
  color:var(--rf-ink);
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 4px;
}
.rnf-lsa__fav-price{
  color:var(--rf-rose-dark);
  font-weight:800;
  font-size:13px;
}

/* Footer */
.rnf-lsa__footer{
  border-top:1px solid rgba(240,214,222,.75);
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,225,231,.25));
}
.rnf-lsa__cat, .rnf-lsa__all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  padding:10px 18px;
  border-radius:999px;
  transition:all .2s var(--rf-ease);
}
.rnf-lsa__cat{
  color:var(--rf-rose-dark);
  border:1px solid rgba(217,83,124,.22);
  background:rgba(255,255,255,.85);
}
.rnf-lsa__cat:hover{
  border-color:rgba(217,83,124,.45);
  background:rgba(217,83,124,.08);
}
.rnf-lsa__all{
  color:#fff;
  border:1px solid var(--rf-rose);
  background:linear-gradient(135deg, var(--rf-rose), var(--rf-rose-dark));
  box-shadow:0 10px 22px rgba(217,83,124,.18);
}
.rnf-lsa__all:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

/* States */
.rnf-lsa__empty{
  padding:42px 18px;
  text-align:center;
  color:var(--rf-muted);
  font-size:14px;
}
.rnf-lsa__empty::before{
  content:"🌹";
  display:block;
  font-size:38px;
  margin-bottom:10px;
  opacity:.55;
}
.rnf-lsa__loading{ padding:42px 18px; text-align:center; }
.rnf-lsa__loading::after{
  content:"";
  display:inline-block;
  width:30px;
  height:30px;
  border:3px solid rgba(240,214,222,.9);
  border-top-color:rgba(217,83,124,.75);
  border-radius:50%;
  animation:rf-spin .7s linear infinite;
}
.rnf-lsa__loading-text{
  display:block;
  margin-top:12px;
  color:var(--rf-muted);
  font-size:13px;
}
@keyframes rf-spin{ to{ transform:rotate(360deg) } }

/* Responsive */
@media (max-width:768px){
  .rnf-lsa-v3{ max-width:100%; padding:0 10px; }

  .rnf-lsa__field{ padding:6px 12px 6px 6px; gap:8px; }
  .rnf-lsa__rosy{ height:38px; }
  .rnf-lsa__input{ font-size:16px; }

  .rnf-lsa__panel{
    position:fixed !important;
    inset:0 !important;
    max-width:100% !important;
    border-radius:0 !important;
    border:0 !important;
    background:linear-gradient(180deg, #fff, var(--rf-rose-veil));
    animation:rf-up .25s var(--rf-ease);
  }
  @keyframes rf-up{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }

  .rnf-lsa__panel-header{
    position:sticky;
    top:0;
    z-index:10;
    background:linear-gradient(180deg, #fff, rgba(248,225,231,.40));
    box-shadow:0 1px 10px rgba(161,75,104,.08);
  }
  .rnf-lsa__results-header{ padding:12px 14px; }
  .rnf-lsa__close-mobile{ display:flex; }

  .rnf-lsa__body{ max-height:calc(100vh - 56px); padding-bottom:88px; }

  .rnf-lsa__grid{ grid-template-columns:1fr; gap:7px; }

  .rnf-lsa__product-card{
    flex-direction:row !important;
    padding:8px;
    border-radius:12px;
  }
  .rnf-lsa__product-image{
    width:56px !important;
    height:56px !important;
    min-width:56px;
    aspect-ratio:1;
    flex-shrink:0;
    border-radius:12px;
  }
  .rnf-lsa__product-info{
    padding:0 0 0 8px !important;
    gap:2px;
    text-align:left;
  }
  .rnf-lsa__product-title{
    font-size:13px !important;
    min-height:auto !important;
    -webkit-line-clamp:2;
  }
  .rnf-lsa__product-price{
    font-size:13px !important;
    margin-top:0 !important;
  }

  .rnf-lsa__ai-answer, .rnf-lsa__cat-suggestion{
    margin:10px 12px;
    padding:10px 12px;
    font-size:13px;
  }
  .rnf-lsa__ai-products-grid{ grid-template-columns:repeat(2,1fr); }

  .rnf-lsa__products{ padding:10px 12px; }
  .rnf-lsa__blog-section, .rnf-lsa__favorites{ padding:12px; }

  .rnf-lsa__fav-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }

  .rnf-lsa__footer{
    position:sticky;
    bottom:0;
    flex-direction:column;
    gap:8px;
    padding:10px 12px;
    box-shadow:0 -6px 18px rgba(161,75,104,.08);
  }
  .rnf-lsa__cat, .rnf-lsa__all{
    width:100%;
    font-size:14px;
    padding:12px;
  }
}

@media (max-width:480px){
  .rnf-lsa__rosy{ height:34px; }
  .rnf-lsa__product-image{ width:50px !important; height:50px !important; min-width:50px; }
  .rnf-lsa__product-title{ font-size:12px !important; }
  .rnf-lsa__product-price{ font-size:12px !important; }
  .rnf-lsa__blog-img{ width:46px; height:46px; }
}
/* ================================
   RAF – Retour look "avant" (header intégré)
   À coller EN FIN de fichier CSS
   ================================ */

.rnf-lsa-v3{
  max-width: 980px;          /* plus large dans le header */
  margin: 0 auto;
}

/* Champ : moins "widget", plus intégré */
.rnf-lsa__field{
  background: rgba(255,255,255,0.18);   /* léger voile, pas blanc plein */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  gap: 12px;
}

/* Rosy plus présent comme avant */
.rnf-lsa__rosy{
  height: 54px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.10));
  transform: none !important;
}

/* Input : pilule blanche douce */
.rnf-lsa__input{
  background: #fff !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 999px !important;
  padding: 12px 44px 12px 18px;
  height: 44px;
  font-size: 16px;
  color: #2d2d2d;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Placeholder plus “soft” */
.rnf-lsa__input::placeholder{
  color: rgba(255,255,255,0.70); /* si tu veux placeholder clair dans barre rose */
}

/* Quand focus : glow léger, pas de grosse bordure */
.rnf-lsa__field:focus-within{
  box-shadow: none !important;
}
.rnf-lsa__field:focus-within .rnf-lsa__input{
  border-color: rgba(255,255,255,0.85) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}

/* Clear bouton : positionné dans l’input, discret */
.rnf-lsa__clear{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  color: rgba(255,255,255,0.75);
  padding: 6px;
}
.rnf-lsa__clear:hover{
  color: #fff;
  background: rgba(255,255,255,0.10) !important;
}

/* Empêcher le champ de “monter/descendre” au hover */
.rnf-lsa__field:hover{
  transform: none !important;
}

/* Panel : un peu moins "card", plus doux */
.rnf-lsa__panel{
  border-radius: 16px;
  border: 1px solid rgba(240,214,222,.75);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Mobile : garder simple */
@media (max-width: 768px){
  .rnf-lsa-v3{ max-width: 100%; padding: 0 10px; }
  .rnf-lsa__rosy{ height: 46px; }
  .rnf-lsa__input{ height: 42px; padding: 11px 44px 11px 16px; }
}
.rnf-lsa__input::placeholder{ color: #b9b9b9; }

/* ═══════════════════════════════════════════
 * PANEL SEARCH BAR — Barre de recherche dans le panel
 * Visible sur mobile ET desktop pour modifier la recherche
 * ═══════════════════════════════════════════ */
.rnf-lsa__panel-search-bar{
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, #fff, rgba(248,225,231,.30));
  border-bottom: 1px solid rgba(240,214,222,.65);
  position: sticky;
  top: 0;
  z-index: 12;
}
.rnf-lsa__panel-field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid rgba(240,214,222,.85);
  border-radius: 999px;
  padding: 6px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rnf-lsa__panel-field:focus-within{
  border-color: rgba(217,83,124,.55);
  box-shadow: 0 0 0 3px rgba(217,83,124,.08);
}
.rnf-lsa__panel-search-icon{
  flex-shrink: 0;
  color: var(--rf-rose);
  opacity: .7;
}
.rnf-lsa__panel-input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--rf-ink);
  font-family: inherit;
  padding: 6px 0;
  -webkit-appearance: none;
}
.rnf-lsa__panel-input::placeholder{
  color: var(--rf-muted);
  font-weight: 400;
}
.rnf-lsa__panel-input::-webkit-search-cancel-button{ display: none; }

.rnf-lsa__panel-clear{
  border: 0;
  background: transparent;
  color: var(--rf-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.rnf-lsa__panel-clear:hover{
  color: var(--rf-rose);
  background: rgba(217,83,124,.08);
}

/* Mobile : panel search bar plus compacte, header résultats caché (remplacé) */
@media (max-width: 768px){
  .rnf-lsa__panel-search-bar{
    padding: 10px 12px 8px;
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .rnf-lsa__panel-field{
    padding: 5px 10px;
  }
  .rnf-lsa__panel-input{
    font-size: 16px;
    padding: 8px 0;
  }
  /* Le header original (Résultats + count) passe sous la search bar */
  .rnf-lsa__panel-search-bar + .rnf-lsa__panel-header{
    position: sticky;
    top: 52px;
    z-index: 11;
  }
  /* Ajuster le body pour ne pas être caché sous les barres sticky */
  .rnf-lsa__body{
    max-height: calc(100vh - 110px);
  }
}