/* ==============================================================
   Le P'tit Combraillou - feuille de style partagee
   Charte complète : voir DESIGN.md à la racine du projet.
   ============================================================== */
:root {
  /* Theme "Roche volcanique" : fond Volvic, accents lave en fusion.
     Les noms de variables sont conserves (917+ usages dans le site) mais
     leurs valeurs semantiques sont basculees pour le dark mode. */

  /* Surfaces : pierre de Volvic */
  --cream-bg:      #232627;
  --cream-card:    #2e3234;
  --cream-soft:    #3a3e40;

  /* Texte : ivoire chaud */
  --forest-dark:   #f0f0ec;
  --forest-med:    #c8c8c4;
  --forest-light:  #8e8e8a;

  /* Accent primaire : lave incandescente */
  --gold-warm:     #ff7800;
  --gold-light:    #ffaa00;

  /* Accent secondaire : lave en fusion */
  --brick:         #ee3a1c;
  --brick-dark:    #5c0c00;

  /* Lignes et separateurs */
  --line:          rgba(220, 220, 215, .12);
  --line-strong:   rgba(220, 220, 215, .28);

  /* Fonctionnel */
  --error:         #ff4520;
  --success:       #5db066;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--forest-dark);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    /* Halos lave doux dans 2 coins (signature volcanique sur pierre froide) */
    radial-gradient(circle at 12% 12%, rgba(255, 120, 0, .12), transparent 45%),
    radial-gradient(circle at 88% 88%, rgba(196, 26, 10, .10), transparent 50%),
    /* Base pierre de Volvic */
    linear-gradient(170deg, #2e3234 0%, #232627 50%, #1a1d1e 100%);
  background-attachment: fixed, fixed, fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
a, a:visited { color: var(--forest-dark); text-decoration: none; }

/* Options des <select> : forcer le styling dark pour éviter le rendu OS clair */
option {
  background-color: var(--cream-card);
  color: var(--forest-dark);
}
option:checked, option:hover {
  background-color: var(--gold-warm);
  color: #fff;
}
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.serif { font-family: 'Fraunces', Georgia, serif; }

/* ============================== ANIMATIONS ============================== */
@keyframes lpcFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lpcBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes lpcLogoHalo {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 120, 0, .55)); }
}
@keyframes lpcShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================== FEUILLES FLOTTANTES ============================== */
.lpc-sheet {
  max-width: 1300px;
  margin: 26px auto;
  background: var(--cream-bg);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  /* Sur dark, on évite l'ombre noire massive (= effet vignette).
     Au lieu de ça : ombre légère + rim light warm subtil pour relever la carte. */
  box-shadow:
    0 1px 0 rgba(255, 200, 140, .08) inset,
    0 8px 24px rgba(0, 0, 0, .35);
  overflow: hidden;
  position: relative;
}
.lpc-sheet::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 140, .35), transparent);
  pointer-events: none;
}
@media (max-width: 1340px) { .lpc-sheet { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 700px) { .lpc-sheet { margin-left: 12px; margin-right: 12px; border-radius: 18px; } }

/* ============================== HEADER ============================== */
.lpc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 20, 16, .85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: padding .2s, box-shadow .25s, background .25s;
}
.lpc-header.scrolled {
  background: rgba(26, 20, 16, .94);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}
.lpc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: 1180px; margin: 0 auto; gap: 16px;
}
.lpc-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700;
  color: #fff4dc; line-height: 1;
}
.lpc-brand .name {
  color: #fff4dc;
  text-shadow: 0 0 14px rgba(255, 170, 0, .35), 0 2px 4px rgba(0, 0, 0, .5);
}
.lpc-brand img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.3), 0 0 18px rgba(255, 120, 0, .25); object-fit: cover; }

/* Wrapper qui porte le viaduc + petit volcan en accent (badge bas-droite) */
.lpc-brand__imgwrap { position: relative; display: inline-block; line-height: 0; }
.lpc-brand__volcano {
  position: absolute; bottom: -2px; right: -4px;
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255, 120, 0, .55));
  animation: lpcVolcanoPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lpcVolcanoPulse {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.12) rotate(3deg); }
}

/* ------ Respiration + halo doré sur TOUS les logos du site (web + app) ------ */
/* Header brand, hero illustration, footer brand, accueil minimaliste PWA, etc. */
.lpc-brand img,
.lpc-hero__visual img,
.lpc-footer__brand img,
.standalone-welcome__logo img {
  animation:
    lpcBreath 4s ease-in-out infinite,
    lpcLogoHalo 4s ease-in-out infinite !important;
}
.lpc-brand .ptit {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px;
  color: var(--gold-warm); display: block; line-height: 1; margin-bottom: -2px;
  transform: rotate(-3deg); letter-spacing: .5px;
}
.lpc-brand .name { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.lpc-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--forest-med); font-weight: 500;
  padding: 8px 12px; border-radius: 8px; transition: background .15s;
}
.lpc-back-link:hover { background: var(--cream-soft); }
.lpc-back-link svg { width: 16px; height: 16px; }

/* ============================== HEADER NAV (right side) ============================== */
.lpc-nav, .lpc-auth-visitor {
  display: flex; align-items: center; gap: 10px;
}
.lpc-nav .nav-link, .lpc-auth-visitor .nav-link {
  padding: 9px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--forest-dark);
  transition: background .15s;
}
.lpc-nav .nav-link:hover, .lpc-auth-visitor .nav-link:hover { background: var(--cream-soft); }
.lpc-nav .btn-primary, .lpc-auth-visitor .btn-primary {
  background: var(--brick); color: #fff;
  padding: 10px 18px; border-radius: 9px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(196, 26, 10, .25);
  transition: background .15s, transform .15s;
}
.lpc-nav .btn-primary:hover, .lpc-auth-visitor .btn-primary:hover { background: var(--brick-dark); transform: translateY(-1px); }

/* ============================== USER MENU (logged in) ============================== */
.lpc-user-menu { position: relative; }
.lpc-user-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream-soft); border: 1px solid var(--line);
  padding: 6px 14px 6px 6px; border-radius: 99px;
  cursor: pointer; transition: background .15s, border-color .15s;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--forest-dark);
}
.lpc-user-trigger:hover { background: var(--cream-card); border-color: var(--gold-warm); }
.lpc-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm);
}
.lpc-user-avatar.has-img { font-size: 0; color: transparent; }
.lpc-user-chevron { width: 14px; height: 14px; color: var(--forest-med); transition: transform .2s; }
.lpc-user-menu.open .lpc-user-chevron { transform: rotate(180deg); }

.lpc-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  padding: 8px;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s;
  z-index: 100;
}
.lpc-user-menu.open .lpc-user-dropdown {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.lpc-user-dropdown a, .lpc-user-dropdown button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--forest-dark);
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .12s;
}
.lpc-user-dropdown a:hover, .lpc-user-dropdown button:hover { background: var(--cream-soft); }
.lpc-user-dropdown .danger { color: var(--brick); }
.lpc-user-dropdown .danger:hover { background: rgba(196, 26, 10, .08); }
.lpc-user-dropdown .divider {
  height: 1px; background: var(--line); margin: 6px 8px;
}
.lpc-user-dropdown .label-account {
  padding: 8px 14px 4px;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 12px;
  color: var(--forest-med);
}
.lpc-user-dropdown .label-account strong { color: var(--forest-dark); font-style: normal; font-weight: 600; }
.lpc-user-dropdown svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold-warm); }

/* ============================== SEARCH BAR ============================== */
.lpc-search {
  position: relative; flex: 1; max-width: 380px;
  min-width: 200px;
}
.lpc-search__input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.lpc-search__icon {
  position: absolute; left: 14px;
  width: 18px; height: 18px; color: var(--forest-med);
  pointer-events: none;
}
.lpc-search input {
  width: 100%;
  background: var(--cream-soft);
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: 10px 16px 10px 42px;
  font-family: inherit; font-size: 14px; color: var(--forest-dark);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.lpc-search input::placeholder { color: var(--forest-med); opacity: .7; }
.lpc-search input:focus {
  outline: none;
  background: var(--cream-card);
  border-color: var(--gold-warm);
  box-shadow: 0 0 0 4px rgba(255, 120, 0, .15);
}

.lpc-search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
  padding: 6px;
  max-height: 380px; overflow-y: auto;
  z-index: 100;
  display: none;
}
.lpc-search.open .lpc-search__results { display: block; }
.lpc-search__results .empty {
  padding: 20px 14px; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
  color: var(--forest-med);
}
.lpc-search__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  cursor: pointer; transition: background .12s;
  text-decoration: none; color: inherit;
}
.lpc-search__item:hover, .lpc-search__item.focused { background: var(--cream-soft); }
.lpc-search__item .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  color: var(--gold-warm); flex-shrink: 0;
}
.lpc-search__item .av.has-img { font-size: 0; color: transparent; }
.lpc-search__item .info { flex: 1; min-width: 0; }
.lpc-search__item .name {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpc-search__item .meta {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 12px; color: var(--forest-med);
}
.lpc-search__item .type-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 8px; border-radius: 99px;
  background: var(--cream-bg); color: var(--gold-warm);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.lpc-search__item .type-badge.commercant { background: rgba(196, 26, 10, .1); color: var(--brick); border-color: rgba(196, 26, 10, .25); }
.lpc-search__item .type-badge.association { background: rgba(93, 176, 102, .12); color: var(--success); border-color: rgba(93, 176, 102, .3); }

@media (max-width: 780px) {
  .lpc-search { max-width: none; }
  /* Liens cachés quand le menu hamburger est fermé, visibles quand .open */
  .lpc-nav:not(.open) .nav-link.hide-mobile { display: none; }
  .lpc-back-link.hide-mobile { display: none; }
}
@media (max-width: 560px) {
  .lpc-search input { font-size: 13px; }
  .lpc-user-trigger .lpc-user-name { display: none; }
}

/* ============================== HERO (titres + eyebrow) ============================== */
.lpc-hero { padding: 56px 32px 36px; text-align: center; position: relative; }
.lpc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', serif;
  font-size: 14px; font-weight: 500; font-style: italic;
  color: var(--gold-warm); margin-bottom: 18px;
}
.lpc-hero__eyebrow::before, .lpc-hero__eyebrow::after {
  content: ''; width: 28px; height: 1px; background: var(--gold-warm); opacity: .6;
}
.lpc-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1; font-weight: 700;
  margin-bottom: 14px; letter-spacing: -.5px;
}
.lpc-hero h1 em {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--brick); font-weight: 500;
  font-variation-settings: 'opsz' 144;
}
.lpc-hero p.sub { font-size: 17px; color: var(--forest-med); max-width: 580px; margin: 0 auto; }

/* ============================== FORM ============================== */
.signup-form-wrap { padding: 12px 48px 56px; }
@media (max-width: 700px) { .signup-form-wrap { padding: 12px 24px 40px; } }

.signup-form .field-group {
  margin-bottom: 32px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.signup-form .field-group:first-child { border-top: none; padding-top: 0; }
.signup-form .field-group h3 {
  font-family: 'Fraunces', serif;
  font-size: 19px; font-weight: 600;
  margin-bottom: 14px; color: var(--forest-dark);
}
.signup-form .field-group h3 em {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--gold-warm); font-weight: 500;
}

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--forest-dark); margin-bottom: 6px;
}
.field label .required { color: var(--brick); font-weight: 700; margin-left: 2px; }
.field label .optional {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  color: var(--forest-med); font-size: 13px; margin-left: 6px;
}

.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="tel"], .field input[type="url"], .field select, .field textarea {
  width: 100%; background: var(--cream-card);
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  padding: 13px 16px;
  font-family: inherit; font-size: 16px; color: var(--forest-dark);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-warm);
  box-shadow: 0 0 0 4px rgba(255, 120, 0, .18); background: var(--cream-soft);
}
.field input.error, .field select.error, .field textarea.error {
  border-color: var(--error); background: rgba(255, 69, 32, .04);
}
.field .help { font-size: 12px; color: var(--forest-med); margin-top: 6px; line-height: 1.5; }
.field .help.error-msg { color: var(--error); }

/* Wrap pour les inputs password avec bouton oeil show/hide (auto-attache via lpc-header.js) */
.lpc-pwd-wrap { position: relative; display: block; }
.lpc-pwd-wrap input[type="password"], .lpc-pwd-wrap input[type="text"] { padding-right: 46px; }
.lpc-pwd-toggle {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med); border-radius: 8px;
  transition: background .15s, color .15s;
  padding: 0;
}
.lpc-pwd-toggle:hover { background: rgba(255, 120, 0, .1); color: var(--gold-warm); }
.lpc-pwd-toggle:active { transform: translateY(-50%) scale(.92); }
.lpc-pwd-toggle svg { width: 20px; height: 20px; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-grid-2 { grid-template-columns: 1fr; gap: 0; } }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c69749' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; cursor: pointer;
}

/* Boutons */
.signup-submit {
  width: 100%;
  background: var(--brick); color: #fff;
  padding: 18px 28px; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(196, 26, 10, .35), inset 0 -3px 0 rgba(0,0,0,.18);
  margin-top: 24px; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .2s;
}
.signup-submit::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255,.25), transparent);
  background-size: 200% 100%; animation: lpcShimmer 4s linear infinite;
  pointer-events: none;
}
.signup-submit:hover { background: var(--brick-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(196, 26, 10, .45), inset 0 -3px 0 rgba(0,0,0,.22); }
.signup-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.signup-alt { text-align: center; margin-top: 24px; font-size: 14px; color: var(--forest-med); }
.signup-alt a { color: var(--brick); font-weight: 600; text-decoration: underline; }

/* Checkbox custom (réutilisable) - case proprement cliquable avec accent-color natif */
.lpc-check-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255, 120, 0, .08);
  border: 1px solid rgba(255, 120, 0, .25);
  border-radius: 10px;
  cursor: pointer;
}
.lpc-check-row.muted {
  background: rgba(0, 0, 0, .04);
  border-color: var(--line);
}
.lpc-check-row input[type="checkbox"] {
  width: 22px; height: 22px; min-width: 22px;
  margin-top: 2px;
  accent-color: var(--brick);
  cursor: pointer;
  flex-shrink: 0;
}
.lpc-check-row label {
  font-size: 14px; color: var(--forest-dark); line-height: 1.5;
  cursor: pointer; flex: 1;
}
.lpc-check-row label a { color: var(--brick); text-decoration: underline; font-weight: 600; }

/* Bouton secondaire (style ghost doré) */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--forest-dark);
  border: 1.5px solid var(--line-strong);
  cursor: pointer; transition: all .15s;
}
.btn-ghost:hover { background: var(--cream-soft); border-color: var(--gold-warm); }

