/* =============================================================
   assets/view_v5.css
   FeelFlow — page de visualisation v5
   CSS consolidé : zéro doublon, classes vf5-*, responsive.
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --vf5-bg:           #f5f7fb;
  --vf5-surface:      rgba(255,255,255,.88);
  --vf5-surface-s:    #fff;
  --vf5-border:       rgba(15,23,42,.08);
  --vf5-shadow:       0 20px 45px rgba(15,23,42,.08);
  --vf5-shadow-lg:    0 28px 60px rgba(15,23,42,.12);
  --vf5-radius:       28px;
  --vf5-radius-md:    20px;
  --vf5-radius-sm:    14px;
  --vf5-text:         #111827;
  --vf5-muted:        #6b7280;
  --vf5-accent:       #8b5cf6;
  --vf5-accent2:      #3b82f6;
  --vf5-danger:       #ef4444;
}

/* ── Background page ────────────────────────────────────────── */
body {
  background:
    radial-gradient(circle at top left,  rgba(139,92,246,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, var(--vf5-bg) 100%);
}

/* ── Wrapper principal ──────────────────────────────────────── */
.vf5-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 22px 56px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.vf5-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 34px 34px 30px;
  border: 1px solid var(--vf5-border);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(37,99,235,.88));
  box-shadow: var(--vf5-shadow-lg);
  color: #fff;
}
.vf5-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.vf5-hero-title {
  margin: 14px 0 10px;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.02;
  color: #fff;
}
.vf5-hero-subtitle {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: 1rem;
}
.vf5-hero-subtitle b {
  color: #fff;
  letter-spacing: .06em;
}
.vf5-hero-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vf5-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: .92rem;
}
/* Chip livre d'or cliquable : clignotement visible PC + mobile */
@keyframes wf-chip-pulse {
  0%, 100% {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    box-shadow: none;
    color: #fff;
  }
  50% {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245,158,11,.8), 0 0 4px rgba(245,158,11,.5);
    color: #1a1a1a;
  }
}
.vf5-chip--pulse {
  animation: wf-chip-pulse 1.4s ease-in-out infinite;
  cursor: pointer;
}
.vf5-chip--pulse a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
/* Mobile : agrandir légèrement pour plus de visibilité */
@media (max-width: 600px) {
  .vf5-chip--pulse {
    padding: 0 16px;
    min-height: 42px;
    font-size: 1rem;
  }
}

.vf5-hero-glow {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.24), transparent 65%);
  filter: blur(4px);
}

/* ── Grille principale (carte + aside) ──────────────────────── */
.vf5-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 360px;
  gap: 24px;
  align-items: start;
}
.vf5-main-column {
  min-width: 0;
  display: grid;
  gap: 22px;
}
.vf5-side-column {
  position: sticky;
  top: 22px;
}

/* ── Stage carte ────────────────────────────────────────────── */
.vf5-stage-card {
  position: relative;
  padding: 24px;
  border-radius: 32px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--vf5-shadow);
  backdrop-filter: blur(12px);
}
.vf5-stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(139,92,246,.35),
    rgba(59,130,246,.2),
    rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.vf5-stage-card > * {
  position: relative;
  z-index: 1;
}
.vf5-stage-card #cardFrame,
.vf5-stage-card .wf-round-outer-wrapper {
  margin: 0 auto;
}

/* ── Panneau partage ────────────────────────────────────────── */
.share-panel {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,247,251,.98));
  border: 1px solid var(--vf5-border);
  box-shadow: var(--vf5-shadow);
}
.share-panel::after {
  content: "";
  position: absolute;
  inset: auto -40px -80px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.16), transparent 68%);
}
.vf5-share-title {
  margin: 0 0 18px;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--vf5-text);
  text-align: center;
}
.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 20px;
}
.qr-code-container img {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.share-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.share-buttons .btn-action,
.share-link-container .btn-action {
  justify-content: center;
  border-radius: 16px;
  padding: 13px 16px;
  font-weight: 700;
  min-height: 48px;
  box-shadow: none;
}
.share-link-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.share-link-container input {
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  text-align: left;
  background: #fff;
  font-size: .96rem;
}

/* ── Long text ──────────────────────────────────────────────── */
.long-text-panel {
  margin-bottom: 0;
  padding: 28px 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--vf5-border);
  box-shadow: var(--vf5-shadow);
}
.long-text-content {
  font-size: 1rem;
  line-height: 1.82;
  color: #1f2937;
  /* text-align et font-family portés par style inline depuis layout_state */
}

/* ── Carte (blocs internes) ─────────────────────────────────── */

