/* ============================================================
   GROUP LAFIARA — Widget Visiteurs & Avis du site (v4.0.1)
   Compteur de visiteurs + commentaires/suggestions/conseils
   + notation du site. 100% autonome, responsive, thème clair/sombre.
   ============================================================ */

.laf-fb, .laf-fb * { box-sizing: border-box; }

.laf-fb {
  --laf-green: #1b7a2a;
  --laf-green-d: #14601f;
  --laf-gold: #f5a623;
  --laf-bg: #ffffff;
  --laf-surface: #f6f8f6;
  --laf-text: #15201a;
  --laf-muted: #6a7a70;
  --laf-border: #e3e9e4;
  --laf-shadow: 0 10px 40px rgba(0,0,0,.18);
  font-family: 'Inter','Segoe UI',Tahoma,sans-serif;
  color: var(--laf-text);
}
html[data-theme='dark'] .laf-fb {
  --laf-bg: #121a15;
  --laf-surface: #1a241d;
  --laf-text: #eaf2ec;
  --laf-muted: #9db0a4;
  --laf-border: #26332b;
  --laf-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* ---- Barre flottante (lanceur + compteur) ---- */
.laf-fb__dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.laf-fb__dock > * { pointer-events: auto; }

.laf-fb__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--laf-bg);
  color: var(--laf-text);
  border: 1px solid var(--laf-border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.laf-fb__count .laf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--laf-green);
  box-shadow: 0 0 0 0 rgba(27,122,42,.5);
  animation: laf-pulse 2s infinite;
}
@keyframes laf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(27,122,42,.5); }
  70% { box-shadow: 0 0 0 7px rgba(27,122,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(27,122,42,0); }
}
.laf-fb__count b { color: var(--laf-green); }

.laf-fb__fab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--laf-green), var(--laf-green-d));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 999px;
  box-shadow: var(--laf-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.laf-fb__fab:hover { transform: translateY(-2px); }
.laf-fb__fab:active { transform: translateY(0); }
.laf-fb__fab svg { width: 20px; height: 20px; }
.laf-fb__fab .laf-fab-rating {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 999px; padding: 2px 8px; font-size: 12px;
}

/* ---- Overlay + panneau ---- */
.laf-fb__overlay {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(10,20,14,.5);
  backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.laf-fb__overlay.is-open { opacity: 1; visibility: visible; }

.laf-fb__panel {
  width: 420px; max-width: 100%;
  height: 100%;
  background: var(--laf-bg);
  box-shadow: var(--laf-shadow);
  display: flex; flex-direction: column;
  transform: translateX(40px);
  transition: transform .25s ease;
  overflow: hidden;
}
.laf-fb__overlay.is-open .laf-fb__panel { transform: translateX(0); }

.laf-fb__header {
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--laf-green), var(--laf-green-d));
  color: #fff;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.laf-fb__header h2 { margin: 0; font-size: 18px; font-family: 'Poppins',sans-serif; }
.laf-fb__header p { margin: 4px 0 0; font-size: 12.5px; opacity: .9; }
.laf-fb__close {
  background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.laf-fb__close:hover { background: rgba(255,255,255,.3); }

.laf-fb__body { padding: 18px 20px; overflow-y: auto; flex: 1; }

/* ---- Carte note du site ---- */
.laf-fb__score {
  background: var(--laf-surface);
  border: 1px solid var(--laf-border);
  border-radius: 14px;
  padding: 16px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.laf-fb__score-num { font-size: 34px; font-weight: 800; line-height: 1; font-family:'Poppins',sans-serif; }
.laf-fb__score-meta { font-size: 12.5px; color: var(--laf-muted); margin-top: 4px; }
.laf-stars { display: inline-flex; gap: 2px; }
.laf-stars svg { width: 18px; height: 18px; }
.laf-star-full { fill: var(--laf-gold); }
.laf-star-empty { fill: var(--laf-border); }

/* ---- Formulaire ---- */
.laf-fb__section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--laf-muted); margin: 0 0 10px;
}
.laf-fb__rate {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.laf-fb__rate button {
  background: none; border: none; cursor: pointer; padding: 2px; line-height: 0;
}
.laf-fb__rate svg { width: 30px; height: 30px; transition: transform .1s; }
.laf-fb__rate button:hover svg { transform: scale(1.15); }

.laf-fb__field { margin-bottom: 12px; }
.laf-fb__field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.laf-fb__field input,
.laf-fb__field textarea,
.laf-fb__field select {
  width: 100%;
  background: var(--laf-surface);
  border: 1px solid var(--laf-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--laf-text);
  font-family: inherit;
  transition: border-color .15s;
}
.laf-fb__field input:focus,
.laf-fb__field textarea:focus,
.laf-fb__field select:focus { outline: none; border-color: var(--laf-green); }
.laf-fb__field textarea { resize: vertical; min-height: 78px; }

.laf-fb__types { display: flex; gap: 8px; flex-wrap: wrap; }
.laf-fb__types label {
  flex: 1; min-width: 95px; cursor: pointer; margin: 0;
}
.laf-fb__types input { display: none; }
.laf-fb__chip {
  display: block; text-align: center;
  border: 1px solid var(--laf-border); border-radius: 10px;
  padding: 9px 6px; font-size: 13px; font-weight: 600;
  background: var(--laf-surface); transition: all .15s;
}
.laf-fb__types input:checked + .laf-chip,
.laf-fb__types input:checked ~ .laf-chip { }
.laf-fb__types label.is-active .laf-fb__chip {
  background: var(--laf-green); color: #fff; border-color: var(--laf-green);
}

.laf-fb__submit {
  width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--laf-green), var(--laf-green-d));
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 13px; border-radius: 11px; margin-top: 4px;
  transition: opacity .15s;
}
.laf-fb__submit:disabled { opacity: .6; cursor: not-allowed; }

.laf-fb__msg {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; display: none;
}
.laf-fb__msg.is-ok { display: block; background: rgba(27,122,42,.12); color: var(--laf-green); }
.laf-fb__msg.is-err { display: block; background: rgba(200,40,40,.12); color: #c82828; }

.laf-fb__divider { height: 1px; background: var(--laf-border); margin: 20px 0; border: 0; }

/* ---- Liste des avis ---- */
.laf-fb__list { display: flex; flex-direction: column; gap: 12px; }
.laf-fb__item {
  border: 1px solid var(--laf-border); border-radius: 12px;
  padding: 12px 14px; background: var(--laf-surface);
}
.laf-fb__item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.laf-fb__item-top strong { font-size: 14px; }
.laf-fb__badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
}
.laf-badge-commentaire { background: rgba(27,122,42,.12); color: var(--laf-green); }
.laf-badge-suggestion { background: rgba(245,166,35,.15); color: #b9770f; }
.laf-badge-conseil { background: rgba(53,122,189,.14); color: #2f6bb0; }
.laf-fb__item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--laf-text); white-space: pre-wrap; word-break: break-word; }
.laf-fb__item .laf-stars svg { width: 14px; height: 14px; }
.laf-fb__item-date { font-size: 11px; color: var(--laf-muted); margin-top: 6px; }
.laf-fb__empty { text-align: center; color: var(--laf-muted); font-size: 13.5px; padding: 18px 0; }
.laf-fb__offline { font-size: 11.5px; color: var(--laf-muted); text-align: center; margin-top: 12px; }

@media (max-width: 480px) {
  .laf-fb__panel { width: 100%; }
  .laf-fb__fab span.laf-fab-label { display: none; }
  .laf-fb__fab { padding: 14px; }
  .laf-fb__dock { right: 12px; bottom: 12px; }
}