/* ============================== FOOTER ============================== */
.lpc-footer {
  background: linear-gradient(180deg, #1a1d1e 0%, #232627 100%);
  color: #f0f0ec;
  padding: 30px 0; margin-top: 30px;
  text-align: center; font-size: 13px;
  border-top: 1px solid rgba(255, 120, 0, .25);
}
.lpc-footer .container { color: rgba(240, 240, 236, .75); }
.lpc-footer a, .lpc-footer a:visited { color: rgba(240, 240, 236, .85); }
.lpc-footer a:hover { color: var(--gold-light); }
.lpc-footer__signature {
  font-family: 'Caveat', cursive;
  font-size: 18px; font-weight: 600; color: var(--gold-light);
  letter-spacing: .5px;
}
/* ------ Highlight transitoire (deep-link depuis notification) ------ */
.lpc-pub--highlight {
  animation: lpcDeepLinkFlash 2.4s ease-out;
}
.lpc-pub__comment--highlight {
  animation: lpcDeepLinkFlashComment 2.4s ease-out;
  border-radius: 8px;
}
@keyframes lpcDeepLinkFlash {
  0%, 30% { box-shadow: 0 0 0 3px var(--gold-warm), 0 0 0 6px rgba(255, 120, 0, .3); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
@keyframes lpcDeepLinkFlashComment {
  0%, 30% { background: rgba(255, 120, 0, .25); box-shadow: 0 0 0 2px var(--gold-warm); }
  100% { background: transparent; box-shadow: none; }
}
.lpc-photo-comment--highlight {
  animation: lpcDeepLinkFlashComment 2.4s ease-out;
  border-radius: 8px;
}

/* ------ Bannière de statut sur une publication (pending/rejected) ------ */
.lpc-pub__status {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 18px 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  line-height: 1.45;
}
.lpc-pub__status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.lpc-pub__status.pending {
  background: rgba(255, 120, 0, .12);
  border: 1px solid rgba(255, 120, 0, .35);
  color: var(--forest-dark);
}
.lpc-pub__status.pending svg { color: var(--gold-warm); }
.lpc-pub__status.rejected {
  background: rgba(255, 69, 32, .08);
  border: 1px solid rgba(255, 69, 32, .35);
  color: var(--forest-dark);
}
.lpc-pub__status.rejected svg { color: var(--brick); }

/* ------ Actions modération sur une carte publi ------ */
.lpc-pub__mod-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 18px 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.lpc-mod-btn {
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--cream-card);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--forest-dark); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lpc-mod-btn:hover { background: var(--cream-bg); }
.lpc-mod-btn.approve { background: var(--forest-med); color: #fff; border-color: var(--forest-med); }
.lpc-mod-btn.approve:hover { background: var(--gold-warm); border-color: var(--gold-warm); color: #fff; }
.lpc-mod-btn.reject { background: var(--brick); color: #fff; border-color: var(--brick); }
.lpc-mod-btn.reject:hover { background: var(--brick-dark); }
.lpc-mod-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ------ Commentaires verrouillés ou muet ------ */
.lpc-pub__comments-locked {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--cream-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-med); text-align: center;
  font-style: italic;
}

@media (max-width: 700px) {
  .lpc-pub__status { margin: 0 14px 8px; padding: 10px 12px; font-size: 13px; }
  .lpc-pub__mod-actions { margin: 0 14px 10px; }
  .lpc-mod-btn { padding: 8px 12px; font-size: 13px; }
}

/* ------ Modal "Changer catégorie" (mod) ------ */
.lpc-recat-dlg { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lpc-recat-dlg__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lpc-recat-dlg__box {
  position: relative; background: var(--cream-card); border-radius: 16px; width: 480px; max-width: 100%;
  box-shadow: 0 24px 56px rgba(0,0,0,.35); padding: 22px 24px;
}
.lpc-recat-dlg__box header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lpc-recat-dlg__box header h3 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; color: var(--forest-dark); }
.lpc-recat-dlg__close { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; color: var(--forest-med); font-size: 22px; }
.lpc-recat-dlg__close:hover { background: var(--cream-bg); }
.lpc-recat-dlg__intro { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--forest-med); line-height: 1.5; margin-bottom: 14px; }
.lpc-recat-dlg__row { display: grid; gap: 6px; margin-bottom: 14px; }
.lpc-recat-dlg__row label { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--forest-dark); }
.lpc-recat-dlg__row select {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  font-family: 'Inter', sans-serif; font-size: 14px; background: var(--cream-card); color: var(--forest-dark);
}
.lpc-recat-dlg__row select:focus { outline: none; border-color: var(--gold-warm); }
.lpc-recat-dlg__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.lpc-recat-dlg__actions button {
  padding: 9px 18px; border-radius: 9px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: var(--cream-card); color: var(--forest-dark);
}
.lpc-recat-dlg__actions button:hover { background: var(--cream-bg); }
.lpc-recat-dlg__actions button.primary { background: var(--brick); color: #fff; border-color: var(--brick); }
.lpc-recat-dlg__actions button.primary:hover { background: var(--brick-dark); }
.lpc-recat-dlg__actions button:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) { .lpc-recat-dlg { padding: 12px; align-items: flex-end; } .lpc-recat-dlg__box { width: 100%; border-radius: 16px 16px 0 0; } }

/* ------ Modal de signalement de contenu ------ */
.lpc-report-dlg {
  position: fixed; inset: 0; z-index: 10003;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lpc-report-dlg__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  animation: lpcPopIn .15s ease-out;
}
.lpc-report-dlg__box {
  position: relative;
  width: 460px; max-width: 100%;
  background: var(--cream-card);
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
  padding: 22px 24px;
  animation: lpcPopIn .15s ease-out;
}
.lpc-report-dlg__box header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.lpc-report-dlg__box header h3 {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
  color: var(--forest-dark);
}
.lpc-report-dlg__close {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med); font-size: 22px; line-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lpc-report-dlg__close:hover { background: var(--cream-bg); }
.lpc-report-dlg__intro {
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-med); line-height: 1.5;
  margin-bottom: 16px;
}
.lpc-report-dlg__lbl {
  display: block;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--forest-dark); margin: 12px 0 8px;
}
.lpc-report-dlg__reasons {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 8px;
}
.lpc-report-dlg__radio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
  transition: background .12s;
}
.lpc-report-dlg__radio:hover { background: var(--cream-bg); }
.lpc-report-dlg__radio input { accent-color: var(--brick); }
.lpc-report-dlg__form textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line);
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark);
  resize: vertical; min-height: 70px;
}
.lpc-report-dlg__form textarea:focus {
  outline: none; border-color: var(--gold-warm);
}
.lpc-report-dlg__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 16px;
}
.lpc-report-dlg__actions button {
  padding: 9px 18px; border-radius: 9px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line);
  background: var(--cream-card); color: var(--forest-dark);
}
.lpc-report-dlg__actions button:hover { background: var(--cream-bg); }
.lpc-report-dlg__actions button.primary {
  background: var(--brick); color: #fff; border-color: var(--brick);
}
.lpc-report-dlg__actions button.primary:hover { background: var(--brick-dark); }
.lpc-report-dlg__actions button.primary:disabled { opacity: .6; cursor: not-allowed; }

.lpc-report-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--brick-dark); color: #fff;
  padding: 12px 22px; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  z-index: 10005;
  animation: lpcPopIn .2s ease-out;
  pointer-events: none;
}

@media (max-width: 600px) {
  .lpc-report-dlg { padding: 12px; align-items: flex-end; }
  .lpc-report-dlg__box { width: 100%; border-radius: 16px 16px 0 0; }
}

/* ------ Pages légales (mentions / confidentialité / CGU) ------ */
.legal-page {
  max-width: 820px;
  margin: 40px auto 60px;
  padding: 0 24px;
  font-family: 'Inter', sans-serif;
  color: var(--forest-dark);
  line-height: 1.6;
}
.legal-page h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--forest-dark);
  margin: 0 0 8px;
  line-height: 1.1;
}
.legal-page h1 em {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--brick); font-weight: 500;
}
.legal-page .last-update {
  font-style: italic; color: var(--forest-med);
  font-size: 14px; margin-bottom: 30px;
}
.legal-page h2 {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 600;
  color: var(--forest-dark);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-page h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--forest-dark);
  margin: 22px 0 8px;
}
.legal-page p { margin: 0 0 14px; font-size: 15px; }
.legal-page ul { margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin-bottom: 6px; font-size: 15px; }
.legal-page strong { color: var(--forest-dark); font-weight: 600; }
.legal-page a { color: var(--brick); text-decoration: underline; }
.legal-page a:hover { color: var(--brick-dark); }
.legal-page .legal-block {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 14px 0 22px;
}
.legal-page .legal-block p:last-child { margin-bottom: 0; }
.legal-page .legal-block strong { display: inline-block; min-width: 140px; }
@media (max-width: 600px) {
  .legal-page { margin: 24px auto 40px; padding: 0 16px; }
  .legal-page h1 { font-size: 28px; }
  .legal-page h2 { font-size: 19px; margin: 28px 0 10px; }
}

.lpc-footer__legal {
  display: inline-flex; gap: 8px; align-items: center;
  margin-left: 12px;
  font-size: 12.5px; opacity: .8;
}
.lpc-footer__legal a {
  color: var(--cream-bg); text-decoration: none;
  transition: color .15s;
}
.lpc-footer__legal a:hover { color: var(--gold-light); text-decoration: underline; }
.lpc-footer__legal span { opacity: .5; }
@media (max-width: 600px) {
  .lpc-footer__legal { display: flex; justify-content: center; margin: 8px 0 0; flex-wrap: wrap; }
}

/* ============================== CHAT DOCK (Messenger-style chat heads + launchers) ============================== */
.lpc-chat-dock {
  position: fixed;
  bottom: 0;
  right: 20px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 12px;
  z-index: 9000;
  pointer-events: none;
}
.lpc-chat-dock > * { pointer-events: auto; }

/* ------ Launchers (bulles flottantes en bas à droite, style Messenger) ------ */
.lpc-chat-launchers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lpc-launcher-wrap { position: relative; }
.lpc-launcher {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cream-card);
  border: 1px solid var(--line);
  color: var(--forest-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .15s, box-shadow .15s, background .15s;
  position: relative;
}
.lpc-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.lpc-launcher.active { background: var(--gold-warm); color: #fff; }
.lpc-launcher.primary {
  background: linear-gradient(135deg, var(--brick) 0%, var(--brick-dark) 100%);
  color: #fff;
  border-color: transparent;
}
.lpc-launcher.primary.active { background: linear-gradient(135deg, var(--brick-dark) 0%, var(--brick) 100%); }
.lpc-launcher svg { width: 22px; height: 22px; }
.lpc-launcher__badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--brick); color: #fff;
  font-size: 11px; font-weight: 700; font-family: 'Inter', sans-serif;
  min-width: 20px; height: 20px; line-height: 20px;
  padding: 0 6px; border-radius: 10px; text-align: center;
  border: 2px solid var(--cream-bg);
  box-sizing: content-box;
}
.lpc-launcher__badge[hidden] { display: none; }
.lpc-launcher.primary .lpc-launcher__badge {
  background: var(--gold-warm);
  color: var(--forest-dark);
}

/* Popover notifications spécifique */
.lpc-popover--notif .popover-link {
  background: transparent; border: none; cursor: pointer;
  color: var(--brick); font-weight: 600; font-size: 12px;
  padding: 4px 8px; border-radius: 6px;
  font-family: 'Inter', sans-serif;
}
.lpc-popover--notif .popover-link:hover { background: rgba(196, 26, 10, .08); text-decoration: underline; }
.lpc-popover__av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm);
  flex-shrink: 0;
}
.lpc-popover__av.has-img { font-size: 0; color: transparent; }
.lpc-popover__time-block { font-size: 11px; color: var(--forest-med); font-style: italic; margin-top: 2px; }

/* ------ Popover (Messages + Nouveau message) ------ */
.lpc-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-height: 480px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: lpcPopIn .15s ease-out;
}
@keyframes lpcPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.lpc-popover[hidden] { display: none; }
.lpc-popover header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cream-card), var(--cream-soft));
}
.lpc-popover header h4 {
  flex: 1; min-width: 0;
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700;
  color: var(--forest-dark);
}
.lpc-popover header .popover-link {
  font-size: 12px; color: var(--brick); font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  transition: background .15s;
}
.lpc-popover header .popover-link:hover { background: rgba(196, 26, 10, .08); text-decoration: underline; }
.lpc-popover header .ico-close {
  background: transparent; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lpc-popover header .ico-close:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-popover header .ico-close svg { width: 14px; height: 14px; }

.lpc-popover__search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.lpc-popover__search svg { width: 16px; height: 16px; color: var(--forest-med); flex-shrink: 0; }
.lpc-popover__search input {
  flex: 1;
  border: none; background: transparent; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark);
}
.lpc-popover__search input::placeholder { color: var(--forest-med); opacity: .7; }

.lpc-popover__list {
  flex: 1; overflow-y: auto;
  padding: 6px 0;
}
.lpc-popover__loading,
.lpc-popover__empty {
  text-align: center; padding: 26px 18px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13px;
}
.lpc-popover__group {
  padding: 12px 14px 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--forest-med); font-weight: 600;
}
.lpc-popover__group:first-of-type { padding-top: 6px; }

.lpc-popover__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.lpc-popover__item:hover { background: var(--cream-bg); }
.lpc-popover__item.unread { background: rgba(255, 120, 0, .08); }
.lpc-popover__av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px;
  color: var(--gold-warm);
  flex-shrink: 0; position: relative;
}
.lpc-popover__body { flex: 1; min-width: 0; }
.lpc-popover__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.lpc-popover__name {
  font-weight: 600; font-size: 14px; color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpc-popover__time {
  font-size: 11px; color: var(--forest-med); font-style: italic;
  flex-shrink: 0;
}
.lpc-popover__preview {
  font-size: 12.5px; color: var(--forest-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.lpc-popover__item.unread .lpc-popover__name,
.lpc-popover__item.unread .lpc-popover__preview { color: var(--forest-dark); font-weight: 600; }
.lpc-popover__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brick);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .lpc-popover { width: calc(100vw - 24px); right: 0; }
  .lpc-chat-launchers { margin-bottom: 12px; margin-right: 4px; }
  .lpc-launcher { width: 52px; height: 52px; }
}

.lpc-chat-window {
  width: 340px;
  height: 460px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height .2s ease, width .2s ease;
}
.lpc-chat-window.minimized { height: 52px; cursor: pointer; }
.lpc-chat-window.minimized .lpc-chat-stream,
.lpc-chat-window.minimized .lpc-chat-compose { display: none; }

/* (anciennes règles mobile chat: voir la section mobile plus bas, max-width: 700px) */

.lpc-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cream-card), var(--cream-soft));
  position: relative;
  flex-shrink: 0;
}
.lpc-chat-window.minimized .lpc-chat-head { border-bottom: none; }
.lpc-chat-head__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm);
  position: relative; flex-shrink: 0;
}
.lpc-chat-head__avatar.has-img .ini { display: none; }
.lpc-chat-head__avatar .dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #b0b0b0;
  border: 2px solid #fff;
}
.lpc-chat-head__avatar .dot.online { background: #3ec46d; }
.lpc-chat-head__info { flex: 1; min-width: 0; }
.lpc-chat-head__name {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpc-chat-head__status { font-size: 11px; color: var(--forest-med); }
.lpc-chat-head__actions { display: flex; gap: 2px; }
.lpc-chat-head__actions .ico-btn {
  background: transparent; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lpc-chat-head__actions .ico-btn:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-chat-head__actions .ico-btn svg { width: 16px; height: 16px; }
.lpc-chat-head__unread {
  position: absolute; top: 6px; right: 6px;
  background: var(--brick); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; border-radius: 9px; text-align: center;
}
.lpc-chat-window:not(.minimized) .lpc-chat-head__unread { display: none; }

.lpc-chat-stream {
  flex: 1; overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--cream-bg);
}
.lpc-chat-loading,
.lpc-chat-empty {
  text-align: center; padding: 24px 10px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13px;
}
.lpc-chat-bubble {
  max-width: 78%;
  padding: 8px 12px; border-radius: 14px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word;
  position: relative;
}
.lpc-chat-bubble.them {
  align-self: flex-start;
  background: var(--cream-card);
  color: var(--forest-dark);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.lpc-chat-bubble.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brick) 0%, var(--brick-dark) 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.lpc-chat-bubble .t {
  display: block; font-size: 10px; opacity: .65;
  margin-top: 3px; font-style: italic;
}
.lpc-chat-bubble.me .t { text-align: right; }
.lpc-chat-bubble__read {
  display: block; font-size: 10px;
  margin-top: 3px; opacity: .8;
  text-align: right;
}
.lpc-chat-bubble__status {
  align-self: flex-end;
  font-size: 10.5px; color: var(--forest-med);
  padding: 0 4px 4px;
  display: flex; align-items: center; gap: 4px;
  font-family: 'Inter', sans-serif;
}
.lpc-chat-bubble__status span {
  display: inline-flex; align-items: center; gap: 4px;
}
.lpc-chat-bubble__status svg { width: 11px; height: 11px; }
.lpc-chat-bubble__status .sent      { color: var(--forest-med); }
.lpc-chat-bubble__status .delivered { color: var(--forest-light); }
.lpc-chat-bubble__status .read      { color: var(--brick); font-weight: 600; }
.lpc-chat-bubble__status .failed    { color: var(--error); font-weight: 600; }

.lpc-chat-compose {
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  background: var(--cream-card);
  display: flex; gap: 6px; align-items: flex-end;
  flex-shrink: 0;
  position: relative;
}
.lpc-chat-compose textarea {
  flex: 1; resize: none;
  padding: 8px 12px; border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--cream-bg);
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-dark);
  min-height: 36px; max-height: 110px;
  line-height: 1.4;
}
.lpc-chat-compose textarea:focus { outline: none; border-color: var(--gold-warm); background: var(--cream-card); }
.lpc-chat-compose .lpc-emoji-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: var(--forest-med);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.lpc-chat-compose .lpc-emoji-btn:hover { background: var(--cream-bg); color: var(--gold-warm); }
.lpc-chat-compose .lpc-emoji-btn svg { width: 20px; height: 20px; }