/* Stack flex-column : distribue les blocs verticalement */
.wf-card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
}

/* Texte court : le cadre (bulle grise ou autre selon thème) doit centrer
   le texte verticalement — espace égal haut et bas à l'intérieur du bloc.
   On N'écrase PAS font-family/font-size/color/text-align car ils sont
   portés par le style inline du wf-block-content (depuis layout_state). */
.wf-block.wf-block-short {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.wf-block-short .wf-block-content {
  display: block !important;       /* block pour que text-align inline fonctionne */
  width: 100% !important;
  min-height: 0 !important;
  padding-top:    0.6em !important;
  padding-bottom: 0.6em !important;
  padding-left:   clamp(10px, 2.8vw, 14px);
  padding-right:  clamp(10px, 2.8vw, 14px);
  line-height: 1.45;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Supprimer les retours à la ligne parasites des <p> et <div> internes */
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Supprimer marges parasites des éléments enfants (p, div) générés par l'éditeur */
.wf-block-short .wf-block-content > p,
.wf-block-short .wf-block-content > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wf-block-short .wf-block-content[dir="rtl"] {
  direction: rtl;
}


/* ── Guestbook shell ────────────────────────────────────────── */
.vf5-guestbook-shell {
  margin-top: 28px;
  padding: 30px;
  border-radius: 34px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--vf5-border);
  box-shadow: var(--vf5-shadow-lg);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Header livre d'or */
.guestbook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  flex-wrap: wrap;
}
.vf5-gb-title {
  margin: 0;
  font-size: 1.45rem;
  color: #111827;
  font-weight: 700;
}
.gb-closed-inline {
  display: inline;
  margin-left: 10px;
  color: var(--vf5-muted);
  font-size: .92em;
  font-weight: 600;
}
.guestbook-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.guestbook-stats:empty {
  display: none;
}
.gb-status-badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 700;
  border: 1px solid #dbe1ff;
  font-size: .85rem;
  white-space: nowrap;
}
.gb-hidden-notice {
  background: #ffeaa7;
  border-left: 4px solid #f39c12;
  padding: 12px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  color: #856404;
  font-weight: 500;
}

/* Formulaire de recherche / filtre */
.gb-search-form {
  width: min(760px, 100%);
  margin: 0 auto 18px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(15,23,42,.06);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.gb-search-form input,
.gb-search-form select {
  padding: 10px 14px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 12px;
  font-size: .9rem;
  background: #fff;
}
.gb-search-form input:focus,
.gb-search-form select:focus {
  border-color: var(--vf5-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.gb-reset-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--vf5-danger);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease;
}
.gb-reset-btn:hover {
  transform: scale(1.1);
}

/* Grille feed + compose */
.vf5-gb-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(320px, 420px);
  gap: 22px;
  align-items: start;
  justify-content: center;
}
.vf5-gb-grid:not(:has(.vf5-gb-compose > *)) {
  grid-template-columns: minmax(0, 760px);
}
.vf5-gb-grid.no-compose {
  grid-template-columns: minmax(0, 760px);
}
.vf5-gb-feed {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vf5-gb-compose {
  position: sticky;
  top: 22px;
}

/* ── Liste des commentaires ─────────────────────────────────── */
.comments-list {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.comment-item {
  position: relative;
  width: 100%;
  padding: 20px 20px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.comment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,23,42,.08);
}
.comment-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5cf6, #3b82f6);
}
.comment-item.blocked {
  border-left-color: var(--vf5-danger);
  background: #fff0f0;
}
.comment-item.blocked::before {
  background: var(--vf5-danger);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.comment-author {
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--vf5-muted);
}
.comment-date {
  white-space: nowrap;
}
.comment-body {
  margin-top: 12px;
  color: #374151;
  line-height: 1.7;
  word-break: break-word;
  font-size: .95rem;
}

.comment-body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blocked-notice {
  color: var(--vf5-danger);
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.no-comments {
  text-align: center;
  color: var(--vf5-muted);
  padding: 40px 20px;
  font-size: .95rem;
}
.mod-locked {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Spans grisés : donner un fond visible pour tous les boutons locked */
span.btn-icon.mod-locked {
  background: #94a3b8 !important;
  color: #fff !important;
  border-color: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bouton like */
.wf-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(239,68,68,.14);
  background: #fff5f7;
  color: #be123c;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow .15s ease;
  font-size: .85rem;
  min-height: 36px;
}
.wf-like-btn:hover:not([disabled]) {
  box-shadow: 0 6px 16px rgba(239,68,68,.12);
}
.wf-like-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.wf-like-count {
  font-size: .85rem;
  font-weight: 600;
}

/* ── Médias guestbook (details/summary lazy) ─────────────────── */
.wf-media-details {
  margin-top: 8px;
}
.wf-media-summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fafafa;
  font-weight: 600;
  color: #374151;
  transition: background .15s ease;
}
.wf-media-summary::-webkit-details-marker { display: none; }
.wf-media-summary:hover {
  background: #f0f0f0;
}
.wf-media-dur {
  font-weight: 500;
  color: var(--vf5-muted);
}
.wf-media-body {
  margin-top: 10px;
}
.wf-media-body video,
.wf-media-body audio {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
}
.wf-media-body video {
  background: #000;
}

/* ── Réponses ───────────────────────────────────────────────── */
.wf-reply-box {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--vf5-accent);
  background: #faf7ff;
  border-radius: 10px;
}
.wf-reply-meta {
  font-size: .85rem;
  color: var(--vf5-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.wf-reply-content {
  font-size: .95rem;
  line-height: 1.55;
  color: #374151;
}
.wf-reply-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.wf-reply-form {
  margin-top: 10px;
}
.wf-reply-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #111;
  font-size: 14px;
  resize: vertical;
}
.wf-reply-form-footer {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wf-reply-vis-label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .9rem;
  color: #555;
}

/* Bouton "Répondre" — violet lisible */
.wf-reply-btn {
  background: #7c3aed;
  color: #ffffff;
  border: 1px solid rgba(124,58,237,.4);
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.wf-reply-btn:hover {
  background: #6d28d9;
  box-shadow: 0 4px 14px rgba(109,40,217,.3);
}

/* Bouton "Modifier" — bleu */
.wf-reply-edit {
  background: #0ea5e9;
  color: #ffffff;
  border: 1px solid rgba(14,165,233,.35);
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background .15s ease;
}
.wf-reply-edit:hover {
  background: #0284c7;
}

/* Bouton "Supprimer" — rouge */
.wf-reply-delete {
  background: #ef4444;
  color: #ffffff;
  border: 1px solid rgba(239,68,68,.35);
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background .15s ease;
}
.wf-reply-delete:hover {
  background: #dc2626;
}

/* Bouton "Sauvegarder" — vert */
.wf-reply-save {
  background: #22c55e;
  color: #ffffff;
  border: 1px solid rgba(34,197,94,.35);
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease;
}
.wf-reply-save:hover {
  background: #16a34a;
}

/* ── Formulaire de composition ──────────────────────────────── */
.gb-form-section {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f9fafb);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.gb-form-section h4 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  color: #111827;
}
.gb-error-box {
  background: #ffe5e5;
  border: 1px solid #ffb3b3;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 10px 0;
  color: #8a0000;
  font-weight: 600;
}
.wf-honeypot {
  display: none;
  opacity: 0;
  position: absolute;
  left: -9999px;
}
.wf-input-full {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  padding: 10px 14px;
  font-size: .95rem;
}
.wf-input-full:focus {
  border-color: var(--vf5-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* Types de message (radio row) */
.gb-type-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gb-type-label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .95rem;
  color: #444;
  cursor: pointer;
}
.gb-type-locked {
  opacity: .45;
  cursor: not-allowed;
}

/* Zone upload / record */
.wf-media-upload-box {
  padding: 12px 14px;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  background: #fafafa;
  margin-top: 10px;
}
.wf-media-hint {
  font-size: .92rem;
  color: #374151;
  margin-bottom: 8px;
}
.wf-rec-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.wf-rec-timer {
  font-size: .9rem;
  color: var(--vf5-muted);
}
.wf-submit-btn {
  width: 100%;
  margin-top: 14px;
  font-size: 1.05rem;
  padding: 13px;
  border-radius: 16px;
  font-weight: 700;
}

/* Barre rich-text */
.rich-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.06);
  position: relative;
  overflow: visible;
}
.tool-btn {
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-btn:hover {
  background: #f0f0f0;
}
#richNew {
  min-height: 100px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
}
#emojiPicker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  padding: 10px;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  border-radius: 12px;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
#emojiPicker.active {
  display: grid;
}
.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  border-radius: 6px;
}
.emoji-item:hover {
  background: #f0f0f0;
}

/* ── Note fermé ─────────────────────────────────────────────── */
.vf5-gb-closed-note {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 16px 18px;
  text-align: center;
  color: var(--vf5-muted);
  font-style: italic;
  border: 1px dashed rgba(15,23,42,.14);
  border-radius: 18px;
  background: #fafafa;
}