.lpc-chat-compose .lpc-send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brick); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, scale .15s ease-out;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  --thumb-scale: 1;
  z-index: 1;
}
.lpc-chat-compose .lpc-send-btn:hover { background: var(--brick-dark); }
.lpc-chat-compose .lpc-send-btn svg { width: 18px; height: 18px; transition: opacity .15s, transform .15s; }
.lpc-chat-compose .lpc-send-btn .ico-thumb,
.lpc-chat-compose .lpc-send-btn .ico-send  { position: absolute; }
.lpc-chat-compose.empty    .lpc-send-btn .ico-thumb { opacity: 1; transform: scale(1); }
.lpc-chat-compose.empty    .lpc-send-btn .ico-send  { opacity: 0; transform: scale(.5); }
.lpc-chat-compose.has-text .lpc-send-btn .ico-thumb { opacity: 0; transform: scale(.5); }
.lpc-chat-compose.has-text .lpc-send-btn .ico-send  { opacity: 1; transform: scale(1); }

/* Press-and-hold : le pouce grossit et vibre (style Messenger) */
.lpc-chat-compose .lpc-send-btn.charging {
  scale: var(--thumb-scale, 1);
  z-index: 100;
  animation: lpcThumbVibrate .14s linear infinite;
  background: linear-gradient(135deg, var(--brick) 0%, var(--gold-warm) 100%);
}
@keyframes lpcThumbVibrate {
  0%   { rotate: -5deg; translate: -1px 0; }
  50%  { rotate: 5deg;  translate: 1px 0; }
  100% { rotate: -5deg; translate: -1px 0; }
}

/* ------ Conteneur message + trigger réaction au hover ------ */
.lpc-chat-msg {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  margin: 2px 0;
  max-width: 100%;
}
.lpc-chat-msg.mine { align-items: flex-end; }
.lpc-chat-msg__row {
  display: flex; align-items: center; gap: 4px;
  max-width: 100%;
}
.lpc-chat-msg.mine .lpc-chat-msg__row { flex-direction: row-reverse; }
.lpc-msg-actions {
  display: inline-flex; gap: 2px; align-items: center;
  opacity: 0; transition: opacity .15s;
  flex-shrink: 0;
}
.lpc-chat-msg:hover .lpc-msg-actions { opacity: 1; }
.lpc-msg-act {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream-card); border: 1px solid var(--line);
  color: var(--forest-med);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, transform .15s, background .15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  padding: 0;
}
.lpc-msg-act:hover { color: var(--gold-warm); background: var(--cream-bg); transform: scale(1.15); }
.lpc-msg-act svg { width: 13px; height: 13px; }
/* Legacy class (kept for compat with reaction code) */
.lpc-react-trigger {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream-card); border: 1px solid var(--line);
  color: var(--forest-med);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s, transform .15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  flex-shrink: 0;
  padding: 0;
}
.lpc-chat-msg:hover .lpc-react-trigger { opacity: 1; }
.lpc-react-trigger:hover { color: var(--gold-warm); transform: scale(1.15); }
.lpc-react-trigger svg { width: 14px; height: 14px; }

/* ------ Citation au-dessus d'une bulle de réponse ------ */
.lpc-reply-cite {
  display: flex; flex-direction: column;
  padding: 6px 10px 4px;
  margin: 0 4px -2px;
  background: rgba(0, 0, 0, .06);
  border-left: 3px solid var(--gold-warm);
  border-radius: 8px 8px 4px 4px;
  font-size: 11.5px;
  max-width: 78%;
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s;
}
.lpc-reply-cite:hover { opacity: 1; }
.lpc-chat-msg.mine   .lpc-reply-cite { align-self: flex-end; }
.lpc-chat-msg.theirs .lpc-reply-cite { align-self: flex-start; }
.lpc-reply-cite__name {
  font-weight: 600; color: var(--forest-dark); font-size: 11px;
  font-family: 'Fraunces', serif; font-style: italic;
}
.lpc-reply-cite__body {
  color: var(--forest-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Inter', sans-serif;
}

/* ------ Preview "Réponse à..." au-dessus du compose ------ */
.lpc-chat-reply-preview {
  display: flex; align-items: stretch; gap: 0;
  padding: 8px 10px 6px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
  position: relative;
}
.lpc-chat-reply-preview[hidden] { display: none; }
.lpc-reply-prev__bar {
  width: 3px; background: var(--gold-warm); border-radius: 2px; flex-shrink: 0;
  margin-right: 10px;
}
.lpc-reply-prev__content { flex: 1; min-width: 0; }
.lpc-reply-prev__label {
  font-size: 11px; color: var(--forest-med);
}
.lpc-reply-prev__label strong { color: var(--forest-dark); }
.lpc-reply-prev__body {
  font-size: 12px; color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.lpc-reply-prev__close {
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  padding: 0;
}
.lpc-reply-prev__close:hover { background: var(--cream-bg); color: var(--brick); }
.lpc-reply-prev__close svg { width: 14px; height: 14px; }

/* ------ Bulle supprimée ------ */
.lpc-chat-bubble.deleted {
  background: transparent !important;
  border: 1px dashed var(--line-strong) !important;
  color: var(--forest-med);
  font-style: italic;
  font-size: 11.5px;
  box-shadow: none;
  padding: 4px 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.lpc-chat-bubble.deleted svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .7; margin: 0 !important; vertical-align: baseline !important; }
.lpc-chat-bubble.deleted em { font-style: italic; }
.lpc-chat-bubble.deleted .t {
  display: inline !important;
  margin: 0 !important;
  font-size: 10px;
  opacity: .55;
  flex-shrink: 0;
}
.lpc-chat-bubble__forwarded {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-style: italic; opacity: .75;
  margin-bottom: 3px;
  font-family: 'Inter', sans-serif;
}
.lpc-chat-bubble__edited {
  font-size: 10px; opacity: .6; font-style: italic;
}
.lpc-chat-bubble__pin {
  width: 11px; height: 11px;
  vertical-align: -1px; margin-right: 4px;
  opacity: .8;
}

/* ------ -0dition inline ------ */
.lpc-chat-bubble__edit {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 200px;
}
.lpc-chat-bubble__edit textarea {
  resize: vertical;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--cream-card);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--forest-dark);
  line-height: 1.4;
  min-height: 60px;
}
.lpc-chat-bubble__edit-btns { display: flex; gap: 6px; justify-content: flex-end; }
.lpc-chat-bubble__edit-btns button {
  border: none; cursor: pointer;
  padding: 4px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.lpc-chat-bubble__edit-btns button[type=submit] { background: var(--brick); color: #fff; }
.lpc-chat-bubble__edit-btns button[type=submit]:hover { background: var(--brick-dark); }
.lpc-chat-bubble__edit-btns button[type=button] { background: var(--cream-bg); color: var(--forest-dark); }

/* ------ Bannière épinglé en haut du stream ------ */
.lpc-chat-pinned {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(135deg, var(--cream-card) 0%, var(--cream-soft) 100%);
  border: 1px solid var(--gold-warm);
  border-radius: 10px;
  padding: 6px 10px;
  margin: 0 6px 8px;
  font-size: 12px;
  color: var(--forest-dark);
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.lpc-chat-pinned svg { width: 13px; height: 13px; color: var(--gold-warm); flex-shrink: 0; }
.lpc-chat-pinned:hover { background: var(--cream-card); }

/* Highlight au scroll vers un message cité/épinglé */
.lpc-chat-msg.highlight .lpc-chat-bubble {
  animation: lpcHighlight 1.5s ease-out;
}
@keyframes lpcHighlight {
  0%, 30% { box-shadow: 0 0 0 3px var(--gold-warm); }
  100% { box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
}

/* ------ Menu d'actions 3-points ------ */
.lpc-msg-menu {
  position: absolute;
  top: calc(100% + 4px);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  padding: 4px;
  min-width: 200px;
  z-index: 100;
  animation: lpcPopIn .12s ease-out;
}
.lpc-msg-menu.lpc-msg-menu--above {
  top: auto; bottom: calc(100% + 4px);
}
.lpc-chat-msg.mine   .lpc-msg-menu { right: 0; }
.lpc-chat-msg.theirs .lpc-msg-menu { left: 0; }
.lpc-msg-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 12px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--forest-dark);
  text-align: left;
  transition: background .12s;
}
.lpc-msg-menu__item:hover { background: var(--cream-bg); }
.lpc-msg-menu__item.danger { color: var(--brick); }
.lpc-msg-menu__item.danger:hover { background: rgba(255, 69, 32, .08); }
.lpc-msg-menu__item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ------ Dialog transfert ------ */
.lpc-forward-dlg {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: lpcFadeIn .15s ease-out;
}
@keyframes lpcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lpc-forward-dlg__box {
  background: var(--cream-card); border-radius: 14px;
  width: 380px; max-width: 90vw;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.lpc-forward-dlg__box header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cream-card), var(--cream-soft));
}
.lpc-forward-dlg__box header h4 {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700;
  color: var(--forest-dark);
}
.lpc-forward-dlg__box header button {
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; color: var(--forest-med);
  width: 28px; height: 28px; border-radius: 50%;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.lpc-forward-dlg__box header button:hover { background: var(--cream-bg); color: var(--brick); }
.lpc-forward-dlg__search {
  border: none; border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: var(--cream-card);
  outline: none;
  color: var(--forest-dark);
}
.lpc-forward-dlg__search:focus { border-bottom-color: var(--gold-warm); }
.lpc-forward-dlg__list { flex: 1; overflow-y: auto; padding: 6px 0; }
.lpc-forward-dlg__empty {
  text-align: center; padding: 30px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic;
}
.lpc-forward-dlg__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 18px;
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.lpc-forward-dlg__item:hover { background: var(--cream-bg); }
.lpc-forward-dlg__item .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm);
  flex-shrink: 0;
}
.lpc-forward-dlg__item .av.has-img { font-size: 0; color: transparent; }
.lpc-forward-dlg__item .nm {
  font-size: 14px; color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------ Pill de réactions : sous la bulle, légèrement en retrait ------ */
.lpc-react-pill {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  margin: 2px 14px 4px;
  position: relative;
  z-index: 3;
}
.lpc-chat-msg.mine   .lpc-react-pill { align-self: flex-end; }
.lpc-chat-msg.theirs .lpc-react-pill { align-self: flex-start; }
.lpc-react-pill__item {
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 7px 0 5px;
  height: 22px;
  font-size: 13px; line-height: 22px;
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
  transition: background .12s, transform .12s, border-color .12s;
  font-family: 'Inter', sans-serif;
  color: var(--forest-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.lpc-react-pill__item:hover { background: var(--cream-bg); transform: translateY(-1px); }
.lpc-react-pill__item.mine  { background: rgba(255, 120, 0, .22); border-color: var(--gold-warm); }
.lpc-react-pill__item .n    { font-size: 11px; font-weight: 600; color: var(--forest-med); }
.lpc-react-pill__item.mine .n { color: var(--brick); }

/* Sur un message emoji-only : la pill est sur le bord, ne masque pas l'emoji */
.lpc-chat-msg:has(.lpc-chat-bubble.emoji-only) .lpc-react-pill {
  margin-top: 0;
}

/* ------ Barre flottante au-dessus du message au clic sur trigger ------ */
.lpc-react-bar {
  position: absolute;
  bottom: calc(100% - 6px);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 4px 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
  display: inline-flex; gap: 2px; align-items: center;
  z-index: 50;
  animation: lpcPopIn .15s ease-out;
}
.lpc-react-bar.lpc-react-bar--below {
  bottom: auto;
  top: calc(100% - 6px);
}
.lpc-chat-msg.theirs .lpc-react-bar { left: 8px; }
.lpc-chat-msg.mine   .lpc-react-bar { right: 8px; }
.lpc-react-bar__btn,
.lpc-react-bar__more {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
  padding: 0;
}
.lpc-react-bar__btn:hover  { background: var(--cream-bg); transform: scale(1.25); }
.lpc-react-bar__more {
  color: var(--forest-med);
  font-weight: 700;
  font-size: 18px;
  border-left: 1px solid var(--line);
  border-radius: 0;
  margin-left: 2px; padding-left: 6px;
  width: auto; min-width: 32px;
}
.lpc-react-bar__more:hover { color: var(--brick); background: var(--cream-bg); transform: scale(1.1); }

/* Picker complet (-9) à l'intérieur de la barre */
.lpc-react-bar-full {
  position: absolute;
  bottom: 100%; left: 0;
  width: 320px; height: 320px;
  display: flex; flex-direction: column;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  overflow: hidden;
  margin-bottom: 6px;
}
.lpc-chat-msg.mine .lpc-react-bar-full { left: auto; right: 0; }
.lpc-react-bar-full .lpc-emoji-tabs {
  display: flex; padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
  overflow-x: auto; scrollbar-width: none;
}
.lpc-react-bar-full .lpc-emoji-tabs::-webkit-scrollbar { display: none; }
.lpc-react-bar-full .lpc-emoji-tab {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; padding: 6px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.lpc-react-bar-full .lpc-emoji-tab:hover { background: var(--cream-card); }
.lpc-react-bar-full .lpc-emoji-scroll { flex: 1; overflow-y: auto; padding: 4px 8px; }
.lpc-react-bar-full .lpc-emoji-group { margin: 4px 0 10px; }
.lpc-react-bar-full .lpc-emoji-group__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--forest-med); font-weight: 700; padding: 6px 4px;
  position: sticky; top: -4px; background: var(--cream-card); z-index: 1;
}
.lpc-react-bar-full .lpc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.lpc-react-bar-full .lpc-emoji-cell {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: 6px;
}
.lpc-react-bar-full .lpc-emoji-cell:hover { background: var(--cream-bg); transform: scale(1.2); }

/* Bulles emoji-only : pas de fond, gros emoji */
.lpc-chat-bubble.emoji-only {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 36px;
  line-height: 1.1;
  padding: 2px 6px;
  color: inherit;
}
.lpc-chat-bubble.emoji-only .t { font-size: 10px; opacity: .55; display: block; margin-top: 4px; }

/* ------ Popup emojis (au-dessus du bouton emoji du chat compose) ------ */
.lpc-emoji-pop {
  position: absolute;
  bottom: calc(100% + 8px); left: 6px;
  width: 320px; height: 360px;
  display: flex; flex-direction: column;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
  z-index: 100;
  overflow: hidden;
}
.lpc-emoji-pop[hidden] { display: none; }
.lpc-emoji-tabs {
  display: flex; gap: 0;
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.lpc-emoji-tabs::-webkit-scrollbar { display: none; }
.lpc-emoji-tab {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  padding: 6px 8px; border-radius: 8px;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.lpc-emoji-tab:hover { background: var(--cream-card); transform: scale(1.1); }
.lpc-emoji-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.lpc-emoji-group { margin: 4px 0 10px; }
.lpc-emoji-group__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--forest-med); font-weight: 700;
  padding: 6px 4px 6px;
  position: sticky; top: -4px;
  background: var(--cream-card);
  z-index: 1;
}
.lpc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
}
.lpc-emoji-cell {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  padding: 4px; border-radius: 6px;
  transition: background .1s, transform .1s;
}
.lpc-emoji-cell:hover { background: var(--cream-bg); transform: scale(1.2); }

/* ============================== ONLINE DOT générique ============================== */
[data-online-slug]::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #b0b0b0;
  border: 2px solid var(--cream-card);
  box-sizing: content-box;
  transition: background .2s;
}
[data-online-slug].online::after { background: #3ec46d; }

/* ============================== SIDEBAR amis en ligne (page messages) ============================== */
.msg-online-panel {
  border-left: 1px solid var(--line);
  background: var(--cream-soft);
  padding: 18px 14px;
  overflow-y: auto;
  max-height: 70vh;
}
.msg-online-panel h3 {
  font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600;
  color: var(--forest-dark);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.msg-online-panel h3 .count {
  background: var(--brick); color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 9px;
  letter-spacing: 0;
}
.msg-online-panel .village-label {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 12px; color: var(--gold-warm);
  margin: 12px 0 6px; padding-left: 4px;
}
.msg-online-panel .village-label:first-of-type { margin-top: 0; }
.msg-online-panel .village-label.group-label {
  font-style: normal; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: 11px; color: var(--forest-med);
  border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: 18px;
}
.msg-online-panel .village-label.group-label:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.msg-online-panel .village-label.sub { margin-top: 8px; font-size: 11px; opacity: .8; }
.msg-online-item.offline { opacity: .55; }
.msg-online-item.offline:hover { opacity: 1; }
.msg-online-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 9px;
  cursor: pointer;
  transition: background .15s;
}
.msg-online-item:hover { background: var(--cream-card); }
.msg-online-item__av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  color: var(--gold-warm);
  flex-shrink: 0; position: relative;
}
.msg-online-item__name {
  font-size: 13px; color: var(--forest-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-online-panel .empty {
  text-align: center; padding: 30px 10px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13px;
}

@media (max-width: 1000px) {
  .msg-online-panel { display: none; }
}

/* ============================== PHOTO MODAL (style Facebook : photo plein écran + bandeau bas + side panel) ============================== */
body.lpc-photo-modal-open { overflow: hidden; }
.lpc-photo-modal {
  position: fixed; inset: 0;
  z-index: 10001;
  animation: lpcFadeIn .15s ease-out;
  display: flex;
}
.lpc-photo-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .94);
  cursor: pointer;
}
.lpc-photo-modal__viewer {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  transition: width .25s ease;
}
.lpc-photo-modal__close {
  position: absolute; top: 16px; left: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255,.12); border: none; color: #fff;
  cursor: pointer; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
  backdrop-filter: blur(8px);
}
.lpc-photo-modal__close:hover { background: rgba(255, 255, 255,.25); }
.lpc-photo-modal__close svg { width: 18px; height: 18px; }