/* ── CTA bas de page ────────────────────────────────────────── */
.vf5-cta-bottom {
  text-align: center;
  margin-top: 34px;
  margin-bottom: 10px;
}
.vf5-cta-bottom .btn-action {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(59,130,246,.18);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 981px) {
  .gb-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 260px) auto;
    gap: 12px;
    align-items: center;
  }
  .gb-search-form input[type="text"],
  .gb-search-form select {
    width: 100%;
    margin: 0;
  }
  .gb-search-form .gb-reset-btn {
    justify-self: start;
    align-self: center;
  }
}

@media (max-width: 1180px) {
  .vf5-top-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (max-width: 980px) {
  .vf5-page { padding: 16px 14px 40px; }
  .vf5-top-grid,
  .vf5-gb-grid     { grid-template-columns: 1fr; }
  .vf5-side-column,
  .vf5-gb-compose  { position: static; top: auto; }
  .share-buttons   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-search-form  { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .comments-list   { width: 100%; }
  .vf5-gb-closed-note { max-width: 100%; }
  .guestbook-header { margin-bottom: 12px; }
}

@media (max-width: 640px) {
  .vf5-hero          { padding: 24px 20px 22px; border-radius: 26px; }
  .vf5-chip          { font-size: .84rem; min-height: 34px; padding: 0 12px; }
  .vf5-stage-card,
  .share-panel,
  .vf5-guestbook-shell,
  .long-text-panel   { padding: 18px; border-radius: 24px; }
  .share-buttons     { grid-template-columns: 1fr; }
  .comment-header    { flex-direction: column; }
  .comment-item      { padding: 18px 16px 16px; }
  .gb-form-section   { padding: 18px; }
  .vf5-gb-grid       { gap: 16px; }
}

@media (max-width: 480px) {
  .vf5-page { padding: 12px 10px 32px; }
  .gb-type-row { flex-direction: column; align-items: flex-start; }
}


/* ── Correction médias tronqués (view_v5) ───────────────────────
   style.css impose aspect-ratio + min-height sur .wf-block-image
   ce qui tronque l'image en page de visualisation.
   On écrase ici pour afficher les médias en totalité.
   ─────────────────────────────────────────────────────────────── */
.vf5-page .wf-block-image {
  aspect-ratio: unset !important;
  min-height: 0 !important;
  height: auto !important;
}
.vf5-page .wf-block-image .card-img-wrapper {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: flex-start !important;
}
.vf5-page .wf-block-image .card-img-wrapper img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
}
.vf5-page .wf-block-image .card-img-wrapper video {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.vf5-page .wf-block-video {
  aspect-ratio: unset !important;
  min-height: 0 !important;
  height: auto !important;
}
.vf5-page .wf-block-video .card-img-wrapper {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ── Nouveaux styles v6 ─────────────────────────────────────── */

/* Badge "modifié par admin" */
.wf-comment-edited {
  margin-top: 4px;
  font-size: .78rem;
  color: #94a3b8;
  font-style: italic;
}

/* Bouton édition admin (inline, discret) */
.btn-icon.bg-info.wf-edit-comment-btn {
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s;
}
.btn-icon.bg-info.wf-edit-comment-btn:hover { background: #0284c7; }

/* Contre-réponses visiteurs */
.wf-visitor-replies {
  margin-top: 10px;
  border-top: 1px dashed #e5e7eb;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-visitor-reply-item {
  background: #f0f9ff;
  border-left: 3px solid #38bdf8;
  border-radius: 8px;
  padding: 8px 12px;
}
.wf-visitor-reply-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: #64748b;
  margin-bottom: 4px;
  gap: 8px;
}
.wf-visitor-reply-author { font-weight: 600; color: #0369a1; }
.wf-visitor-reply-content {
  font-size: .9rem;
  color: #374151;
  line-height: 1.5;
}

/* Bouton "Répondre à cette réponse" (visiteur) */
.wf-visitor-reply-actions { margin-top: 10px; }
.wf-visitor-reply-btn {
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wf-visitor-reply-btn:hover { background: #0284c7; }
.wf-visitor-reply-form { margin-top: 8px; }

/* Rich toolbar dans le formulaire de réponse */
.wf-reply-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
  flex-wrap: wrap;
  position: relative;
}
.wf-reply-rich-toolbar .tool-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s;
}
.wf-reply-rich-toolbar .tool-btn:hover { background: #f3f4f6; }
.wf-reply-emoji-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 200;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Rich input dans formulaire de réponse */
.wf-reply-rich-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 10px 12px;
  background: #fff;
  color: #111;
  font-size: 14px;
  min-height: 70px;
  outline: none;
  line-height: 1.55;
}
.wf-reply-rich-input:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}