.lpc-photo-modal__topbar {
  position: absolute; top: 14px; right: 16px;
  z-index: 6;
  padding: 8px 14px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  pointer-events: none;
}
.lpc-photo-topbar__title strong {
  display: block;
  font-family: 'Fraunces', serif; font-size: 15px;
  color: #fff;
}
.lpc-photo-topbar__title span {
  font-size: 11.5px; color: rgba(255, 255, 255,.7); font-style: italic;
}

.lpc-photo-modal__image-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 70px 24px 16px;  /* top padding pour ne pas masquer sous le topbar */
}
.lpc-photo-modal__image-wrap img {
  max-width: 100%; max-height: 100%;
  display: block;
  object-fit: contain;
}
.lpc-photo-modal__loading, .lpc-photo-modal__empty {
  color: #d8cea0; font-family: 'Fraunces', serif; font-style: italic;
  text-align: center; padding: 40px;
}

/* Bandeau bas (compteurs + boutons J'aime / Commenter) sur fond translucide noir */
.lpc-photo-modal__bottombar {
  position: relative;
  flex-shrink: 0;
  background: rgba(20, 20, 20, .85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255,.08);
  padding: 12px 24px 14px;
  color: #fff;
}
.lpc-photo-modal__counts {
  display: flex; align-items: center; gap: 14px;
  min-height: 26px; margin-bottom: 6px;
}
.lpc-photo-modal__empty-summary {
  font-size: 13px; color: rgba(255, 255, 255,.5); font-style: italic;
}
.lpc-photo-count {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: rgba(255, 255, 255,.85);
  padding: 2px 4px; border-radius: 6px;
  transition: background .12s, color .12s;
}
.lpc-photo-count:hover { background: rgba(255, 255, 255,.08); color: #fff; }
.lpc-photo-count .emojis { display: inline-flex; align-items: center; }
.lpc-photo-count .emojis .e {
  font-size: 14px;
  background: rgba(255, 255, 255,.95);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lpc-photo-count .emojis .e:first-child { margin-left: 0; }
.lpc-photo-count .n { font-weight: 600; }

.lpc-photo-modal__actions {
  display: flex; gap: 6px;
  border-top: 1px solid rgba(255, 255, 255,.1);
  padding-top: 6px;
  position: relative;
}
.lpc-photo-like-wrap {
  flex: 1;
  position: relative;
  display: flex;
}
.lpc-photo-action-btn {
  flex: 1;
  background: transparent; border: none; cursor: pointer;
  padding: 10px 14px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
  color: rgba(255, 255, 255,.85);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, color .15s;
  user-select: none;
}
.lpc-photo-action-btn:hover { background: rgba(255, 255, 255,.08); color: #fff; }
.lpc-photo-action-btn .ico {
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.lpc-photo-action-btn .ico svg { width: 100%; height: 100%; }
.lpc-photo-action-btn .lbl { line-height: 1; }
.lpc-photo-action-btn.liked { color: #5da4ff; }
.lpc-photo-action-btn.liked .ico svg { fill: currentColor; stroke: currentColor; }
.lpc-photo-comment .meta .like-btn { display: inline-flex; align-items: center; gap: 4px; }
.lpc-photo-comment .meta .like-btn .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; font-size: 13px;
}
.lpc-photo-comment .meta .like-btn .ico svg { width: 100%; height: 100%; }
.lpc-photo-comment .meta .like-btn.liked .ico svg { fill: currentColor; stroke: currentColor; }

.lpc-photo-react-floater {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 6px 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
  display: inline-flex; gap: 4px; align-items: center;
  z-index: 50;
  animation: lpcPopIn .15s ease-out;
}
.lpc-photo-react-floater[hidden] { display: none; }
.lpc-photo-react-floater__btn {
  background: transparent; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 30px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
  padding: 0;
  color: initial;
}
.lpc-photo-react-floater__btn:hover { background: rgba(0,0,0,.05); transform: scale(1.4); }

/* ------ Side panel (commentaires / réactors) qui glisse depuis la droite ------ */
.lpc-photo-modal__side {
  position: relative;
  width: 380px;
  background: var(--cream-card);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  box-shadow: -8px 0 30px rgba(0,0,0,.4);
  animation: lpcSlideInRight .25s ease-out;
}
.lpc-photo-modal__side[hidden] { display: none; }
@keyframes lpcSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.lpc-photo-modal__side > header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
}
.lpc-photo-modal__side > header h4 {
  flex: 1;
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700;
  color: var(--forest-dark);
}
.lpc-photo-side__back {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lpc-photo-side__back:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-photo-side__back svg { width: 16px; height: 16px; }
.lpc-photo-side__content {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.lpc-photo-side__empty {
  text-align: center; padding: 32px 18px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13.5px;
}
.lpc-photo-side__comments-list {
  flex: 1; overflow-y: auto;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.lpc-photo-side__compose {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--cream-card);
}
.lpc-photo-side__compose input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--cream-bg);
  border-radius: 18px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark);
  outline: none;
}
.lpc-photo-side__compose input:focus { border-color: var(--gold-warm); background: var(--cream-card); }
.lpc-photo-side__compose { position: relative; }
.lpc-photo-side__compose button[type=submit] {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brick); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.lpc-photo-side__compose button[type=submit]:hover { background: var(--brick-dark); transform: translateY(-1px); }
.lpc-photo-side__compose button[type=submit] svg { width: 16px; height: 16px; }
.lpc-photo-side__emoji-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding: 0;
}
.lpc-photo-side__emoji-btn:hover { background: var(--cream-bg); color: var(--gold-warm); }
.lpc-photo-side__emoji-btn svg { width: 20px; height: 20px; }
.lpc-photo-side__emoji-pop {
  position: absolute;
  bottom: calc(100% + 6px); left: 10px;
  width: 320px; height: 320px;
  display: flex; flex-direction: column;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  z-index: 100;
  overflow: hidden;
}
.lpc-photo-side__emoji-pop[hidden] { display: none; }
.lpc-photo-side__emoji-pop .lpc-emoji-tabs {
  display: flex; padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
  overflow-x: auto; scrollbar-width: none;
}
.lpc-photo-side__emoji-pop .lpc-emoji-tabs::-webkit-scrollbar { display: none; }
.lpc-photo-side__emoji-pop .lpc-emoji-tab {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; padding: 6px 8px; border-radius: 6px; flex-shrink: 0;
}
.lpc-photo-side__emoji-pop .lpc-emoji-tab:hover { background: var(--cream-card); }
.lpc-photo-side__emoji-pop .lpc-emoji-scroll { flex: 1; overflow-y: auto; padding: 4px 8px; }
.lpc-photo-side__emoji-pop .lpc-emoji-group { margin: 4px 0 10px; }
.lpc-photo-side__emoji-pop .lpc-emoji-group__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--forest-med); font-weight: 700; padding: 6px 4px;
  position: sticky; top: -4px; background: var(--cream-card); z-index: 1;
}
.lpc-photo-side__emoji-pop .lpc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.lpc-photo-side__emoji-pop .lpc-emoji-cell {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: 6px;
}
.lpc-photo-side__emoji-pop .lpc-emoji-cell:hover { background: var(--cream-bg); transform: scale(1.2); }

/* -0dition inline d'un commentaire photo */
.lpc-photo-comment .bubble.editing {
  background: transparent;
  padding: 0;
  display: block;
}
.lpc-photo-comment__edit {
  display: flex; flex-direction: column; gap: 6px;
}
.lpc-photo-comment__edit input {
  width: 100%;
  border: 1px solid var(--gold-warm); background: var(--cream-card);
  border-radius: 12px; padding: 7px 12px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark); outline: none;
}
.lpc-photo-comment__edit-btns {
  display: flex; gap: 6px; justify-content: flex-end;
}
.lpc-photo-comment__edit-btns button {
  border: none; cursor: pointer;
  padding: 4px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.lpc-photo-comment__edit-btns button[type=submit] { background: var(--brick); color: #fff; }
.lpc-photo-comment__edit-btns button[type=submit]:hover { background: var(--brick-dark); }
.lpc-photo-comment__edit-btns button[type=button] { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-photo-comment .meta .edit-btn,
.lpc-photo-comment .meta button {
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med); font-size: 11px; font-weight: 600;
  padding: 0;
}
.lpc-photo-comment .meta .edit-btn:hover { color: var(--gold-warm); text-decoration: underline; }
.lpc-photo-comment .meta .edited-mark { font-size: 10.5px; opacity: .6; font-style: italic; }

@media (max-width: 800px) {
  .lpc-photo-modal__side { width: 100%; position: absolute; inset: 0; z-index: 10; }
}

/* Panel "qui a réagi" qui glisse au-dessus de la modale */
.lpc-photo-reactors-panel {
  position: absolute; inset: 0;
  background: var(--cream-card);
  display: flex; flex-direction: column;
  z-index: 20;
  animation: lpcSlideUp .2s ease-out;
}
@keyframes lpcSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lpc-photo-reactors-panel header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.lpc-photo-reactors-panel header button {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
}
.lpc-photo-reactors-panel header button:hover { background: var(--cream-bg); }
.lpc-photo-reactors-panel header button svg { width: 16px; height: 16px; }
.lpc-photo-reactors-panel header h4 {
  font-family: 'Fraunces', serif; font-size: 18px;
  color: var(--forest-dark);
}
.lpc-photo-reactors-tabs {
  display: flex; gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.lpc-photo-reactors-tabs::-webkit-scrollbar { display: none; }
.lpc-photo-reactors-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 14px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-med); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.lpc-photo-reactors-tab:hover { color: var(--forest-dark); }
.lpc-photo-reactors-tab.active {
  color: var(--brick);
  border-bottom-color: var(--brick);
}
.lpc-photo-reactors-tab .e { font-size: 18px; }
.lpc-photo-reactors-tab .c { font-size: 12.5px; opacity: .7; }
.lpc-photo-reactors-list {
  flex: 1; overflow-y: auto;
  padding: 6px 0;
}
.lpc-photo-reactor {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  text-decoration: none; color: inherit;
  transition: background .12s;
  position: relative;
}
.lpc-photo-reactor:hover { background: var(--cream-bg); }
.lpc-photo-reactor .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm); flex-shrink: 0;
  position: relative;
}
.lpc-photo-reactor .av.has-img { font-size: 0; color: transparent; }
.lpc-photo-reactor .av .reaction-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream-card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lpc-photo-reactor .nm {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--forest-dark); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpc-photo-modal__no-comments {
  text-align: center; padding: 30px 10px;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 13.5px;
}
.lpc-photo-comment {
  display: flex; gap: 10px; align-items: flex-start;
}
.lpc-photo-comment .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: var(--gold-warm); flex-shrink: 0;
}
.lpc-photo-comment .av.has-img { font-size: 0; color: transparent; }
.lpc-photo-comment .bd { flex: 1; min-width: 0; }
.lpc-photo-comment .bubble {
  background: var(--cream-bg);
  padding: 7px 12px;
  border-radius: 14px;
  display: inline-block;
  max-width: 100%;
}
.lpc-photo-comment .bubble .nm {
  font-weight: 600; color: var(--forest-dark);
  font-size: 13px; font-family: 'Inter', sans-serif;
  display: block;
  text-decoration: none;
}
.lpc-photo-comment .bubble .nm:hover { text-decoration: underline; }
.lpc-photo-comment .bubble .tx {
  font-size: 14px; color: var(--forest-dark);
  margin-top: 2px;
  white-space: pre-wrap; word-wrap: break-word;
}
.lpc-photo-comment .meta {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; color: var(--forest-med);
  margin-top: 4px; padding-left: 6px;
}
.lpc-photo-comment .meta .del {
  background: transparent; border: none; cursor: pointer;
  color: var(--brick); font-size: 11px; font-weight: 600;
  padding: 0;
}
.lpc-photo-comment .meta .del:hover { text-decoration: underline; }
.lpc-photo-comment.deleted .bubble { background: transparent; border: 1px dashed var(--line-strong); color: var(--forest-med); font-style: italic; font-size: 12.5px; }

/* Bouton J'aime / Répondre / Modifier dans la meta */
.lpc-photo-comment .meta .like-btn,
.lpc-photo-comment .meta .reply-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med); font-size: 12px; font-weight: 600;
  padding: 0;
  transition: color .12s;
}
.lpc-photo-comment .meta .like-btn:hover,
.lpc-photo-comment .meta .reply-btn:hover { color: var(--forest-dark); text-decoration: underline; }
.lpc-photo-comment .meta .like-btn.liked { font-weight: 700; }

/* Floater de réactions au long-press sur "J'aime" */
.lpc-photo-comment__like-wrap { position: relative; display: inline-block; }
.lpc-photo-comment__react-floater {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 4px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: inline-flex; gap: 2px; align-items: center;
  z-index: 50;
  animation: lpcPopIn .15s ease-out;
}
.lpc-photo-comment__react-floater[hidden] { display: none; }
.lpc-photo-comment__react-floater .floater-btn {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
  padding: 0;
}
.lpc-photo-comment__react-floater .floater-btn:hover {
  background: var(--cream-bg); transform: scale(1.3);
}

/* Pill de réactions sous le commentaire (en bas à droite de la bulle) */
.lpc-photo-comment .bubble { position: relative; }
.lpc-photo-comment__pill {
  position: absolute;
  bottom: -8px; right: -4px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1px 7px 1px 5px;
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  color: var(--forest-dark);
}
.lpc-photo-comment__pill .emojis { font-size: 13px; }
.lpc-photo-comment__pill .n { font-weight: 600; color: var(--forest-med); }

/* Réponses indentées */
.lpc-photo-comment__replies {
  margin-left: 48px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.lpc-photo-comment.reply .av { width: 30px; height: 30px; font-size: 12px; }
.lpc-photo-comment.reply .bubble { padding: 6px 10px; }
.lpc-photo-comment.reply .bubble .nm { font-size: 12.5px; }
.lpc-photo-comment.reply .bubble .tx { font-size: 13.5px; }

/* Preview "Réponse à..." au-dessus du compose */
.lpc-photo-reply-prev {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--forest-med);
}
.lpc-photo-reply-prev .cancel {
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 18px; line-height: 1;
  color: var(--forest-med);
  margin-left: auto;
}
.lpc-photo-reply-prev .cancel:hover { background: var(--cream-bg); color: var(--brick); }

.lpc-photo-modal__compose {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--cream-card);
}
.lpc-photo-modal__compose input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--cream-bg);
  border-radius: 18px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark);
  outline: none;
}
.lpc-photo-modal__compose input:focus { border-color: var(--gold-warm); background: var(--cream-card); }
.lpc-photo-modal__compose button {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brick); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.lpc-photo-modal__compose button:hover { background: var(--brick-dark); transform: translateY(-1px); }
.lpc-photo-modal__compose button svg { width: 16px; height: 16px; }

/* Curseur pointer sur photos cliquables */
.lpc-photo-clickable { cursor: pointer; transition: transform .15s; }
.lpc-photo-clickable:hover { transform: scale(1.03); }

/* ============================== FIL D'ACTUALIT-0 (publications) ============================== */
.lpc-feed { display: flex; flex-direction: column; gap: 18px; }

.lpc-feed-tabs {
  position: relative;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 8px;
  overflow: hidden;
}
.lpc-feed-tabs__scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.lpc-feed-tabs__scroll::-webkit-scrollbar { display: none; }
/* Fade sur les bords quand il y a du débordement (suggère le scroll) */
.lpc-feed-tabs::before,
.lpc-feed-tabs::after {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px;
  width: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 1;
}
.lpc-feed-tabs::before {
  left: 0;
  background: linear-gradient(to right, var(--cream-card), transparent);
  border-radius: 14px 0 0 14px;
}
.lpc-feed-tabs::after {
  right: 0;
  background: linear-gradient(to left, var(--cream-card), transparent);
  border-radius: 0 14px 14px 0;
}
.lpc-feed-tabs.has-overflow-left::before  { opacity: 1; }
.lpc-feed-tabs.has-overflow-right::after  { opacity: 1; }
/* Flèches discrètes par-dessus le fade */
.lpc-feed-tabs__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-card);
  border: 1px solid var(--line);
  color: var(--forest-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  z-index: 2;
  transition: background .15s, transform .15s;
}
.lpc-feed-tabs__arrow[hidden] { display: none; }
.lpc-feed-tabs__arrow:hover { background: var(--cream-soft); transform: translateY(-50%) scale(1.08); }
.lpc-feed-tabs__arrow svg { width: 16px; height: 16px; }
.lpc-feed-tabs__arrow.left  { left: 6px; }
.lpc-feed-tabs__arrow.right { right: 6px; }

.lpc-feed-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 9px 14px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--forest-med);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: background .12s, color .12s, transform .12s;
  flex-shrink: 0;
  border: 1.5px solid transparent;
}
.lpc-feed-tab:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-feed-tab.active {
  background: var(--brick); color: #fff;
  box-shadow: 0 3px 10px rgba(196, 26, 10, .25);
}
.lpc-feed-tab .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--cat-color, var(--forest-med));
  flex-shrink: 0;
}
.lpc-feed-tab .ico svg { width: 100%; height: 100%; }
.lpc-feed-tab.active .ico { color: #fff; }
@media (max-width: 700px) {
  .lpc-feed-tab .lbl { display: none; }
  .lpc-feed-tab .ico { width: 26px; height: 26px; }
  .lpc-feed-tab.active .lbl { display: inline; }
}

.lpc-composer {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.lpc-composer__trigger {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .12s;
  border-radius: 14px;
}
.lpc-composer__trigger:hover { background: var(--cream-bg); }
.lpc-composer__av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream-bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px;
  color: var(--gold-warm);
  flex-shrink: 0; overflow: hidden;
}
.lpc-composer__av img { width: 100%; height: 100%; object-fit: cover; }
.lpc-composer__placeholder {
  flex: 1;
  font-size: 15px; color: var(--forest-med);
  font-style: italic;
}
.lpc-composer__expanded {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.lpc-composer__head { display: flex; align-items: center; gap: 12px; }
.lpc-composer__author strong { display: block; font-size: 14.5px; color: var(--forest-dark); font-family: 'Inter', sans-serif; }
.lpc-composer__author span { font-size: 12px; color: var(--forest-med); font-style: italic; }
.lpc-composer__text {
  border: none; outline: none; resize: vertical;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5;
  min-height: 80px; max-height: 280px;
  color: var(--forest-dark);
  background: transparent;
  padding: 4px 0;
  width: 100%;
}
.lpc-composer__text::placeholder { color: var(--forest-med); opacity: .7; }
.lpc-composer__photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.lpc-composer__photo {
  position: relative; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
}
.lpc-composer__photo img { width: 100%; height: 100%; object-fit: cover; }
.lpc-composer__photo button {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.lpc-composer__cats {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.lpc-composer__label { font-size: 13px; color: var(--forest-med); font-weight: 600; }
.lpc-composer__cat, .lpc-composer__subcat {
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--cream-bg);
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-dark);
}

/* ------ Composer : champs structurés (caractéristiques) ------ */
.lpc-composer__attrs {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-soft);
}
.lpc-composer__attrs-head {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: var(--gold-warm);
  margin-bottom: 12px;
}
.lpc-composer__attrs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
}
.lpc-attr-field {
  display: flex; flex-direction: column; gap: 4px;
}
.lpc-attr-field label {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--forest-med);
}
.lpc-attr-req { color: var(--brick); font-weight: 700; }
.lpc-attr-field input[type="text"],
.lpc-attr-field input[type="number"],
.lpc-attr-field input[type="date"],
.lpc-attr-field select {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--cream-card);
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark);
  width: 100%; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
}
.lpc-attr-field input:focus, .lpc-attr-field select:focus {
  outline: none; border-color: var(--gold-warm);
  box-shadow: 0 0 0 2px rgba(255, 120, 0, .15);
}
.lpc-attr-field select {
  background: var(--cream-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8b5e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 30px;
}
.lpc-attr-num-wrap {
  position: relative; display: flex; align-items: center;
}
.lpc-attr-num-wrap input { padding-right: 36px; }
.lpc-attr-suffix {
  position: absolute; right: 10px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--forest-med);
  pointer-events: none;
}

/* ------ Card : prix mis en avant + pills caractéristiques ------ */
.lpc-pub__attrs {
  padding: 4px 18px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.lpc-pub__price {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 26px; color: var(--brick);
  line-height: 1.1;
}
.lpc-pub__price-unit {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 14px; color: var(--forest-med);
}
.lpc-pub__attrs-pills {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.lpc-pub__attr-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  font-family: 'Inter', sans-serif; font-size: 12.5px;
}
.lpc-pub__attr-pill .k {
  color: var(--forest-med); font-weight: 500;
}
.lpc-pub__attr-pill .v {
  color: var(--forest-dark); font-weight: 600;
}

/* -0dition inline */
.lpc-pub__edit-attrs {
  margin-top: 10px;
}

/* ------ Bloc événement (style Facebook event) ------ */
.lpc-pub__event {
  margin: 4px 18px 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cream-soft), var(--cream-card));
  display: flex; flex-direction: column; gap: 12px;
}
.lpc-pub__event-head {
  display: flex; align-items: center; gap: 14px;
}
.lpc-pub__event-cal {
  flex-shrink: 0;
  width: 60px; height: 64px;
  border-radius: 10px;
  background: var(--cream-card);
  border: 1px solid var(--line-strong);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.lpc-pub__event-cal .m {
  background: var(--brick); color: #fff;
  width: 100%; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; padding: 3px 0 2px;
}
.lpc-pub__event-cal .d {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 28px; line-height: 1;
  color: var(--forest-dark);
  padding-top: 8px;
}
.lpc-pub__event-when-day {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 17px; color: var(--forest-dark);
  text-transform: capitalize;
}
.lpc-pub__event-when-hour {
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-med); margin-top: 2px;
}
.lpc-pub__event-loc {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--forest-dark);
}
.lpc-pub__event-loc svg { width: 18px; height: 18px; color: var(--gold-warm); flex-shrink: 0; margin-top: 2px; }
.lpc-pub__event-loc-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; }
.lpc-pub__event-loc-addr { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--forest-med); margin-top: 1px; }
.lpc-pub__event-cap {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--forest-med); font-style: italic;
}
.lpc-pub__event-rsvp {
  display: flex; gap: 8px;
}
.lpc-pub__rsvp-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
  background: var(--cream-card);
  color: var(--forest-dark);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.lpc-pub__rsvp-btn:hover { background: var(--cream-bg); border-color: var(--gold-warm); }
.lpc-pub__rsvp-btn:active { transform: scale(.97); }
.lpc-pub__rsvp-btn svg { width: 18px; height: 18px; }
.lpc-pub__rsvp-btn.active.going {
  background: linear-gradient(135deg, var(--brick), var(--brick-dark));
  color: #fff; border-color: transparent;
}
.lpc-pub__rsvp-btn.active.interested {
  background: var(--gold-warm); color: #fff; border-color: transparent;
}
.lpc-pub__event-counts {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--forest-med);
}
.lpc-pub__event-counts .sep { opacity: .5; }
.lpc-pub__event-count {
  background: transparent; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--forest-med); padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.lpc-pub__event-count:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-pub__event-count strong { color: var(--forest-dark); margin-right: 3px; }

@media (max-width: 700px) {
  .lpc-pub__event { margin: 4px 14px 8px; padding: 12px 14px; gap: 10px; }
  .lpc-pub__event-cal { width: 54px; height: 58px; }
  .lpc-pub__event-cal .d { font-size: 24px; padding-top: 6px; }
  .lpc-pub__event-when-day { font-size: 15.5px; }
  .lpc-pub__rsvp-btn { padding: 10px 8px; font-size: 13.5px; min-height: 44px; }
}

/* ------ Bottom-sheet liste RSVP ------ */
.lpc-rsvp-sheet {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lpc-rsvp-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  animation: lpcPopIn .15s ease-out;
}
.lpc-rsvp-sheet__panel {
  position: relative;
  width: 440px; max-width: 100%;
  max-height: 80vh;
  background: var(--cream-card);
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: lpcPopIn .15s ease-out;
}
.lpc-rsvp-sheet__panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cream-card), var(--cream-soft));
}
.lpc-rsvp-sheet__panel header h4 {
  font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
  color: var(--forest-dark);
}
.lpc-rsvp-sheet__close {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med); font-size: 22px; line-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lpc-rsvp-sheet__close:hover { background: var(--cream-bg); }
.lpc-rsvp-sheet__list { flex: 1; overflow-y: auto; padding: 6px 0; }
.lpc-rsvp-sheet__loading,
.lpc-rsvp-sheet__empty {
  padding: 28px 18px; text-align: center;
  color: var(--forest-med); font-style: italic; font-family: 'Fraunces', serif; font-size: 14px;
}
.lpc-rsvp-sheet__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.lpc-rsvp-sheet__item:hover { background: var(--cream-bg); }
.lpc-rsvp-sheet__item .av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px;
  color: var(--gold-warm);
  flex-shrink: 0;
}
.lpc-rsvp-sheet__item .av.has-img { font-size: 0; color: transparent; }
.lpc-rsvp-sheet__item .nm {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--forest-dark);
}
.lpc-rsvp-sheet__item .vl {
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: var(--forest-med);
}

@media (max-width: 700px) {
  .lpc-rsvp-sheet { padding: 0; align-items: flex-end; }
  .lpc-rsvp-sheet__panel {
    width: 100%; max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: 75vh;
  }
}
.lpc-composer__actions {
  display: flex; gap: 8px; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.lpc-composer__photo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px;
  background: var(--cream-bg);
  font-size: 13.5px; font-weight: 600;
  color: var(--forest-dark);
  cursor: pointer; transition: background .12s;
}
.lpc-composer__photo-btn:hover { background: var(--cream-soft); }
.lpc-composer__photo-btn svg { width: 16px; height: 16px; }
.lpc-composer__cancel, .lpc-composer__publish {
  border: none; cursor: pointer;
  padding: 8px 18px; border-radius: 9px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
}
.lpc-composer__cancel { background: transparent; color: var(--forest-med); margin-left: auto; }
.lpc-composer__cancel:hover { color: var(--brick); text-decoration: underline; }
.lpc-composer__publish { background: var(--brick); color: #fff; }
.lpc-composer__publish:hover:not(:disabled) { background: var(--brick-dark); }
.lpc-composer__publish:disabled { opacity: .5; cursor: not-allowed; }

.lpc-feed-list { display: flex; flex-direction: column; gap: 18px; }
.lpc-feed-empty {
  padding: 60px 30px; text-align: center;
  color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic;
}
.lpc-feed-more { text-align: center; }
.lpc-feed-more button {
  background: var(--cream-card); border: 1px solid var(--line);
  padding: 10px 24px; border-radius: 22px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--forest-dark); cursor: pointer;
  transition: background .12s;
}
.lpc-feed-more button:hover { background: var(--cream-bg); }

.lpc-pub {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.lpc-pub.deleted { padding: 24px; text-align: center; color: var(--forest-med); font-style: italic; }
.lpc-pub__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px 10px;
  position: relative;
}
.lpc-pub__author {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.lpc-pub__av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px;
  color: var(--gold-warm);
  flex-shrink: 0;
}
.lpc-pub__av.has-img { font-size: 0; color: transparent; }
.lpc-pub__author-info { flex: 1; min-width: 0; }
.lpc-pub__author-info strong {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 14.5px; font-weight: 700; color: var(--forest-dark);
}
.lpc-pub__author:hover strong { text-decoration: underline; }
.lpc-pub__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--forest-med);
  margin-top: 2px;
  flex-wrap: wrap;
}
.lpc-pub__cat {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--cat-color, var(--gold-warm));
}
.lpc-pub__cat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
.lpc-pub__cat-ico svg { width: 100%; height: 100%; }
.lpc-pub__village {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 600; color: var(--forest-dark);
  background: var(--cream-soft);
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11.5px;
}
.lpc-pub__date { font-style: italic; }

/* ------ Filtre village (au-dessus des tabs catégories) ------ */
.lpc-feed-village-filter {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--cream-card) 0%, var(--cream-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  position: relative;
  overflow: hidden;
}
/* Trait coloré décoratif à gauche pour évoquer une carte / fiche */
.lpc-feed-village-filter::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brick), var(--gold-warm));
}
.lpc-feed-village-filter label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--forest-dark);
  white-space: nowrap;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.lpc-feed-village-filter label::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b3a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
.lpc-feed-village-filter select {
  flex: 1; min-width: 0;
  padding: 10px 36px 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
  background-color: var(--cream-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b3a1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
  color: var(--forest-dark);
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.lpc-feed-village-filter select:hover {
  border-color: var(--gold-warm);
  transform: translateY(-1px);
}
.lpc-feed-village-filter select:focus {
  outline: none;
  border-color: var(--brick);
  box-shadow: 0 0 0 3px rgba(196, 26, 10, .15);
}
/* Quand un village est sélectionné, le select prend un look "actif" (classe ajoutée en JS) */
.lpc-feed-village-filter select.has-value {
  background-color: rgba(255, 120, 0, .08);
  border-color: var(--gold-warm);
}

@media (max-width: 600px) {
  .lpc-feed-village-filter { padding: 12px 14px; gap: 10px; }
  .lpc-feed-village-filter label { font-size: 11.5px; }
  .lpc-feed-village-filter select { font-size: 14px; padding: 9px 32px 9px 12px; }
}

/* -0dition publi : sélecteur village */
.lpc-pub__edit-village {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
}
.lpc-pub__edit-village label {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--forest-med);
}
.lpc-pub__edit-village select {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--cream-card);
  font-family: 'Inter', sans-serif; font-size: 14px;
}

.lpc-pub__menu-btn {
  background: transparent; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.lpc-pub__menu-btn:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-pub__menu-btn svg { width: 18px; height: 18px; }
.lpc-pub__menu {
  position: absolute; top: 100%; right: 18px;
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  padding: 4px;
  min-width: 160px; z-index: 20;
  display: flex; flex-direction: column;
}
.lpc-pub__menu button {
  background: transparent; border: none; cursor: pointer;
  padding: 8px 14px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--forest-dark); text-align: left;
}
.lpc-pub__menu button:hover { background: var(--cream-bg); }
.lpc-pub__menu button.danger { color: var(--brick); }
.lpc-pub__menu button.danger:hover { background: rgba(255, 69, 32, .08); }

.lpc-pub__body {
  padding: 0 18px 14px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55;
  color: var(--forest-dark);
  white-space: pre-wrap; word-wrap: break-word;
}
.lpc-pub__edit-form { display: flex; flex-direction: column; gap: 8px; }
.lpc-pub__edit-form textarea {
  width: 100%; border: 1px solid var(--gold-warm); background: var(--cream-card);
  border-radius: 10px; padding: 10px 12px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5;
  resize: vertical; min-height: 80px;
}
.lpc-pub__edit-btns { display: flex; gap: 8px; justify-content: flex-end; }
.lpc-pub__edit-btns button {
  border: none; cursor: pointer;
  padding: 6px 14px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
}
.lpc-pub__edit-btns button[type=submit] { background: var(--brick); color: #fff; }
.lpc-pub__edit-btns button[type=submit]:hover { background: var(--brick-dark); }
.lpc-pub__edit-btns button[type=button] { background: var(--cream-bg); color: var(--forest-dark); }

.lpc-pub__photos { display: grid; gap: 2px; background: #000; }
.lpc-pub__photos.one { grid-template-columns: 1fr; }
.lpc-pub__photos.two { grid-template-columns: 1fr 1fr; }
.lpc-pub__photos.three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lpc-pub__photos.three .lpc-pub__photo-cell:first-child { grid-row: span 2; }
.lpc-pub__photos.four,
.lpc-pub__photos.many { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lpc-pub__photo-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}
.lpc-pub__photos.one .lpc-pub__photo-cell { aspect-ratio: auto; max-height: 600px; }
.lpc-pub__photo-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lpc-pub__photos.one .lpc-pub__photo-cell img { object-fit: contain; background: #1a1f12; }
.lpc-pub__photo-more {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700;
}

.lpc-pub-lightbox {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lpc-pub-lightbox img {
  max-width: 100%; max-height: 100%; display: block;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.lpc-pub-lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255,.15); color: #fff;
  border: none; font-size: 26px; line-height: 44px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 2;
}
.lpc-pub-lightbox__close:hover { background: rgba(255, 255, 255,.28); }

.lpc-pub-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255,.15); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.lpc-pub-lightbox__nav:hover { background: rgba(255, 255, 255,.28); }
.lpc-pub-lightbox__nav:active { transform: translateY(-50%) scale(.94); }
.lpc-pub-lightbox__nav.prev { left: 18px; }
.lpc-pub-lightbox__nav.next { right: 18px; }
.lpc-pub-lightbox__nav svg { width: 26px; height: 26px; }

.lpc-pub-lightbox__counter {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
  letter-spacing: .3px;
  z-index: 2;
}

@media (max-width: 700px) {
  .lpc-pub-lightbox { padding: 12px; }
  .lpc-pub-lightbox__nav { width: 44px; height: 44px; background: rgba(255, 255, 255,.2); }
  .lpc-pub-lightbox__nav.prev { left: 8px; }
  .lpc-pub-lightbox__nav.next { right: 8px; }
  .lpc-pub-lightbox__nav svg { width: 22px; height: 22px; }
  .lpc-pub-lightbox__close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .lpc-pub-lightbox__counter { top: 12px; font-size: 12px; padding: 5px 12px; }
}

/* ------ Summary réactions/commentaires sous photos d'une publication ------ */
.lpc-pub__summary {
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--forest-med);
}
.lpc-pub__summary .sep { opacity: .5; }
.lpc-pub__count {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--forest-med);
  padding: 2px 4px; border-radius: 6px;
  transition: background .12s, color .12s;
}
.lpc-pub__count:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-pub__count .emojis { display: inline-flex; }
.lpc-pub__count .emojis .e {
  font-size: 13px;
  background: var(--cream-card);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.lpc-pub__count .emojis .e:first-child { margin-left: 0; }
.lpc-pub__count .n { font-weight: 600; }

/* ------ Barre J'aime / Commenter sur publication ------ */
.lpc-pub__actions {
  display: flex; gap: 4px;
  padding: 4px 10px;
  border-top: 1px solid var(--line);
  position: relative;
}
.lpc-pub__like-wrap { flex: 1; position: relative; display: flex; }
.lpc-pub__action-btn {
  flex: 1;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, color .12s;
  user-select: none;
}
.lpc-pub__action-btn:hover { background: var(--cream-bg); color: var(--forest-dark); }
.lpc-pub__action-btn .ico {
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.lpc-pub__action-btn .ico svg { width: 100%; height: 100%; }
.lpc-pub__action-btn svg { width: 18px; height: 18px; }
.lpc-pub__action-btn.liked { color: var(--brick); }
.lpc-pub__action-btn.liked .ico svg { fill: currentColor; stroke: currentColor; }
.lpc-pub__comment .meta .like-btn { display: inline-flex; align-items: center; gap: 4px; }
.lpc-pub__comment .meta .like-btn .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px;
  font-size: 13px;
}
.lpc-pub__comment .meta .like-btn .ico svg { width: 100%; height: 100%; }
.lpc-pub__comment .meta .like-btn.liked .ico svg { fill: currentColor; stroke: currentColor; }

/* Floater réactions sur publication */
.lpc-pub__react-floater {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 6px 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  display: inline-flex; gap: 4px; align-items: center;
  z-index: 30;
  animation: lpcPopIn .15s ease-out;
}
.lpc-pub__react-floater[hidden] { display: none; }
.lpc-pub__react-floater button {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
  padding: 0;
}
.lpc-pub__react-floater button:hover { background: var(--cream-bg); transform: scale(1.3); }

/* ------ Comments inline sous une publication ------ */
.lpc-pub__comments-wrap {
  border-top: 1px solid var(--line);
  padding: 12px 18px;
  background: var(--cream-bg);
}
.lpc-pub__comments-loading,
.lpc-pub__comments-empty {
  font-size: 13px; color: var(--forest-med); font-style: italic;
  padding: 12px 4px;
}
.lpc-pub__comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.lpc-pub__comment {
  display: flex; gap: 10px; align-items: flex-start;
}
.lpc-pub__comment .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-card) center / cover no-repeat; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  color: var(--gold-warm); flex-shrink: 0;
}
.lpc-pub__comment .av.has-img { font-size: 0; color: transparent; }
.lpc-pub__comment .bd { flex: 1; min-width: 0; position: relative; }
.lpc-pub__comment .bubble {
  background: var(--cream-card);
  padding: 7px 12px;
  border-radius: 14px;
  display: inline-block;
  max-width: 100%;
  position: relative;
}
.lpc-pub__comment .bubble .nm {
  font-weight: 700; color: var(--forest-dark);
  font-size: 12.5px; font-family: 'Inter', sans-serif;
  display: block;
  text-decoration: none;
}
.lpc-pub__comment .bubble .nm:hover { text-decoration: underline; }
.lpc-pub__comment .bubble .tx {
  font-size: 13.5px; color: var(--forest-dark);
  margin-top: 2px;
  white-space: pre-wrap; word-wrap: break-word;
}
.lpc-pub__comment .meta {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; color: var(--forest-med);
  margin-top: 4px; padding-left: 6px; flex-wrap: wrap;
}
.lpc-pub__comment .meta button {
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med); font-size: 11px; font-weight: 600;
  padding: 0;
}
.lpc-pub__comment .meta button:hover { color: var(--forest-dark); text-decoration: underline; }
.lpc-pub__comment .meta button.danger { color: var(--brick); }
.lpc-pub__comment .meta .like-btn.liked { font-weight: 700; }
.lpc-pub__comment.deleted .bubble {
  background: transparent; border: 1px dashed var(--line-strong);
  color: var(--forest-med); font-style: italic; font-size: 12.5px;
}
.lpc-pub__comment-replies { margin-left: 46px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.lpc-pub__comment.reply .av { width: 28px; height: 28px; font-size: 11px; }
.lpc-pub__comment.reply .bubble { padding: 5px 10px; }
.lpc-pub__comment.reply .bubble .nm { font-size: 12px; }
.lpc-pub__comment.reply .bubble .tx { font-size: 13px; }
.lpc-pub__comment-pill {
  position: absolute;
  bottom: -8px; right: -4px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1px 6px 1px 4px;
  font-size: 10.5px;
  display: inline-flex; align-items: center; gap: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.lpc-pub__comment-pill .emojis { font-size: 12px; }
.lpc-pub__comment-pill .n { font-weight: 600; color: var(--forest-med); }

.lpc-pub__comment-like-wrap { position: relative; display: inline-block; }
.lpc-pub__comment-react-floater {
  position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 22px; padding: 4px 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  display: inline-flex; gap: 2px; z-index: 25;
  animation: lpcPopIn .15s ease-out;
}
.lpc-pub__comment-react-floater[hidden] { display: none; }
.lpc-pub__comment-react-floater button {
  background: transparent; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; line-height: 1;
  padding: 0;
  transition: background .12s, transform .12s;
}
.lpc-pub__comment-react-floater button:hover { background: var(--cream-bg); transform: scale(1.3); }

.lpc-pub__comment-edit-form { display: flex; flex-direction: column; gap: 6px; }
.lpc-pub__comment-edit-form input {
  width: 100%; border: 1px solid var(--gold-warm); background: var(--cream-card);
  border-radius: 12px; padding: 7px 12px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
}
.lpc-pub__comment-edit-form .btns { display: flex; gap: 6px; justify-content: flex-end; }
.lpc-pub__comment-edit-form .btns button {
  border: none; cursor: pointer;
  padding: 4px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.lpc-pub__comment-edit-form .btns button[type=submit] { background: var(--brick); color: #fff; }
.lpc-pub__comment-edit-form .btns button[type=button] { background: var(--cream-bg); color: var(--forest-dark); }

/* Compose commentaire sous publication */
.lpc-pub-comments__compose {
  display: flex; gap: 8px; align-items: center;
  padding-top: 8px;
  position: relative;
}
.lpc-pub-comments__emoji {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--forest-med);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  padding: 0;
}
.lpc-pub-comments__emoji:hover { background: var(--cream-bg); color: var(--gold-warm); }
.lpc-pub-comments__emoji svg { width: 18px; height: 18px; }
.lpc-pub-comments__emoji-pop {
  position: absolute;
  bottom: calc(100% + 6px); right: 50px;
  width: 320px; height: 320px;
  display: flex; flex-direction: column;
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
  z-index: 50; overflow: hidden;
}
.lpc-pub-comments__emoji-pop[hidden] { display: none; }
.lpc-pub-comments__emoji-pop .lpc-emoji-tabs {
  display: flex; padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
  overflow-x: auto; scrollbar-width: none;
}
.lpc-pub-comments__emoji-pop .lpc-emoji-tabs::-webkit-scrollbar { display: none; }
.lpc-pub-comments__emoji-pop .lpc-emoji-tab {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; padding: 6px 8px; border-radius: 6px; flex-shrink: 0;
}
.lpc-pub-comments__emoji-pop .lpc-emoji-tab:hover { background: var(--cream-card); }
.lpc-pub-comments__emoji-pop .lpc-emoji-scroll { flex: 1; overflow-y: auto; padding: 4px 8px; }
.lpc-pub-comments__emoji-pop .lpc-emoji-group { margin: 4px 0 10px; }
.lpc-pub-comments__emoji-pop .lpc-emoji-group__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--forest-med); font-weight: 700; padding: 6px 4px;
  position: sticky; top: -4px; background: var(--cream-card); z-index: 1;
}
.lpc-pub-comments__emoji-pop .lpc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.lpc-pub-comments__emoji-pop .lpc-emoji-cell {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: 6px;
}
.lpc-pub-comments__emoji-pop .lpc-emoji-cell:hover { background: var(--cream-bg); transform: scale(1.2); }
.lpc-pub-comments__av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  color: var(--gold-warm);
  flex-shrink: 0; overflow: hidden;
}
.lpc-pub-comments__av img { width: 100%; height: 100%; object-fit: cover; }
.lpc-pub-comments__compose input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--cream-card);
  border-radius: 18px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--forest-dark); outline: none;
}
.lpc-pub-comments__compose input:focus { border-color: var(--gold-warm); }
.lpc-pub-comments__compose button[type=submit] {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brick); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lpc-pub-comments__compose button[type=submit]:hover { background: var(--brick-dark); }
.lpc-pub-comments__compose button[type=submit] svg { width: 16px; height: 16px; }
.lpc-pub-comments__reply-prev {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--cream-soft);
  border-radius: 10px;
  font-size: 12.5px; color: var(--forest-med);
  margin-bottom: 8px;
}
.lpc-pub-comments__reply-prev .cancel {
  background: transparent; border: none; cursor: pointer;
  margin-left: auto;
  font-size: 18px; color: var(--forest-med);
  width: 24px; height: 24px; border-radius: 50%;
}
.lpc-pub-comments__reply-prev .cancel:hover { background: var(--cream-bg); color: var(--brick); }

/* Dialog "qui a réagi" pour publications */
.lpc-pub-reactors-dlg {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: lpcFadeIn .15s ease-out;
}
.lpc-pub-reactors-dlg__box {
  background: var(--cream-card); border-radius: 14px;
  width: 380px; max-width: 100%; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lpc-pub-reactors-dlg__box header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-soft);
}
.lpc-pub-reactors-dlg__box header h4 {
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: var(--forest-dark);
}
.lpc-pub-reactors-dlg__box header button {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med); font-size: 22px;
}
.lpc-pub-reactors-dlg__box header button:hover { background: var(--cream-bg); }
.lpc-pub-reactors-dlg__box .tabs {
  display: flex; overflow-x: auto; gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  scrollbar-width: none;
}
.lpc-pub-reactors-dlg__box .tabs::-webkit-scrollbar { display: none; }
.lpc-pub-reactors-dlg__box .tab {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 14px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--forest-med);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.lpc-pub-reactors-dlg__box .tab.active { color: var(--brick); border-color: var(--brick); }
.lpc-pub-reactors-dlg__box .tab .e { font-size: 16px; }
.lpc-pub-reactors-dlg__box .list { flex: 1; overflow-y: auto; padding: 6px 0; }
.lpc-pub-reactors-dlg__box .list .empty {
  padding: 30px; text-align: center; color: var(--forest-med);
  font-family: 'Fraunces', serif; font-style: italic;
}
.lpc-pub-reactors-dlg__box .row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; text-decoration: none; color: inherit;
  transition: background .12s;
}
.lpc-pub-reactors-dlg__box .row:hover { background: var(--cream-bg); }
.lpc-pub-reactors-dlg__box .row .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream-bg) center / cover no-repeat;
  border: 1px solid var(--line); position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; color: var(--gold-warm);
  flex-shrink: 0;
}
.lpc-pub-reactors-dlg__box .row .av.has-img { font-size: 0; color: transparent; }
.lpc-pub-reactors-dlg__box .row .av .bg {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--cream-card); border-radius: 50%;
  width: 18px; height: 18px; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lpc-pub-reactors-dlg__box .row .nm { font-size: 14px; color: var(--forest-dark); font-weight: 600; }

/* -"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"-
   RESPONSIVE MOBILE (max-width: 700px)
   -"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"- */

/* ------ Header / brand / nav / user pill ------ */
@media (max-width: 700px) {
  .lpc-header__inner { padding: 10px 14px; gap: 8px; }
  .lpc-brand img { width: 44px !important; height: 44px !important; }
  .lpc-brand { font-size: 18px; gap: 8px; }
  .lpc-brand .ptit { font-size: 16px; }
  .lpc-brand .name { font-size: 18px; }
}
/* Boutons visiteur compactés sur mobile/tablette */
@media (max-width: 900px) {
  .lpc-auth-visitor { gap: 6px !important; }
  .lpc-auth-visitor .nav-link { padding: 7px 10px !important; font-size: 13px !important; }
  .lpc-auth-visitor .btn-primary { padding: 8px 12px !important; font-size: 13px !important; box-shadow: 0 1px 4px rgba(196, 26, 10, .2) !important; }
}
@media (max-width: 480px) {
  /* Sur très petits écrans : texte du brand visible mais très compact */
  .lpc-brand { gap: 6px !important; }
  .lpc-brand img { width: 38px !important; height: 38px !important; }
  .lpc-brand .ptit { display: block !important; font-size: 11px !important; line-height: 1 !important; margin-bottom: 0 !important; }
  .lpc-brand .name { display: block !important; font-size: 14px !important; line-height: 1.05 !important; }
  .lpc-auth-visitor { gap: 4px !important; }
  .lpc-auth-visitor .nav-link { padding: 5px 8px !important; font-size: 12px !important; }
  .lpc-auth-visitor .btn-primary { padding: 6px 10px !important; font-size: 12px !important; }
}
@media (max-width: 700px) {
  /* User pill : juste l'avatar, pas le nom ni la chevron */
  .lpc-user-trigger { padding: 4px; gap: 0; border-radius: 50%; }
  .lpc-user-trigger .lpc-user-name { display: none; }
  .lpc-user-trigger .lpc-user-chevron { display: none; }
  .lpc-user-avatar { width: 36px; height: 36px; }
  /* Search bar : compacte, décalée à droite pour ne pas coller au brand */
  .lpc-search { min-width: 0; margin-left: 28px; }
  .lpc-search input { padding: 9px 12px 9px 36px; font-size: 14px; }
  .lpc-search__icon { left: 11px; width: 16px; height: 16px; }
  /* Dropdown user : pleine largeur si manque place */
  .lpc-user-dropdown { right: 0; left: auto; min-width: 240px; max-width: calc(100vw - 28px); }
  /* -0vite zoom iOS sur input */
  .lpc-search input { font-size: 16px; }
}

/* ------ Hero / sections statiques home ------ */
@media (max-width: 700px) {
  .lpc-hero { padding: 36px 20px 28px; }
  .lpc-sheet { margin: 14px 8px; border-radius: 14px; }
}

/* ------ Forms / inputs (anti-zoom iOS) ------ */
@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="url"], input[type="search"], input[type="number"],
  textarea, select {
    font-size: 16px !important;  /* iOS zoom uniquement si < 16px */
  }
  .signup-form-wrap { padding: 10px 16px 28px; }
}

/* ------ Onglets feed catégories ------ */
@media (max-width: 700px) {
  .lpc-feed-tabs { padding: 4px 6px; }
  .lpc-feed-tabs__arrow { width: 28px; height: 28px; }
  .lpc-feed-tabs__arrow.left  { left: 4px; }
  .lpc-feed-tabs__arrow.right { right: 4px; }
  .lpc-feed-tab { padding: 8px 10px; }
  .lpc-feed-tab .ico { width: 24px; height: 24px; }
  .lpc-feed-tab.active { padding: 8px 14px; }
}

/* ------ Composer publication ------ */
@media (max-width: 700px) {
  .lpc-composer__trigger { padding: 12px 14px; gap: 10px; }
  .lpc-composer__av { width: 38px; height: 38px; }
  .lpc-composer__placeholder { font-size: 14px; }
  .lpc-composer__expanded { padding: 12px 14px 14px; }
  .lpc-composer__cats { flex-direction: column; align-items: stretch; gap: 8px; }
  .lpc-composer__cat, .lpc-composer__subcat { width: 100%; }
  .lpc-composer__actions { flex-wrap: wrap; gap: 6px; }
  .lpc-composer__photo-btn { padding: 10px 14px; min-height: 44px; }
  .lpc-composer__cancel, .lpc-composer__publish { padding: 10px 18px; min-height: 44px; flex: 1; }
  .lpc-composer__attrs { padding: 12px 14px; }
  .lpc-composer__attrs-grid { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
  .lpc-attr-field input, .lpc-attr-field select { font-size: 16px; padding: 9px 10px; }
  .lpc-attr-field select { padding-right: 28px; }
  .lpc-pub__attrs { padding: 4px 14px 8px; }
  .lpc-pub__price { font-size: 22px; }
}

/* ------ Cards publications ------ */
@media (max-width: 700px) {
  .lpc-pub__head { padding: 12px 14px 8px; gap: 10px; }
  .lpc-pub__av { width: 40px; height: 40px; }
  .lpc-pub__author-info strong { font-size: 14px; }
  .lpc-pub__meta { font-size: 11.5px; gap: 4px; }
  .lpc-pub__body { padding: 0 14px 12px; font-size: 14.5px; }
  .lpc-pub__summary { padding: 8px 14px; }
  .lpc-pub__actions { padding: 4px 6px; }
  .lpc-pub__action-btn { padding: 10px 8px; font-size: 13.5px; min-height: 44px; }
  .lpc-pub__action-btn .lbl { font-size: 13px; }
  .lpc-pub__comments-wrap { padding: 10px 14px; }
  .lpc-pub__comment-replies { margin-left: 36px; }
}

/* ------ Chat dock / launchers / popovers ------ */
@media (max-width: 700px) {
  /* Dock reste en bas à droite, juste les launchers */
  .lpc-chat-dock {
    right: 12px !important;
    left: auto !important;
    bottom: 12px !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .lpc-chat-launchers { margin-bottom: 0; gap: 10px; }
  .lpc-launcher { width: 52px; height: 52px; }
  /* Popover en bottom-sheet : prend toute la largeur, bas de l'écran */
  .lpc-popover {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    width: 100% !important;
    max-height: 75vh; height: auto;
    border-radius: 18px 18px 0 0 !important;
  }
  /* Quand une popover est ouverte, on cache les launchers (sinon ils passent par-dessus le contenu) */
  .lpc-chat-dock:has(.lpc-popover:not([hidden])) .lpc-launcher {
    display: none !important;
  }
  /* Plus de padding horizontal sur mobile pour que la barre de recherche + header + items ne collent pas au bord */
  .lpc-popover header { padding-left: 20px !important; padding-right: 16px !important; }
  .lpc-popover__search { padding-left: 20px !important; padding-right: 16px !important; }
  .lpc-popover__item { padding-left: 20px !important; padding-right: 16px !important; }
  .lpc-popover__group { padding-left: 20px !important; padding-right: 16px !important; }
  .lpc-popover__empty, .lpc-popover__loading { padding-left: 20px !important; padding-right: 20px !important; }
  /* Les notifications peuvent être longues : on laisse le texte wraper au lieu de tronquer */
  .lpc-popover--notif .lpc-popover__name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
  }
  .lpc-popover--notif .lpc-popover__item {
    align-items: flex-start;
  }
  /* Chats minimisés : on les cache sur mobile (accès via le popover Discussions) */
  .lpc-chat-window.minimized { display: none !important; }
  /* Chat ouvert : vrai fullscreen - utilise visualViewport pour shrink avec le clavier */
  .lpc-chat-window {
    position: fixed !important;
    top: var(--lpc-vvt, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--lpc-vvh, 100dvh) !important;
    max-height: var(--lpc-vvh, 100dvh) !important;
    border-radius: 0 !important;
    z-index: 9100 !important;
  }
  /* Si plusieurs chats ouverts, n'en montrer qu'un */
  .lpc-chat-dock .lpc-chat-window:not(.minimized) ~ .lpc-chat-window:not(.minimized) { display: none !important; }
  /* Quand un chat est ouvert, on cache les launchers pour libérer l'écran */
  .lpc-chat-dock:has(.lpc-chat-window:not(.minimized)) .lpc-chat-launchers { display: none !important; }
  /* Header plus grand sur mobile pour le touch */
  .lpc-chat-window:not(.minimized) .lpc-chat-head { padding: 12px 14px; gap: 12px; }
  .lpc-chat-window:not(.minimized) .lpc-chat-head__avatar { width: 40px; height: 40px; }
  .lpc-chat-window:not(.minimized) .lpc-chat-head__name { font-size: 15px; }
  .lpc-chat-window:not(.minimized) .lpc-chat-head__actions .ico-btn { width: 38px; height: 38px; }
  .lpc-chat-window:not(.minimized) .lpc-chat-head__actions .ico-btn svg { width: 18px; height: 18px; }
  /* Compose plus confortable au touch + anti-zoom iOS (16px) */
  .lpc-chat-window:not(.minimized) .lpc-chat-compose { padding: 10px 12px; gap: 8px; }
  .lpc-chat-window:not(.minimized) .lpc-chat-compose textarea { font-size: 16px; padding: 10px 12px; }
  .lpc-chat-window:not(.minimized) .lpc-send-btn { width: 40px; height: 40px; }
  .lpc-chat-window:not(.minimized) .lpc-emoji-btn { width: 40px; height: 40px; }
}

/* ------ Messages page ------ */
@media (max-width: 700px) {
  .msg-head { padding: 24px 18px 16px; }
  .msg-head h1 { font-size: 26px; }
  /* Quand une conv est ouverte sur mobile, le thread prend tout l'écran et adapte au clavier */
  .msg-layout.has-active .msg-thread {
    position: fixed !important;
    top: var(--lpc-vvt, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 9050 !important;
    background: var(--cream-card);
    height: var(--lpc-vvh, 100dvh) !important;
    max-height: var(--lpc-vvh, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  /* Stream qui flex et qui shrink quand le clavier apparaît */
  .msg-layout.has-active .msg-stream {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 16px 14px !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Compose épinglé en bas, anti-zoom iOS */
  .msg-layout.has-active .msg-compose {
    padding: 10px 12px !important;
    flex-shrink: 0 !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .msg-layout.has-active .msg-compose textarea { font-size: 16px !important; }
  /* Head sticky (au cas où on swipe-scroll) */
  .msg-layout.has-active .msg-thread-head { flex-shrink: 0; }
  /* Liste cachée par défaut quand has-active (déjà fait dans messages.html, on renforce) */
  .msg-stream { padding: 16px 14px; }
  .msg-compose { padding: 10px 12px; }
}

/* ------ Profile page ------ */
@media (max-width: 700px) {
  .profile-banner { height: 180px !important; }
  .profile-avatar { width: 120px !important; height: 120px !important; top: -60px !important; font-size: 44px !important; }
  .profile-head { padding: 70px 18px 18px !important; text-align: center !important; }
  .profile-identity h1 { font-size: 26px; }
  .profile-actions { position: static !important; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
  .profile-body { padding: 18px 14px 28px !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .profile-card { padding: 16px 18px; }
}

/* ------ Compte page ------ */
@media (max-width: 700px) {
  .compte-head { padding: 24px 18px 14px; }
  .compte-head h1 { font-size: 24px; }
  .photo-edit { margin: 0 14px 20px; }
  .photo-cover { height: 140px; }
  .photo-avatar { width: 96px; height: 96px; font-size: 36px; border-width: 4px; }
  /* Empile avatar + texte d'aide en colonne pour que le texte ne chevauche plus la couverture */
  .photo-avatar-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 16px 16px !important;
    margin-top: -42px !important;
    gap: 10px !important;
  }
  .photo-help { padding-bottom: 0 !important; }
}

/* ------ Photo modal (fullscreen mobile, side panel devient overlay) ------ */
@media (max-width: 700px) {
  .lpc-photo-modal { padding: 0; }
  .lpc-photo-modal__panel,
  .lpc-photo-modal__viewer { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
  .lpc-photo-modal__topbar { top: 8px; right: 8px; padding: 6px 10px; }
  .lpc-photo-modal__close { top: 8px; left: 8px; width: 36px; height: 36px; }
  .lpc-photo-modal__image-wrap { padding: 60px 8px 8px; }
  .lpc-photo-modal__bottombar { padding: 10px 14px 12px; }
  .lpc-photo-action-btn { font-size: 13.5px; padding: 10px 8px; min-height: 44px; }
}

/* ------ Dialog transfert / forward ------ */
@media (max-width: 700px) {
  .lpc-forward-dlg, .msg-forward-dlg, .lpc-pub-reactors-dlg {
    padding: 0;
  }
  .lpc-forward-dlg__box, .msg-forward-dlg__box, .lpc-pub-reactors-dlg__box {
    width: 100%; height: 100%; max-height: none; border-radius: 0;
  }
}

/* ------ Sidebar online dans messages (cachée sur mobile, on garde la liste centrale) ------ */
@media (max-width: 1000px) {
  .msg-online-panel { display: none; }
}

/* ------ Touch-friendly : tous les boutons d'action min 44x44 ------ */
@media (max-width: 700px) {
  .lpc-msg-act, .lpc-react-trigger, .msg-msg-act, .msg-react-trigger {
    width: 36px !important; height: 36px !important;
  }
  /* Augmente la zone tappable des liens dans les listes */
  .lpc-popover__item, .lpc-search__item, .lpc-forward-dlg__item, .msg-forward-dlg__item,
  .lpc-photo-reactor, .msg-online-item {
    padding-top: 12px; padding-bottom: 12px;
  }
}

/* ------ Footer ------ */
@media (max-width: 700px) {
  .lpc-footer { padding: 32px 18px 24px; }
}

/* ------ LpcDialog (alert/confirm/prompt en modal HTML - compatible PWA standalone) ------ */
.lpc-dialog {
  position: fixed; inset: 0; z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.lpc-dialog__bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .6);
}
.lpc-dialog__box {
  position: relative; background: var(--cream-card); border-radius: 16px;
  width: 440px; max-width: 100%;
  padding: 22px 24px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
  animation: lpcPopIn .15s ease-out;
}
.lpc-dialog__box h3 {
  font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700;
  color: var(--forest-dark); margin: 0 0 8px;
}
.lpc-dialog__box p {
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5;
  color: var(--forest-dark);
  margin: 0 0 14px;
  white-space: pre-wrap;
}
.lpc-dialog__input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
  font-family: 'Inter', sans-serif; font-size: 16px;
  color: var(--forest-dark); background: var(--cream-card);
  margin-bottom: 12px;
  resize: vertical;
}
.lpc-dialog__input:focus { outline: none; border-color: var(--brick); box-shadow: 0 0 0 3px rgba(196, 26, 10, .15); }
.lpc-dialog__error {
  background: rgba(255, 69, 32, .08); color: var(--brick);
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; margin-bottom: 10px;
}
.lpc-dialog__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 4px;
}
.lpc-dialog__btn {
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--cream-card);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--forest-dark);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.lpc-dialog__btn:hover { background: var(--cream-bg); }
.lpc-dialog__btn.primary { background: var(--brick); color: #fff; border-color: var(--brick); }
.lpc-dialog__btn.primary:hover { background: var(--brick-dark); border-color: var(--brick-dark); }
.lpc-dialog__btn.danger { background: var(--brick); color: #fff; border-color: var(--brick); }
.lpc-dialog__btn.danger:hover { background: #5d0e0e; border-color: #5d0e0e; }
@media (max-width: 600px) {
  .lpc-dialog { padding: 12px; align-items: flex-end; }
  .lpc-dialog__box { width: 100%; border-radius: 16px 16px 0 0; padding: 20px 18px; }
}

/* ------ Splash screen PWA (style "Le Bon Coin" : logo centré, 3.5s, fade out) ------ */
#lpc-splash {
  position: fixed; inset: 0; z-index: 100000;
  /* Ciel volcanique : nuit chaude au-dessus, roche en éruption en bas */
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(196, 26, 10, .35) 0%, transparent 70%),
    linear-gradient(160deg, #0d0805 0%, #1f1108 50%, #2d1408 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  opacity: 1;
  transition: opacity .55s ease-out;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#lpc-splash.lpc-splash--fade { opacity: 0; pointer-events: none; }
.lpc-splash__logo {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: lpcSplashIn .6s ease-out;
  margin-bottom: 56px;  /* respire au-dessus du texte "Le P'tit Combraillou" */
}
/* Le wrapper gère le SCALE progressif (1.0 -  1.3 sur 1.6s puis maintien) */
.lpc-splash__logo {
  animation: lpcSplashGrow 1.6s cubic-bezier(.55, 0, .65, 1) forwards;
  transform-origin: center center;
  will-change: transform;
}
.lpc-splash__logo .lpc-splash__art {
  width: 140px; height: 140px;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 120, 0, .35));
  position: relative;
  transform-origin: center center;
  /* Le SVG gère la VIBRATION (le sol qui tremble pendant l'éruption) : crescendo en 1.6s, puis vibration constante infinie */
  animation:
    lpcSplashCrescendo 1.6s linear forwards,
    lpcSplashSteadyVibrate 0.12s linear 1.6s infinite;
  will-change: transform;
}
@keyframes lpcSplashGrow {
  0%   { transform: scale(1); }
  100% { transform: scale(1.3); }
}
/* Vibration crescendo : amplitude qui grandit de 0.5° à 8° en 1.6s, oscillation ultra-rapide */
@keyframes lpcSplashCrescendo {
  0%   { transform: rotate(0deg); }
  4%   { transform: rotate(-0.5deg); }
  8%   { transform: rotate(0.7deg); }
  12%  { transform: rotate(-0.9deg); }
  16%  { transform: rotate(1.2deg); }
  20%  { transform: rotate(-1.5deg); }
  24%  { transform: rotate(1.8deg); }
  28%  { transform: rotate(-2.2deg); }
  32%  { transform: rotate(2.5deg); }
  36%  { transform: rotate(-2.8deg); }
  40%  { transform: rotate(3.2deg); }
  44%  { transform: rotate(-3.6deg); }
  48%  { transform: rotate(4deg); }
  52%  { transform: rotate(-4.4deg); }
  56%  { transform: rotate(4.8deg); }
  60%  { transform: rotate(-5.2deg); }
  64%  { transform: rotate(5.6deg); }
  68%  { transform: rotate(-6deg); }
  72%  { transform: rotate(6.4deg); }
  76%  { transform: rotate(-6.8deg); }
  80%  { transform: rotate(7.2deg); }
  84%  { transform: rotate(-7.5deg); }
  88%  { transform: rotate(7.8deg); }
  92%  { transform: rotate(-8deg); }
  96%  { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}
/* Vibration constante après le crescendo (jamais arrêtée jusqu'à la phase "calme") */
@keyframes lpcSplashSteadyVibrate {
  0%   { transform: rotate(-8deg); }
  50%  { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}

/* ------ Phase "calme" : déclenchée quand le splash devient l'écran d'accueil ------ */
/* La vibration se dampe progressivement puis le logo prend une respiration douce sans rotation */
/* (NB : le conteneur est #lpc-splash via un id, pas une classe - d'où le sélecteur mixte) */
#lpc-splash.lpc-splash--calm .lpc-splash__logo {
  animation: lpcSplashShrinkBack 1.4s cubic-bezier(.34, 1.1, .64, 1) forwards;
}
@keyframes lpcSplashShrinkBack {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}
#lpc-splash.lpc-splash--calm .lpc-splash__logo .lpc-splash__art {
  animation:
    lpcSplashWindDown 1.4s cubic-bezier(.25, .46, .45, .94) forwards,
    lpcLogoBreathing 4.5s ease-in-out 1.4s infinite !important;
}
/* Damping : oscillations de plus en plus faibles jusqu'à 0°, finit complètement stable */
@keyframes lpcSplashWindDown {
  0%   { transform: rotate(8deg); }
  10%  { transform: rotate(-6.5deg); }
  20%  { transform: rotate(5deg); }
  30%  { transform: rotate(-3.8deg); }
  40%  { transform: rotate(2.8deg); }
  50%  { transform: rotate(-2deg); }
  60%  { transform: rotate(1.4deg); }
  70%  { transform: rotate(-0.9deg); }
  80%  { transform: rotate(0.4deg); }
  90%  { transform: rotate(-0.1deg); }
  100% { transform: rotate(0deg); }
}
/* Respiration douce : SEULEMENT un scale qui pulse, AUCUNE rotation */
@keyframes lpcLogoBreathing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(0deg) scale(1.045); }
}

/* ------ Boutons "Se connecter / Créer un compte" affichés DANS le splash (visiteur app) ------ */
.lpc-splash__actions {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 320px;
  margin-top: 36px;
  padding: 0 24px;
  box-sizing: border-box;
}
.lpc-splash__actions[hidden] { display: none; }
/* Chaque bouton est invisible avant l'animation (pour pas qu'on les voie en position finale) */
.lpc-splash__actions .lpc-splash__btn { opacity: 0; }
/* Quand --in est appliqué, on déclenche la chute (animations staggerées) */
.lpc-splash__actions--in .lpc-splash__btn:nth-child(1) {
  animation: lpcStoneDrop 0.95s cubic-bezier(.34, 1.56, .64, 1) 0s forwards;
}
.lpc-splash__actions--in .lpc-splash__btn:nth-child(2) {
  animation: lpcStoneDrop 0.95s cubic-bezier(.34, 1.56, .64, 1) 0.18s forwards;
}
/* Chute style caillou : tombe vite, impact qui écrase, puis se relève en oscillant */
@keyframes lpcStoneDrop {
  0%   { opacity: 0; transform: translateY(-180px) scale(0.85) rotate(-3deg); filter: blur(2px); }
  40%  { opacity: 1; transform: translateY(-90px)  scale(0.9)  rotate(-1deg); filter: blur(0); }
  62%  { opacity: 1; transform: translateY(10px)   scale(1.06, 0.92) rotate(0deg); }  /* impact : aplati */
  72%  { transform: translateY(-12px) scale(0.97, 1.03); }                              /* léger rebond vers le haut */
  82%  { transform: translateY(4px)   scale(1.02, 0.99); }                              /* mini rebond */
  92%  { transform: translateY(-2px)  scale(1, 1); }
  100% { opacity: 1; transform: translateY(0)      scale(1) rotate(0deg); }
}
.lpc-splash__btn {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 22px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600;
  text-align: center; text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .15s;
  border: 1.5px solid transparent;
}
.lpc-splash__btn.primary {
  background: linear-gradient(135deg, #ff7800, #c41a0a);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 120, 0, .45), 0 0 18px rgba(196, 26, 10, .25);
}
.lpc-splash__btn.primary:hover { background: linear-gradient(135deg, #ffaa00, #ff4520); }
.lpc-splash__btn.primary:active { transform: scale(.97); }
.lpc-splash__btn.ghost {
  background: rgba(245, 234, 210, .08);
  color: #251d17;
  border-color: rgba(245, 234, 210, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lpc-splash__btn.ghost:hover { background: rgba(245, 234, 210, .15); border-color: rgba(245, 234, 210, .55); }
.lpc-splash__btn.ghost:active { transform: scale(.97); }

/* ------ Particules : confettis colorés (4 formes) + smileys de fête, jaillis du logo ------ */
.lpc-splash-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100001;
  --vx: 0px;
  --peak: -150px;
  --fall: 450px;
  --init-rot: 0deg;
  --spin: 540deg;
  /* Lueur incandescente (lave en fusion) */
  box-shadow: 0 0 6px rgba(255, 140, 0, .65), 0 0 14px rgba(255, 80, 0, .35);
  animation: lpcParticle 1.9s cubic-bezier(.35, .05, .55, 1) forwards;
  will-change: transform, opacity;
}
/* Formes géométriques */
.lpc-splash-particle.shape-circle   { border-radius: 50%; }
.lpc-splash-particle.shape-square   { border-radius: 2px; }
.lpc-splash-particle.shape-rect     { border-radius: 2px; }
.lpc-splash-particle.shape-diamond  { border-radius: 2px; }
.lpc-splash-particle.shape-emoji {
  background: transparent !important;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
@keyframes lpcParticle {
  /* Phase 1 (0-30%) : envol vers le pic, début de rotation */
  0% {
    transform: translate(0, 0) rotate(var(--init-rot)) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(calc(var(--vx) * .55), var(--peak)) rotate(calc(var(--init-rot) + (var(--spin) * 0.35))) scale(1.15);
    opacity: 1;
  }
  /* Phase 2 (30-100%) : chute parabolique sous gravité, fin du spin */
  100% {
    transform: translate(var(--vx), var(--fall)) rotate(calc(var(--init-rot) + var(--spin))) scale(0.5);
    opacity: 0;
  }
}
/* Layout style header du site : "Le P'tit" en signature manuscrite posée
   au-dessus-gauche de "Combraillou", légèrement rotated et chevauchant. */
.lpc-splash__name {
  position: relative;
  display: inline-block;
  color: #fff;
  /* Padding-top pour laisser respirer "Le P'tit" en absolute au-dessus */
  padding-top: 22px;
}
.lpc-splash__name .ptit {
  position: absolute;
  top: 0; left: -6px;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 28px; color: #ffaa00;
  letter-spacing: .5px;
  line-height: 1;
  transform: rotate(-5deg);
  text-shadow: 0 0 10px rgba(255, 170, 0, .45), 0 2px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.lpc-splash__name .brand {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 44px; font-weight: 700; line-height: 1;
  color: #fff4dc;
  letter-spacing: -.5px;
  text-shadow: 0 0 18px rgba(255, 170, 0, .55), 0 2px 6px rgba(0, 0, 0, .6);
}
@keyframes lpcSplashIn {
  0% { opacity: 0; transform: scale(.85); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* ------ Effets de vie sur le logo (splash + accueil app) ------ */
/* Flottement + micro-vibrations : up/down + rotation/scale subtiles, en variant les pauses pour pas être robotique */
@keyframes lpcLogoFloat {
  0%   { transform: translateY(0)     rotate(0deg)    scale(1); }
  12%  { transform: translateY(-3px)  rotate(-1.5deg) scale(1.01); }
  20%  { transform: translateY(-4px)  rotate(1.5deg)  scale(1.01); }
  35%  { transform: translateY(-7px)  rotate(-0.8deg) scale(1.025); }
  50%  { transform: translateY(-8px)  rotate(0deg)    scale(1.03); }
  62%  { transform: translateY(-6px)  rotate(1.2deg)  scale(1.02); }
  78%  { transform: translateY(-3px)  rotate(-1deg)   scale(1.01); }
  88%  { transform: translateY(-1px)  rotate(0.5deg)  scale(1.005); }
  100% { transform: translateY(0)     rotate(0deg)    scale(1); }
}
/* Halo doré pulsant (version splash, plus marquée sur fond sombre) */
@keyframes lpcLogoGlow {
  0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 0 rgba(227, 185, 117, 0); }
  50%      { box-shadow: 0 16px 50px rgba(0, 0, 0, .4),  0 0 40px 12px rgba(227, 185, 117, .35); }
}
/* Halo doré pulsant (version sobre, plus discret pour l'accueil clair) */
@keyframes lpcLogoGlowSoft {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 120, 0, 0); }
  50%      { box-shadow: 0 14px 36px rgba(0, 0, 0, .22), 0 0 28px 8px rgba(255, 120, 0, .28); }
}
/* Pour les utilisateurs qui préfèrent le mouvement réduit (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .lpc-splash__logo img, .standalone-welcome__logo img { animation: none; }
}

/* ------ -0cran d'accueil minimaliste (visiteur non-connecté en PWA app) ------ */
/* :not([hidden]) pour respecter l'attribut hidden HTML (sinon display:flex écrase) */
#standaloneVisitorHome:not([hidden]) {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(180deg, var(--cream-bg) 0%, var(--cream-soft) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
}
.standalone-welcome {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 0;
}
.standalone-welcome__logo {
  margin-bottom: 8px;
  animation: lpcWelcomeIn .5s ease-out;
}
.standalone-welcome__logo img {
  width: 120px; height: 120px;
  border-radius: 28px;
  background: var(--cream-card);
  padding: 8px; box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  object-fit: contain;
  animation: lpcLogoFloat 3.5s ease-in-out infinite, lpcLogoGlowSoft 3s ease-in-out infinite;
}
.standalone-welcome__title {
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  animation: lpcWelcomeIn .5s .1s ease-out backwards;
}
.standalone-welcome__title .ptit {
  font-family: 'Caveat', cursive;
  font-size: 26px; color: var(--gold-warm);
  letter-spacing: .5px; line-height: 1;
}
.standalone-welcome__title .brand {
  font-family: 'Fraunces', serif;
  font-size: 38px; font-weight: 700; line-height: 1.05;
  color: var(--forest-dark);
}
.standalone-welcome__sub {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 15px; color: var(--forest-med);
  text-align: center;
  margin: 6px 0 30px;
  animation: lpcWelcomeIn .5s .2s ease-out backwards;
}
.standalone-welcome__actions {
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  animation: lpcWelcomeIn .5s .3s ease-out backwards;
}
.standalone-welcome__btn {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600;
  text-align: center; text-decoration: none;
  border: 1.5px solid var(--line-strong);
  background: var(--cream-card); color: var(--forest-dark);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.standalone-welcome__btn:hover { background: var(--cream-card); }
.standalone-welcome__btn:active { transform: scale(.98); }
.standalone-welcome__btn.primary {
  background: linear-gradient(135deg, var(--brick), var(--brick-dark));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(196, 26, 10, .25);
}
.standalone-welcome__btn.primary:hover {
  background: linear-gradient(135deg, var(--brick-dark), #5d1a0a);
}
@keyframes lpcWelcomeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------ Bouton retour : visible uniquement quand l'app tourne en PWA standalone ------ */
.lpc-back-btn {
  display: none;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--forest-dark);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 6px;
  transition: background .15s, transform .12s;
}
.lpc-back-btn svg { width: 20px; height: 20px; }
.lpc-back-btn:hover { background: var(--cream-bg); }
.lpc-back-btn:active { transform: scale(.92); }
.lpc-back-btn.disabled { opacity: .35; cursor: default; }
.lpc-back-btn.disabled:hover { background: var(--cream-soft); }
/* Affiché uniquement en mode PWA installée */
html.lpc-standalone .lpc-back-btn:not([hidden]) { display: inline-flex; }
/* En standalone, on resserre un peu le brand pour faire de la place */
html.lpc-standalone .lpc-brand img { width: 36px; height: 36px; }
@media (max-width: 480px) {
  html.lpc-standalone .lpc-back-btn { width: 36px; height: 36px; margin-right: 4px; }
  html.lpc-standalone .lpc-back-btn svg { width: 18px; height: 18px; }
}
/* En standalone iPhone : on ajoute aussi de la marge en haut pour pas que le header passe sous le notch */
@supports (padding-top: env(safe-area-inset-top)) {
  html.lpc-standalone .lpc-header { padding-top: env(safe-area-inset-top); }
  html.lpc-standalone body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ------ Modal "Installer l'app" pour iOS (instructions étape par étape) ------ */
.lpc-install-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lpc-install-modal__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.lpc-install-modal__box {
  position: relative; background: var(--cream-card); border-radius: 18px;
  width: 460px; max-width: 100%; padding: 24px 26px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
  animation: lpcPopIn .2s ease-out;
}
.lpc-install-modal__box header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.lpc-install-modal__box header h3 {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
  color: var(--forest-dark); margin: 0;
}
.lpc-install-modal__box header button {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--forest-med); font-size: 22px; line-height: 1;
}
.lpc-install-modal__box header button:hover { background: var(--cream-bg); }
.lpc-install-modal__box .intro {
  font-size: 14.5px; color: var(--forest-med); line-height: 1.5;
  margin-bottom: 14px;
}
.lpc-install-steps {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.lpc-install-steps li {
  background: var(--cream-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.55;
  color: var(--forest-dark);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lpc-install-steps li strong { color: var(--brick); font-weight: 700; }
.lpc-install-steps .ios-share {
  display: inline-flex; vertical-align: middle;
  width: 18px; height: 18px; color: #007aff;
  background: rgba(0, 122, 255, .1);
  border-radius: 4px; padding: 2px;
}
.lpc-install-modal__box .note {
  font-size: 13px; color: var(--forest-med); font-style: italic;
  margin: 14px 0 0;
}
.lpc-install-modal__ok {
  display: block; width: 100%;
  margin-top: 16px;
  padding: 12px 18px;
  background: var(--brick); color: #fff;
  border: none; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.lpc-install-modal__ok:hover { background: var(--brick-dark); }

/* Bouton "Installer l'app" dans le menu user dropdown : style cohérent */
#lpcInstallBtn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--brick); text-align: left;
  border-radius: 8px;
}
#lpcInstallBtn:hover { background: rgba(196, 26, 10, .08); }
#lpcInstallBtn svg { width: 18px; height: 18px; flex-shrink: 0; }
#lpcInstallBtn[hidden] { display: none; }

/* ─── Bannière sticky "Installer l'app" en bas de page ─── */
.lpc-install-banner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9500;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2e3234 0%, #1f2425 100%);
  border: 1.5px solid rgba(255, 120, 0, .45);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .55),
    0 0 24px rgba(255, 120, 0, .18),
    inset 0 1px 0 rgba(255, 200, 140, .12);
  color: #f0f0ec;
  font-family: 'Inter', sans-serif;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.34, 1.2, .64, 1), opacity .35s ease-out;
  max-width: 560px; margin: 0 auto;
}
.lpc-install-banner--in { transform: translateY(0); opacity: 1; }
.lpc-install-banner__icon {
  font-size: 32px; line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 120, 0, .45));
  animation: lpcInstallPulse 2.4s ease-in-out infinite;
}
@keyframes lpcInstallPulse {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.10) rotate(3deg); }
}
.lpc-install-banner__text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.3;
}
.lpc-install-banner__text strong {
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600;
  color: #fff4dc;
}
.lpc-install-banner__text span {
  font-size: 12.5px; color: rgba(240, 240, 236, .75);
}
.lpc-install-banner__already {
  display: inline-block; margin-top: 4px;
  font-size: 11.5px; color: rgba(255, 170, 0, .85);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.lpc-install-banner__already:hover { color: #ffaa00; }
.lpc-install-banner__cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff7800, #c41a0a);
  color: #fff; border: none;
  padding: 10px 18px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 120, 0, .45);
  transition: transform .12s, box-shadow .15s;
}
.lpc-install-banner__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 120, 0, .6); }
.lpc-install-banner__cta:active { transform: scale(.97); }
.lpc-install-banner__close {
  flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  color: rgba(240, 240, 236, .55);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lpc-install-banner__close:hover { background: rgba(255, 255, 255, .08); color: #fff4dc; }
@media (max-width: 480px) {
  .lpc-install-banner { padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .lpc-install-banner__icon { font-size: 26px; }
  .lpc-install-banner__text strong { font-size: 14.5px; }
  .lpc-install-banner__text span { font-size: 11.5px; }
  .lpc-install-banner__cta { padding: 9px 14px; font-size: 13px; }
}

/* ------ Bouton emoji ouvert : contour rond grisé pour signaler l'état actif ------ */
.lpc-emoji-btn.active,
#msgEmojiBtn.active,
.lpc-photo-side__emoji-btn.active,
.lpc-pub-comments__emoji.active {
  background: var(--cream-bg);
  color: var(--gold-warm);
  border-radius: 50%;
}

/* ------ Long-press réactions : pas de sélection texte / pas de menu contextuel iOS ------ */
.lpc-pub__action-btn[data-act="like"],
.lpc-pub__comment-like-wrap .like-btn,
#lpcPhotoLikeBtn,
.lpc-photo-comment .like-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------ Floaters de réaction : ancrés à gauche sur mobile pour ne pas sortir de l'écran ------ */
@media (max-width: 700px) {
  .lpc-pub__react-floater,
  .lpc-pub__comment-react-floater,
  .lpc-photo-react-floater,
  .lpc-photo-comment__react-floater {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    max-width: calc(100vw - 24px);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lpc-pub__react-floater::-webkit-scrollbar,
  .lpc-pub__comment-react-floater::-webkit-scrollbar,
  .lpc-photo-react-floater::-webkit-scrollbar,
  .lpc-photo-comment__react-floater::-webkit-scrollbar { display: none; }
}

/* ------ Suppression hover effects qui restent collés au tap sur mobile ------ */
@media (hover: none) {
  .lpc-feed-tab:hover { background: transparent; color: var(--forest-med); }
  .lpc-feed-tab.active:hover { background: var(--brick); color: #fff; }
  .lpc-composer__trigger:hover { background: var(--cream-card); }
  .lpc-pub__action-btn:hover { background: transparent; color: var(--forest-med); }
  .lpc-pub__action-btn.liked:hover { color: var(--brick); }
}