/* CONEKTO — Styles globaux — Pivot social façon Facebook (05/07/2026)
   Mobile-first, léger, sans framework. Charte Futura + couleurs Conekto.
   Reconstruit le 12/07/2026 (corruption d'écriture) + ajouts CONTEXTE/17. */

/* ============================================================
   POLICES
   ============================================================ */
@font-face { font-family: 'Futura'; src: url('/fonts/futura-light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('/fonts/futura-book.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('/fonts/futura-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url('/fonts/futura-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  /* Primaires V4 */
  --c-primaire: #0D1946;
  --c-logo-bleu: #2B6699;
  --c-logo-cyan: #2CC9D1;
  --c-primaire-clair: #2B6699;
  /* Secteurs V4 */
  --c-achat-vente: #E8631E;
  --c-emploi: #00A878;
  --c-services: #7B61C1;
  --c-matrimonial: #D4457A;
  --c-evenements: #E8B820;
  /* Compat anciens noms */
  --c-accent-orange: #E8631E;
  --c-accent-vert: #00A878;
  --c-accent-jaune: #E8B820;
  /* Surfaces & neutres V4 */
  --c-fond: #F0F2F5;
  --c-texte: #1C1E21;
  --c-texte-2: #65676B;
  --c-texte-3: #8A8D91;
  --c-tertiaire: #8A8D91;
  --c-carte: #FFFFFF;
  --c-bord: #DADDE1;
  --c-hover: #f2f3f5;
  --c-separator: #ced0d4;
  /* Sémantiques V4 */
  --c-succes: #2ECC71;
  --c-erreur: #D33A3A;
  --c-alerte: #E8B820;
  --c-info: #2B6699;
  /* Composants V4 */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 16px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-menu: 0 2px 12px rgba(0,0,0,.15);
  --transition-micro: 150ms ease-out;
  --transition-std: 300ms ease-out;
  --header-h: 56px;
  --catbar-h: 42px;
  --header-bg: var(--c-primaire);
}

/* ============================================================
   MODE SOMBRE
   ============================================================ */
[data-theme="dark"] {
  --c-fond: #18191A;
  --c-texte: #E4E6EB;
  --c-texte-2: #B0B3B8;
  --c-texte-3: #8A8D91;
  --c-carte: #242526;
  --c-bord: #3E4042;
  --c-hover: #3A3B3C;
  --c-separator: #3E4042;
  --header-bg: #242526;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-menu: 0 2px 12px rgba(0,0,0,.4);
  color-scheme: dark;
}
[data-theme="dark"] a { color: var(--c-logo-cyan); }
[data-theme="dark"] .site-header { background: var(--header-bg); border-bottom: 1px solid var(--c-bord); }
[data-theme="dark"] .pied { background: var(--c-carte); color: var(--c-texte-2); border-top: 1px solid var(--c-bord); }
[data-theme="dark"] .bouton.secondaire { background: var(--c-hover); color: var(--c-texte); border-color: var(--c-bord); }
[data-theme="dark"] .modal { background: var(--c-carte); color: var(--c-texte); }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.7); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--c-hover); color: var(--c-texte); border-color: var(--c-bord);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: 'Futura', 'Jost', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--c-fond); color: var(--c-texte);
  -webkit-text-size-adjust: 100%; font-size: 15px;
  color-scheme: light;
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 8px; }
a { color: var(--c-primaire); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

/* Hiérarchie typographique V4 */
h1 { font-size: 2.1rem; font-weight: 700; }
h2 { font-size: 1.65rem; font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 500; }

/* Accessibilité V4 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Anti-flash accueil (16/07) : quand l'indice local dit « connecté »,
   la vitrine publique pré-rendue est masquée dès le premier rendu.
   Le JS de session la ré-affiche si l'indice était périmé. */
html.ck-connecte #accueil-public { display: none; }

/* ============================================================
   HEADER — Facebook-style
   ============================================================ */
.site-header {
  background: var(--header-bg); height: var(--header-h);
  padding: 0 12px; display: flex; align-items: center; gap: 6px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.header-marque { flex-shrink: 0; }
.site-header .logo {
  font-weight: 700; font-size: 1.55rem; letter-spacing: .5px;
  text-decoration: none; display: flex; align-items: baseline;
}
.logo-conek { color: #fff; }
.logo-to { color: var(--c-logo-cyan); }
.slogan { display: none; }

/* Recherche header */
.header-search { flex: 1; max-width: 240px; margin-left: 8px; position: relative; }
.header-search input {
  width: 100%; padding: 8px 12px 8px 34px; font-size: .88rem;
  border: 0; border-radius: 20px;
  background: rgba(255,255,255,.15); color: #fff;
  font-family: inherit; outline: none; transition: background .2s;
}
.header-search input::placeholder { color: rgba(255,255,255,.6); }
.header-search input:focus { background: rgba(255,255,255,.25); }
.header-search .icon-search-btn {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 1; border-radius: 50%;
  transition: background .2s;
}
.header-search .icon-search-btn:hover { background: rgba(255,255,255,.12); }
.header-search .icon-search {
  width: 16px; height: 16px; opacity: .6; pointer-events: none;
}

/* Icônes navigation (fil, boutiques, groupes) */
.header-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.header-nav-item {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: rgba(255,255,255,.7); background: transparent;
  border: 0; cursor: pointer; position: relative;
  transition: background .2s, color .2s; text-decoration: none;
}
.header-nav-item:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.header-nav-item.active { color: var(--c-logo-cyan); }
.header-nav-item.disabled { opacity: .35; cursor: default; pointer-events: none; }
.header-nav-item svg { width: 22px; height: 22px; fill: currentColor; }
.header-nav-item .badge-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--c-erreur); color: #fff; font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; display: flex; align-items: center; justify-content: center;
}
.header-nav-item .tooltip-soon {
  display: none; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.8); color: #fff; font-size: .7rem;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none;
}
.header-nav-item.disabled:hover .tooltip-soon { display: block; }

/* Boutons circulaires header (menu, chat, notif, avatar) */
.header-circle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 0; cursor: pointer;
  color: #fff; transition: background .2s; position: relative;
}
.header-circle:hover { background: rgba(255,255,255,.25); }
.header-circle svg { width: 20px; height: 20px; fill: currentColor; }
.header-circle .badge-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--c-erreur); color: #fff; font-size: .6rem; font-weight: 700;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 99px; display: flex; align-items: center; justify-content: center;
}

.header-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  cursor: pointer; object-fit: cover;
  background: var(--c-logo-bleu);
}

.header-auth-btns {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.header-auth-btns[hidden] { display: none !important; }

.header-separator {
  width: 1px; height: 24px; background: rgba(255,255,255,.25); margin: 0 6px; flex-shrink: 0;
}

/* Bouton + header (17-B6) */
.header-plus {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: rgba(255,255,255,.85); background: rgba(232,99,30,.9);
  transition: background .2s, transform .15s; text-decoration: none;
}
.header-plus:hover { background: var(--c-achat-vente); color: #fff; transform: scale(1.05); text-decoration: none; }
.header-plus svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; }

@media (max-width: 600px) {
  .header-search { display: none; }
  .header-nav-item { width: 36px; height: 36px; }
  .header-nav-item svg { width: 20px; height: 20px; }
  .header-separator { margin: 0 6px; height: 20px; }
  .header-plus { width: 32px; height: 32px; margin-right: 2px; }
  .header-plus svg { width: 16px; height: 16px; }
}

/* ============================================================
   DROPDOWNS & OVERLAYS
   ============================================================ */
.dropdown-overlay {
  display: none; position: fixed; inset: 0; z-index: 199;
}
.dropdown-overlay.open { display: block; }
.dropdown-panel {
  display: none; position: fixed;
  top: calc(var(--header-h) + 4px); right: 8px;
  background: var(--c-carte); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  min-width: 300px; max-width: 360px;
  z-index: 200; overflow: hidden;
  max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto;
}
.dropdown-panel.open { display: block; }
.dropdown-panel h3 { font-size: 1.2rem; font-weight: 700; padding: 16px 16px 8px; margin: 0; }

/* Panel notifications */
.notif-panel { padding: 12px 16px; }
.notif-panel .notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px;
  border-radius: 8px; cursor: pointer; text-decoration: none; color: inherit; transition: background .15s;
}
.notif-panel .notif-item:hover { background: var(--c-fond); }
.notif-panel .notif-item.non-lu { background: rgba(43,102,153,.06); }
.notif-panel .notif-item .notif-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--c-fond);
}
.notif-panel .notif-item .notif-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--c-logo-bleu); color: #fff;
}
.notif-panel .notif-item .notif-icon svg { width: 18px; height: 18px; fill: currentColor; }
.notif-panel .notif-body { flex: 1; min-width: 0; }
.notif-panel .notif-body .notif-text { font-size: .88rem; line-height: 1.3; }
.notif-panel .notif-body .notif-time { font-size: .78rem; color: var(--c-texte-2); margin-top: 2px; }
.notif-panel .notif-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-logo-bleu); flex-shrink: 0; margin-top: 6px;
}
.bouton-lien { background: none; border: none; color: var(--c-logo-bleu); cursor: pointer; font-family: inherit; padding: 0; }
.bouton-lien:hover { text-decoration: underline; }

/* Rouage paramètres du panneau notifications (17-B5) */
.notif-gear {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--c-texte-2); transition: background .15s;
}
.notif-gear:hover { background: var(--c-hover); text-decoration: none; }
.notif-gear svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Menu principal (grille naviguer/créer) */
.menu-principal { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.menu-principal .menu-section { padding: 8px 0; }
.menu-principal .menu-section:first-child { border-right: 1px solid var(--c-bord); }
.menu-section-titre {
  font-size: .72rem; font-weight: 600; color: var(--c-texte-2);
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 16px 4px; margin: 0;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; color: var(--c-texte); text-decoration: none;
  font-size: .9rem; transition: background .15s;
}
.menu-item:hover { background: var(--c-hover); text-decoration: none; }
.menu-item svg { width: 20px; height: 20px; fill: var(--c-texte-2); flex-shrink: 0; }
.menu-item.disabled { opacity: .4; pointer-events: none; }
.menu-item[hidden] { display: none !important; }
/* Menu items colorés */
.menu-item-highlight {
  background: rgba(43,102,153,.1); border-left: 3px solid var(--c-logo-bleu);
  font-weight: 600 !important;
}
.menu-item-highlight svg { fill: var(--c-logo-bleu) !important; }
.menu-item-orange svg { fill: var(--c-achat-vente) !important; }
.menu-item-vert svg { fill: var(--c-emploi) !important; }
.menu-item-jaune svg { fill: var(--c-evenements) !important; }

.menu-item .soon-tag {
  font-size: .62rem; background: var(--c-bord); color: var(--c-texte-2);
  padding: 1px 6px; border-radius: 4px; margin-left: auto;
}

/* Menu compte */
.menu-compte .compte-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--c-bord);
}
.menu-compte .compte-header img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--c-logo-bleu);
}
.menu-compte .compte-nom { font-weight: 600; font-size: .95rem; }
.menu-compte .compte-voir-profil { font-size: .82rem; color: var(--c-logo-bleu); }
.menu-compte .boutiques-section { border-bottom: 1px solid var(--c-bord); padding: 8px 0; }
.menu-compte .boutiques-section .section-label {
  font-size: .72rem; font-weight: 600; color: var(--c-texte-2);
  text-transform: uppercase; padding: 4px 16px;
}

/* ============================================================
   POPUP MODALE (inscription/connexion)
   ============================================================ */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 300;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--c-carte); border-radius: var(--radius-lg);
  box-shadow: 0 4px 30px rgba(0,0,0,.25);
  width: 100%; max-width: 420px; padding: 20px; position: relative;
  animation: modal-in .2s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-hover); border: 0; cursor: pointer;
  font-size: 1.1rem; color: var(--c-texte-2);
  display: flex; align-items: center; justify-content: center;
}
.modal-header { padding: 20px 24px 0; text-align: center; }
.modal-header h2 { font-size: 1.3rem; margin: 0 0 4px; }
.modal-header p { color: var(--c-texte-2); font-size: .88rem; margin: 0; }
.modal-body { padding: 16px 24px 24px; }

/* ── Popup partage unifié (charte V4 : Futura, couleurs primaires, radius 8px, 44px tactile) ── */
.partage-modal { max-width: 380px; padding: 18px 18px 14px; font-family: 'Futura', 'Jost', 'Nunito Sans', sans-serif; }
.partage-titre { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; text-align: center; color: var(--c-primaire); }
.partage-qr { display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; width: 160px; height: 160px; background: var(--c-fond); border-radius: var(--radius); }
.partage-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.partage-btn { font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; justify-content: center; min-height: 44px; }
.partage-sep { text-align: center; font-size: .9rem; font-weight: 600; color: var(--c-texte-2); padding: 8px 0; border-top: 1px solid var(--c-bord); margin-top: 4px; }
.partage-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--c-bord); margin-bottom: 8px; }
.partage-tab { flex: 1; padding: 10px 4px; font-size: .9rem; font-weight: 500; text-align: center; background: none; border: none; cursor: pointer; color: var(--c-texte-2); border-bottom: 2px solid transparent; margin-bottom: -2px; font-family: inherit; min-height: 44px; }
.partage-tab.active { color: var(--c-logo-bleu); border-bottom-color: var(--c-logo-bleu); }
.partage-liste { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.partage-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--c-bord); background: var(--c-carte); text-align: left; font-family: inherit; font-size: .9rem; width: 100%; transition: background .15s; min-height: 44px; }
.partage-item:hover { background: var(--c-hover); }
.partage-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.partage-check { accent-color: var(--c-logo-bleu); width: 18px; height: 18px; flex-shrink: 0; }
.partage-conv { cursor: pointer; }
.partage-vide { color: var(--c-texte-2); font-size: .9rem; text-align: center; padding: 16px 0; margin: 0; }
.partage-loading { font-size: .9rem; color: var(--c-texte-2); }
.partage-envoyer { width: 100%; margin-top: 8px; min-height: 44px; }
.partage-envoyer:disabled { opacity: .5; cursor: not-allowed; }
.partage-status { font-size: .9rem; text-align: center; margin: 6px 0 0; }

.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; border: 0;
  cursor: pointer; font-family: inherit; margin-bottom: 8px;
  transition: filter .15s;
}
.btn-oauth:hover { filter: brightness(.95); }
.btn-oauth svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-facebook { background: #1877f2; color: #fff; }
.btn-google { background: #fff; color: var(--c-texte); border: 1px solid var(--c-bord); }
.modal-separator {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0; color: var(--c-texte-2); font-size: .82rem;
}
.modal-separator::before, .modal-separator::after {
  content: ''; flex: 1; height: 1px; background: var(--c-bord);
}

/* ============================================================
   POST (annonce en format fil Facebook)
   ============================================================ */
.post {
  background: var(--c-carte); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); margin-bottom: 16px; overflow: hidden;
}
.post-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 0;
}
.post-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--c-primaire-clair); flex-shrink: 0;
}
.post-author { flex: 1; min-width: 0; }
.post-author-name {
  font-weight: 600; font-size: .92rem; color: var(--c-texte);
  text-decoration: none; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-author-name:hover { text-decoration: underline; }
.post-meta-line { font-size: .78rem; color: var(--c-texte-2); display: flex; align-items: center; gap: 4px; }
/* D9 — Bouton ⋯ (options post) */
.post-dots {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-texte-2); font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.post-dots:hover { background: var(--c-hover); }
.post-save {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-texte-2); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.post-save:hover { background: var(--c-hover); }
.post-save.saved { color: var(--c-logo-bleu); }
.post-save.saved svg { fill: var(--c-logo-bleu); }
.post-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-texte-2); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; position: relative; flex-shrink: 0;
}
.post-close:hover { background: var(--c-hover); }
.post-close-menu {
  display: none; position: absolute; top: 36px; right: 0;
  background: var(--c-carte); border-radius: var(--radius);
  box-shadow: var(--shadow-menu); min-width: 240px; z-index: 10; overflow: hidden;
}
.post-close-menu.open { display: block; }
.post-close-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border: 0; background: transparent;
  font-size: .88rem; color: var(--c-texte); cursor: pointer; font-family: inherit;
}
.post-close-menu button:hover { background: var(--c-hover); }

.post-body { padding: 8px 16px; }
.post-body h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.post-body .post-desc {
  font-size: .92rem; color: var(--c-texte-2); margin: 0 0 6px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-prix { font-size: 1.1rem; font-weight: 700; color: var(--c-primaire); margin: 4px 0; }
.post-location { font-size: .82rem; color: var(--c-texte-2); }
.post-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }

/* Grille photos dans les posts (1 à 4+ photos) */
.post-photos { display: grid; gap: 2px; max-height: 500px; overflow: hidden; }
.post-photos-1 { grid-template-columns: 1fr; }
.post-photos-2 { grid-template-columns: 1fr 1fr; }
.post-photos-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-photos-3 .post-photo-link:first-child { grid-row: span 2; }
.post-photos-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-photo-link { display: block; overflow: hidden; }
.post-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; max-height: 500px; }
.post-photos img:hover { opacity: .92; }
.post-photo-more { position: relative; }
.post-photo-more::after {
  content: attr(data-more); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.5rem; font-weight: 700;
}

/* Photos dans la page annonce détail */
.annonce-photos { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
.annonce-photos::-webkit-scrollbar { height: 4px; }
.annonce-photos::-webkit-scrollbar-thumb { background: var(--c-bord); border-radius: 4px; }
.annonce-photo {
  max-height: 320px; border-radius: var(--radius); object-fit: cover;
  scroll-snap-align: start; flex-shrink: 0; max-width: 100%; cursor: pointer;
}

/* Lightbox plein écran */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 4px; user-select: none; -webkit-user-drag: none;
}
.lightbox-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); border: 0; color: #fff; font-size: 1.8rem;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,.3); }
.lightbox-arrow.prev { left: 12px; }
.lightbox-arrow.next { right: 12px; }
.lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 600;
}
@media (max-width: 640px) {
  .lightbox-arrow { display: none; }
}

.post-stats {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px; font-size: .78rem; color: var(--c-texte-2);
  gap: 16px; column-gap: 16px;
}
.post-stats > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.post-stats .like-count { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.post-stats .like-icon-small {
  width: 18px; height: 18px; background: var(--c-logo-bleu);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.post-stats .like-icon-small svg { width: 11px; height: 11px; fill: #fff; }

.post-actions { display: flex; border-top: 1px solid var(--c-bord); }
.post-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; font-size: .88rem; font-weight: 500;
  color: var(--c-texte-2); background: transparent; border: 0;
  cursor: pointer; font-family: inherit; transition: background .15s; text-decoration: none;
}
.post-action:hover { background: var(--c-hover); text-decoration: none; }
.post-action svg { width: 18px; height: 18px; fill: currentColor; }
.post-action.liked { color: var(--c-logo-bleu); font-weight: 600; }
.post-action[hidden] { display: none !important; }
.post-action.liked svg { fill: var(--c-logo-bleu); }

/* ============================================================
   VUE GRILLE du fil (toggle fil/grille — 17 — 12/07)
   Utilise les mêmes .carte que l'accueil non connecté
   ============================================================ */
#fil-posts.vue-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (min-width: 768px) { #fil-posts.vue-grille { grid-template-columns: 1fr 1fr 1fr; } }

/* ============================================================
   CARROUSELS
   ============================================================ */
.carrousel-section {
  background: var(--c-carte); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); margin-bottom: 12px; padding: 12px 0;
}
.carrousel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 8px; font-size: .95rem; font-weight: 600;
}
.carrousel-header a { font-size: .85rem; font-weight: 500; }
.carrousel {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel-card {
  flex: 0 0 auto; width: 160px; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-bord); background: var(--c-carte);
  text-decoration: none; color: var(--c-texte); transition: box-shadow .15s;
}
.carrousel-card:hover { box-shadow: var(--shadow-card); text-decoration: none; }
.carrousel-card img { width: 100%; height: 100px; object-fit: cover; background: var(--c-hover); }
.carrousel-card .cc-body { padding: 8px 10px; }
.carrousel-card .cc-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrousel-card .cc-sub { font-size: .75rem; color: var(--c-texte-2); margin-top: 2px; }
.btn-suivre-small {
  display: block; width: 100%; margin-top: 6px; padding: 5px;
  border-radius: 6px; font-size: .78rem; font-weight: 600; text-align: center;
  border: 0; cursor: pointer; font-family: inherit;
  background: rgba(43,102,153,.12); color: var(--c-primaire-clair);
  transition: background .15s;
}
.btn-suivre-small:hover { background: rgba(43,102,153,.22); }

/* ============================================================
   COMMENTAIRES
   ============================================================ */
.commentaires-section { border-top: 1px solid var(--c-bord); padding: 10px 16px; }
.commentaire { display: flex; gap: 8px; margin-bottom: 10px; }
.commentaire .c-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primaire-clair); flex-shrink: 0; object-fit: cover; }
.commentaire .c-bulle { background: var(--c-hover); border-radius: 18px; padding: 8px 12px; max-width: 85%; }
.commentaire .c-auteur { font-size: .82rem; font-weight: 600; color: var(--c-texte); text-decoration: none; }
.commentaire .c-auteur:hover { text-decoration: underline; }
.commentaire a > .c-avatar { cursor: pointer; }
.commentaire .c-texte { font-size: .88rem; margin: 2px 0 0; }
.commentaire .c-date { font-size: .72rem; color: var(--c-texte-3); margin-top: 2px; padding-left: 12px; }
.commentaire-input { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.commentaire-input img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--c-primaire-clair); flex-shrink: 0; }
.commentaire-input input {
  flex: 1; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--c-bord); font-size: .88rem;
  font-family: inherit; background: var(--c-hover); outline: none;
}
.commentaire-input input:focus { border: 2px solid var(--c-logo-bleu); background: var(--c-carte); }
.commentaire-lock-msg {
  font-size: .82rem; color: var(--c-texte-2); text-align: center;
  padding: 8px; background: var(--c-hover); border-radius: var(--radius);
}

/* ============================================================
   PAGE PROFIL (bandeau FB)
   ============================================================ */
.profil-bandeau {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, var(--c-primaire) 0%, var(--c-logo-bleu) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  object-fit: cover; margin-bottom: -50px;
}
.profil-header {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 0 16px; margin-bottom: 12px; position: relative; z-index: 2;
}
.profil-photo {
  width: 100px; height: 100px; border-radius: 50%;
  border: 4px solid var(--c-carte); object-fit: cover;
  background: var(--c-primaire-clair); box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.profil-info { flex: 1; padding-bottom: 4px; }
.profil-nom { font-size: 1.35rem; font-weight: 700; margin: 0; }
.profil-stats { font-size: .85rem; color: var(--c-texte-2); margin: 2px 0 0; }
.profil-bio { font-size: .9rem; color: var(--c-texte-2); margin: 4px 0 0; }
.profil-actions { display: flex; gap: 8px; padding: 0 16px; margin-bottom: 16px; }

/* ============================================================
   BOUTIQUE PAGE
   ============================================================ */
.boutique-bandeau {
  width: 100%; height: 180px;
  background: linear-gradient(135deg, var(--c-achat-vente) 0%, var(--c-emploi) 100%);
  border-radius: var(--radius-lg); object-fit: cover; margin-bottom: 12px;
}
.boutique-header { display: flex; align-items: center; gap: 14px; padding: 0 16px 12px; }
.boutique-logo {
  width: 64px; height: 64px; border-radius: var(--radius);
  object-fit: cover; background: var(--c-hover);
  border: 3px solid var(--c-carte); box-shadow: var(--shadow-card);
  margin-top: -32px;
}

/* ============================================================
   BADGES
   ============================================================ */
/* Badges V4 — WCAG : texte sombre sur fonds clairs */
.badge {
  display: inline-block; font-size: 0.825rem; font-weight: 500;
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge.offre      { background: var(--c-achat-vente); color: var(--c-primaire); }
.badge.demande    { background: var(--c-emploi); color: var(--c-primaire); }
.badge.location   { background: var(--c-primaire); color: #fff; }
.badge.services   { background: var(--c-services); color: #fff; }
.badge.evenements { background: var(--c-evenements); color: var(--c-primaire); }
.badge.echange    { background: var(--c-services); color: #fff; }
.badge.statut-active   { background: var(--c-emploi); color: var(--c-primaire); }
.badge.statut-pending  { background: var(--c-alerte); color: var(--c-primaire); }
.badge.statut-sold     { background: var(--c-logo-bleu); color: #fff; }
.badge.statut-expired, .badge.statut-archived { background: var(--c-tertiaire); color: #fff; }
.badge.statut-rejected { background: var(--c-erreur); color: #fff; }

/* Filtres par statut — Mes annonces */
.filtre-statut { cursor: pointer; border: 2px solid transparent; opacity: .6; transition: opacity .15s, border-color .15s, transform .1s; }
.filtre-statut:hover { opacity: .85; }
.filtre-statut.filtre-actif { opacity: 1; border-color: var(--c-primaire); transform: scale(1.05); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

/* ============================================================
   BOUTONS
   ============================================================ */
.bouton, button.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; background: var(--c-primaire); color: #fff; border: 0;
  border-radius: var(--radius); font-weight: 500; font-size: 1rem;
  cursor: pointer; font-family: inherit; gap: 6px;
  min-height: 44px; transition: opacity var(--transition-micro), box-shadow var(--transition-micro);
  text-decoration: none;
}
.bouton:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(0,0,0,0.12); text-decoration: none; }
.bouton:focus-visible { outline: 2px solid var(--c-logo-bleu); outline-offset: 2px; }
.bouton:disabled { opacity: .55; cursor: wait; }
.bouton.secondaire { background: var(--c-hover); color: var(--c-texte); border: 1px solid var(--c-bord); }
.bouton.secondaire:hover { background: var(--c-bord); }
.bouton.orange { background: var(--c-accent-orange); }
.bouton.vert   { background: var(--c-accent-vert); }
.bouton.plein  { width: 100%; }
.bouton.petit  { padding: 6px 14px; font-size: .82rem; }
.bouton.rond   { border-radius: 20px; }

.btn-suivre {
  background: rgba(43,102,153,.12); color: var(--c-primaire-clair);
  border: 0; padding: 8px 16px; border-radius: var(--radius);
  font-weight: 600; font-size: .88rem; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.btn-suivre:hover { background: rgba(43,102,153,.22); }
.btn-suivre.suivi { background: var(--c-hover); color: var(--c-texte-2); }
/* IMPORTANT : display:inline-flex ci-dessus neutralise l'attribut hidden du
   navigateur — sans cette règle, « Suivre » et « Modifier l'annonce »
   s'affichaient pour tout le monde (bug signalé le 16/07). */
.btn-suivre[hidden] { display: none !important; }

/* ============================================================
   GRILLE (pages catégories, locations, etc.)
   ============================================================ */
.grille { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grille { grid-template-columns: 1fr 1fr 1fr; } }

.carte {
  background: var(--c-carte);
  border-radius: var(--radius); padding: 12px;
  transition: transform var(--transition-micro), box-shadow var(--transition-micro);
  box-shadow: var(--shadow-card);
  display: block; color: var(--c-texte); text-decoration: none;
  position: relative;
}
.carte:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); text-decoration: none; }
.carte .badge { margin-bottom: 8px; }
.carte h3 { margin: 0 0 4px; font-size: 1rem; }
.carte .prix { font-weight: 700; color: var(--c-primaire); }
.carte .meta { font-size: .85rem; color: var(--c-texte-2); }
.carte-img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; display: block; }
.carte-img-placeholder { width: 100%; height: 140px; border-radius: 6px; margin-bottom: 8px; background: var(--c-fond); display: flex; align-items: center; justify-content: center; }

/* ============================================================
   ÉTIQUETTE PRIX (CONTEXTE/17-C3) — lisible « d'un seul regard »
   ============================================================ */
.etiquette-prix {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--c-primaire); color: #fff;
  font-weight: 700; font-size: 1.02rem; line-height: 1;
  padding: 8px 14px 8px 20px; white-space: nowrap;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  box-shadow: 0 2px 6px rgba(13,25,70,.3);
}
.etiquette-prix::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-fond); flex-shrink: 0;
}
.etiquette-prix.demande { background: var(--c-emploi); color: var(--c-primaire); }
.etiquette-prix.demande::before { background: rgba(13,25,70,.35); }
.etiquette-prix.grande { font-size: 1.35rem; padding: 12px 20px 12px 26px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
/* Posée sur l'image des cartes en grille */
.carte .etiquette-prix-pos {
  position: absolute; top: 118px; left: 4px; z-index: 2;
}
.carte .etiquette-prix-pos .etiquette-prix { font-size: .95rem; padding: 7px 12px 7px 18px; }
/* Carte sans image : étiquette dans le flux */
.carte .etiquette-prix-inline { margin: 4px 0; display: block; }
/* Post du fil */
.post-prix .etiquette-prix { font-size: 1.05rem; }

/* ============================================================
   ACCUEIL NON CONNECTÉ — refonte 12/07/2026 (CONTEXTE/17-C4)
   ============================================================ */
.hero-public {
  background: linear-gradient(130deg, var(--c-primaire) 0%, #16295e 55%, var(--c-logo-bleu) 100%);
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 36px 24px 30px; text-align: center; margin-bottom: 16px;
}
.hero-public::after {
  content: ''; position: absolute; right: -60px; bottom: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,201,209,.35) 0%, rgba(44,201,209,0) 70%);
  pointer-events: none;
}
.hero-public::before {
  content: ''; position: absolute; left: -40px; top: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,102,153,.5) 0%, rgba(43,102,153,0) 70%);
  pointer-events: none;
}
.hero-logo {
  height: 58px; margin-bottom: 16px; position: relative; z-index: 1;
  background: #fff; padding: 9px 16px; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.hero-public h1 {
  font-size: 1.55rem; margin: 0 0 10px; color: #fff;
  position: relative; z-index: 1; line-height: 1.3; font-weight: 700;
}
.hero-public h1 strong { color: var(--c-logo-cyan); }
.hero-public p {
  color: rgba(255,255,255,.85); margin: 0 auto 20px; font-size: .98rem;
  line-height: 1.55; max-width: 440px; position: relative; z-index: 1;
}
.hero-public .bouton { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hero-public .bouton.secondaire { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hero-public .bouton.secondaire:hover { background: rgba(255,255,255,.24); }
.hero-badges {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; margin-bottom: 0; position: relative; z-index: 1;
}
.hero-badges span {
  font-size: .78rem; color: rgba(255,255,255,.75);
  display: inline-flex; align-items: center; gap: 5px;
}
.hero-badges svg { width: 14px; height: 14px; stroke: var(--c-logo-cyan); stroke-width: 2.5; fill: none; }

/* Sous-header catégories style leboncoin (17 — 12/07) */
.categories-bar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px;
  /* pleine largeur viewport : breakout du main max-width + coller au header */
  width: 100vw; margin-left: calc(-50vw + 50%); margin-top: -8px; margin-bottom: 12px;
  background: var(--c-carte);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--c-bord); border-top: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky; top: var(--header-h); z-index: 45;
}
.categories-bar::-webkit-scrollbar { display: none; }
.catbar-link {
  font-size: .88rem; color: var(--c-texte); text-decoration: none;
  padding: 4px 10px; border-radius: 20px;
  transition: background var(--transition-micro), color var(--transition-micro);
  font-weight: 500; flex-shrink: 0;
}
.catbar-link:hover { background: color-mix(in srgb, var(--cat-color, var(--c-primaire)) 12%, transparent); color: var(--cat-color, var(--c-primaire)); }
.catbar-link + .catbar-link::before {
  content: '·'; margin-right: 6px; color: var(--c-texte-2); font-weight: 400;
}

/* Boutons CTA sticky hero — collé au bas du hero (17 — 12/07) */
.hero-public { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-bottom: 0; }
.hero-sticky-wrap {
  position: sticky; top: calc(var(--header-h) + var(--catbar-h)); z-index: 40;
  margin-bottom: 16px;
}
.hero-sticky-cta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(130deg, var(--c-primaire) 0%, #16295e 55%, var(--c-logo-bleu) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.hero-sticky-cta .bouton { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hero-sticky-cta .bouton.secondaire { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hero-sticky-cta .bouton.secondaire:hover { background: rgba(255,255,255,.24); }

.secteurs-grille {
  display: grid; gap: 10px; margin: 0 0 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .secteurs-grille {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
}
@media (min-width: 900px) {
  .secteurs-grille {
    grid-template-columns: 1fr 1fr;
  }
}
/* Blocs secteurs remis en charte (17-C4) */
.secteur-carte {
  background: var(--c-carte); border-radius: var(--radius-lg); padding: 0;
  border: 1px solid var(--c-bord); box-shadow: var(--shadow-card);
  min-width: 0; overflow: hidden;
  transition: transform var(--transition-micro), box-shadow var(--transition-micro);
  position: relative;
}
.secteur-carte:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.secteur-carte::before {
  content: ''; display: block; height: 4px; width: 100%;
  background: var(--secteur-couleur, var(--c-primaire));
}
.secteur-carte .secteur-corps { padding: 14px 16px 12px; }
.secteur-titre { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.secteur-picto { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.secteur-picto-svg {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--secteur-couleur, var(--c-primaire)) 14%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .secteur-picto-svg { background: var(--c-fond); }
}
.secteur-picto-svg svg { width: 22px; height: 22px; stroke: var(--secteur-couleur, var(--c-primaire)); stroke-width: 2; fill: none; }
.secteur-titre strong { display: block; font-size: 1rem; color: var(--c-texte); font-weight: 700; }
.secteur-aide { display: block; font-size: .8rem; color: var(--c-texte-2); margin-top: 1px; }
.cats-scroll {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.cats-scroll.dragging { cursor: grabbing; scroll-behavior: auto; }
.cat-pill {
  display: inline-block; padding: 5px 12px; font-size: .8rem;
  border-radius: 99px; white-space: nowrap;
  background: var(--c-fond); border: 1px solid var(--pill-color, var(--c-bord));
  color: var(--c-texte); transition: background .15s, color .15s; text-decoration: none;
}
.cat-pill:hover { background: var(--pill-color, var(--c-primaire)); color: #fff; text-decoration: none; }
.section-annonces { margin-top: 8px; }
.section-titre { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: var(--c-texte); }

/* Panel filtres fil */
.filtre-panel {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-bord);
}
.filtre-panel[hidden] { display: none !important; }
.filtre-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.filtre-label { font-size: .85rem; font-weight: 500; min-width: 80px; color: var(--c-texte-2); }
.filtre-select {
  flex: 1; padding: 7px 10px; font-size: .88rem; border: 1px solid var(--c-bord);
  border-radius: var(--radius); background: var(--c-carte); font-family: inherit;
}
/* Filtres multi-sélection en puces (15/07) */
.filtre-row { flex-wrap: wrap; align-items: flex-start; }
.filtre-aide { font-weight: 400; font-size: .72rem; color: var(--c-texte-2); }
.filtre-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; }
.filtre-chips-scroll { max-height: 132px; overflow-y: auto; padding-right: 4px; }
.filtre-chip {
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--c-bord);
  background: var(--c-carte); color: var(--c-texte); font-size: .82rem;
  font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.filtre-chip:hover { background: var(--c-hover); }
.filtre-chip.actif {
  background: var(--c-logo-bleu); border-color: var(--c-logo-bleu); color: #fff; font-weight: 600;
}
.filtre-chip[hidden] { display: none !important; }

/* Stats tableau de bord */
.stats-row {
  display: flex; gap: 0; text-align: center;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-bord);
}
.stat-item {
  flex: 1; padding: 10px 4px;
  border-right: 1px solid var(--c-bord);
}
.stat-item:last-child { border-right: none; }
.stat-val { font-size: 1.2rem; font-weight: 700; color: var(--c-logo-bleu); }
.stat-label { font-size: .72rem; color: var(--c-texte-2); margin-top: 2px; }
/* D10 — delta en pastille détachée du compteur (ne se confond plus avec la valeur) */
.stat-delta {
  display: inline-block; vertical-align: super;
  font-size: .62rem; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 99px; margin-left: 4px;
}
.stat-delta.up { color: var(--c-succes); background: rgba(46,204,113,.14); }
.stat-delta.down { color: var(--c-erreur); background: rgba(211,58,58,.12); }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
.form label { font-size: 0.975rem; font-weight: 500; display: block; margin-bottom: 4px; color: var(--c-texte); }
.form .aide { font-weight: 400; color: var(--c-texte-2); font-size: 0.975rem; margin: 2px 0 0; }
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form select, .form textarea {
  width: 100%; padding: 10px 12px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--c-bord); border-radius: var(--radius);
  background: var(--c-carte); color: var(--c-texte); outline: none;
  min-height: 44px; transition: border-color var(--transition-micro);
}
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .form select:focus, .form textarea:focus { border: 2px solid var(--c-logo-bleu); }
/* Checkboxes compactes */
.form input[type="checkbox"] {
  width: 16px; height: 16px; min-height: auto; margin: 0; padding: 0;
  accent-color: var(--c-logo-bleu); cursor: pointer; flex-shrink: 0;
}
/* Ligne de contact avec checkbox + champ (D5) */
.contact-field-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
}
.contact-field-row > input[type="checkbox"] {
  margin-top: 32px; /* aligner avec le champ input */
}
.contact-field-row label {
  font-size: .85rem; margin-bottom: 3px;
}
.contact-field-row .disabled-field input {
  opacity: .5; pointer-events: none;
}
.form .erreur { font-size: 0.975rem; color: var(--c-erreur); margin-top: 2px; }
.form textarea { min-height: 110px; resize: vertical; }
.choix-secteur { display: grid; gap: 8px; }
.choix-secteur label {
  border: 1px solid var(--c-bord); border-radius: var(--radius); padding: 10px 12px;
  background: var(--c-carte); cursor: pointer; font-weight: 400; transition: border-color .15s;
}
.choix-secteur input { width: auto; margin-right: 8px; }
.choix-secteur .aide { margin-left: 24px; }
.choix-secteur label:has(input:checked) { border-color: var(--c-primaire); outline: 2px solid var(--c-primaire); }

/* Tarification multiple */
.prix-ligne {
  display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
}
.prix-ligne input, .prix-ligne select {
  padding: 8px 10px; font-size: .92rem; border: 1px solid var(--c-bord);
  border-radius: var(--radius); font-family: inherit; background: var(--c-carte);
}
.prix-suppr {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: var(--c-erreur); color: #fff; font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prix-suppr[hidden] { display: none !important; }

.baba {
  border: 1.5px dashed var(--c-logo-bleu); border-radius: var(--radius);
  background: rgba(43,102,153,.08); padding: 12px; font-size: .95rem;
}
.baba .signature { font-size: .8rem; color: var(--c-texte-2); margin-top: 6px; }

.msg-ok    { background: #e6f7ef; border: 1px solid var(--c-succes); border-radius: var(--radius); padding: 10px 12px; color: var(--c-primaire); }
.msg-err   { background: #fdeaea; border: 1px solid var(--c-erreur); border-radius: var(--radius); padding: 10px 12px; }
.msg-info  { background: rgba(43,102,153,.08); border: 1px solid var(--c-bord); border-radius: var(--radius); padding: 10px 12px; }

/* ============================================================
   RECHERCHE
   ============================================================ */
.filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.filtres select, .filtres input {
  padding: 9px 10px; font-size: .92rem;
  border: 1px solid var(--c-bord); border-radius: var(--radius);
  background: var(--c-carte); font-family: inherit;
}
.barre-recherche { display: flex; gap: 8px; }
.barre-recherche input {
  flex: 1; padding: 12px; font-size: 1rem;
  border: 1px solid var(--c-bord); border-radius: var(--radius);
  font-family: inherit; outline: none;
}
.barre-recherche input:focus { border: 2px solid var(--c-logo-bleu); }
.barre-recherche button {
  padding: 12px 18px; border: 0; border-radius: var(--radius);
  background: var(--c-primaire); color: #fff;
  font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ============================================================
   PAGE ANNONCE DÉTAIL
   ============================================================ */
.annonce-page h1 { font-size: 1.35rem; margin: 8px 0; }
.annonce-page .prix { font-size: 1.25rem; font-weight: 700; color: var(--c-primaire); }
/* Grille tarifs dans la page annonce */
.prix-grille-detail {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px;
}
.prix-grille-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px; background: var(--c-hover); border-radius: var(--radius);
  border: 1px solid var(--c-bord); min-width: 100px;
}
.prix-grille-label { font-size: .78rem; color: var(--c-texte-2); margin-bottom: 2px; }
.prix-grille-montant { font-size: .95rem; font-weight: 700; color: var(--c-primaire); }

/* Titre + prix sticky au scroll dans la page annonce détail */
.annonce-titre-sticky {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--c-carte); padding: 8px 0 6px; margin: 0 -8px; padding-left: 8px; padding-right: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-micro), box-shadow var(--transition-micro);
  display: flex; align-items: center; gap: 10px;
}
.annonce-titre-sticky .btn-retour { flex-shrink: 0; }
.annonce-titre-sticky .annonce-titre-prix { flex: 1; min-width: 0; }
.annonce-titre-sticky.scrolled {
  border-bottom-color: var(--c-bord);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.annonce-titre-sticky h1 { font-size: 1.35rem; margin: 0; }
.annonce-titre-sticky .etiquette-prix { font-size: .95rem; }

.bouton-contact {
  display: block; text-align: center; margin: 16px 0; padding: 14px;
  background: var(--c-primaire); color: #fff; border-radius: var(--radius);
  font-weight: 600; border: 0; width: 100%; font-size: 1rem; cursor: pointer;
}

/* ============================================================
   UPLOAD IMAGES
   ============================================================ */
.zone-upload {
  border: 2px dashed var(--c-bord); border-radius: var(--radius);
  padding: 24px 12px; text-align: center; cursor: pointer;
  color: var(--c-texte-2); font-size: .9rem;
  transition: border-color .2s, background .2s; position: relative;
}
.zone-upload:hover, .zone-upload.dragover { border-color: var(--c-logo-bleu); background: rgba(43,102,153,.06); }
.zone-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zone-upload .icone-upload { font-size: 2rem; display: block; margin-bottom: 6px; }
.apercu-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.apercu-images .thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--c-bord); }
.apercu-images .thumb-wrap { position: relative; display: inline-block; }
.apercu-images .thumb-suppr {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--c-erreur); color: #fff; border: 0;
  font-size: .7rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   ÉTAPES RÉTRACTABLES — formulaire dépôt (D4 — CONTEXTE/17)
   ============================================================ */
.etape {
  border: 1px solid var(--c-bord); border-radius: var(--radius);
  margin-bottom: 8px; overflow: hidden;
  transition: box-shadow var(--transition-micro);
}
.etape.open { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.etape-header {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 16px; border: 0; background: var(--c-carte);
  cursor: pointer; font-size: .95rem; text-align: left;
  font-family: inherit; color: var(--c-texte);
}
.etape-header:hover { background: var(--c-hover); }
.etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-fond); color: var(--c-texte-2);
  font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.etape.done .etape-num { background: var(--c-succes); color: #fff; }
.etape.open .etape-num { background: var(--c-primaire); color: #fff; }
.etape-titre { flex: 1; font-weight: 600; }
.etape-resume { font-size: .85rem; color: var(--c-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.etape-chevron {
  width: 18px; height: 18px; fill: none; stroke: var(--c-texte-2); stroke-width: 2;
  transition: transform var(--transition-micro); flex-shrink: 0;
}
.etape.open .etape-chevron { transform: rotate(180deg); }
.etape-contenu {
  display: none; padding: 0 16px 16px;
}
.etape-contenu > div { margin-bottom: 12px; }
.etape-contenu > .bouton { margin-top: 8px; }
.etape.open .etape-contenu { display: block; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied {
  text-align: center; color: var(--c-texte-2); font-size: .8rem;
  padding: 24px 12px; border-top: 1px solid var(--c-bord); margin-top: 16px;
}
.pied a { color: var(--c-texte-2); }
.pied a:hover { color: var(--c-primaire); }

/* CTA visiteurs non connectés */
.cta-visiteur {
  background: linear-gradient(135deg, var(--c-primaire) 0%, var(--c-logo-bleu) 100%);
  color: #fff; padding: 32px 16px; text-align: center; margin-top: 16px;
}
.cta-visiteur-inner { max-width: 520px; margin: 0 auto; }
.cta-visiteur h2 { font-size: 1.2rem; margin: 0 0 8px; color: #fff; }
.cta-visiteur p { font-size: .92rem; margin: 0 0 16px; opacity: .9; line-height: 1.4; }
.cta-visiteur-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-visiteur .bouton { font-size: .9rem; }

/* ============================================================
   CENTRES D'INTÉRÊT
   ============================================================ */
.interets-grille { display: flex; flex-wrap: wrap; gap: 8px; }
.interet-chip {
  padding: 8px 16px; border-radius: 20px;
  border: 1px solid var(--c-bord); background: var(--c-carte);
  font-size: .88rem; cursor: pointer; font-family: inherit;
  transition: all .15s; color: var(--c-texte);
}
.interet-chip:hover { border-color: var(--c-logo-bleu); }
.notif-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; cursor: pointer; padding: 6px 0;
}
.notif-toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--c-logo-bleu);
  cursor: pointer;
}
.interet-chip.selected {
  background: rgba(43,102,153,.15); border-color: var(--c-logo-bleu);
  color: var(--c-primaire); font-weight: 600;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
::placeholder { color: var(--c-tertiaire); }
::-webkit-input-placeholder { color: var(--c-tertiaire); }

/* Toast notifications */
.toast-container {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--c-primaire); color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: .88rem; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); pointer-events: auto;
  animation: toastIn .3s ease-out;
  max-width: 90vw; text-align: center;
}
.toast.toast-ok { background: var(--c-succes); }
.toast.toast-err { background: var(--c-erreur); }
.toast.toast-out { animation: toastOut .3s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(16px); } }

@media (max-width: 480px) {
  main { padding: 4px; }
  .categories-bar { margin-top: -4px; }
  .post, .carrousel-section { border-radius: 0; margin-left: -4px; margin-right: -4px; }
  .profil-bandeau { border-radius: 0; }
}

/* ============================================================
   MESSAGERIE / CHAT
   ============================================================ */
.messages-layout {
  display: flex;
  height: calc(100vh - var(--header-h) - 16px);
  height: calc(100dvh - var(--header-h) - 16px); /* mobile : barre d'URL dynamique */
  background: var(--c-carte); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.conv-liste {
  width: 320px; border-right: 1px solid var(--c-bord);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.conv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-bord);
}
.conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--transition-micro);
}
.conv-item:hover { background: var(--c-hover); }
.conv-item.active { background: rgba(43,102,153,.1); }
.conv-item img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.conv-info { flex: 1; min-width: 0; }
.conv-nom { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-apercu { font-size: .82rem; color: var(--c-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-date { font-size: .75rem; color: var(--c-texte-2); flex-shrink: 0; }
.conv-right {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0; position: relative;
}
.btn-pin {
  background: none; border: 0; cursor: pointer; padding: 3px; border-radius: 50%;
  opacity: 0; transition: opacity .15s; line-height: 1;
}
.conv-item:hover .btn-pin, .conv-pinned .btn-pin { opacity: 1; }
.btn-pin:hover { background: var(--c-hover); }
/* D7 — Menu contextuel conversation */
.btn-conv-menu {
  background: none; border: 0; cursor: pointer; padding: 3px 6px; border-radius: 50%;
  opacity: 0; transition: opacity .15s; font-size: 1rem; line-height: 1; color: var(--c-texte-2);
}
.conv-item:hover .btn-conv-menu { opacity: 1; }
.btn-conv-menu:hover { background: var(--c-hover); }
.conv-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 20;
  background: var(--c-carte); border: 1px solid var(--c-bord); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); min-width: 180px; padding: 4px 0;
}
.conv-menu.open { display: block; }
.conv-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0;
  background: none; cursor: pointer; font-size: .85rem; color: var(--c-texte);
}
.conv-menu button:hover { background: var(--c-hover); }
.conv-pin { font-size: .7rem; margin-left: 4px; }
.conv-baba-tag {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: var(--c-logo-cyan); color: var(--c-primaire); padding: 1px 5px;
  border-radius: 4px; margin-right: 4px; vertical-align: middle;
}
.conv-baba { border-left: 3px solid var(--c-logo-cyan); }
.conv-pinned { background: rgba(43,102,153,.04); }

/* E10 — Informations Conekto */
.conv-conekto { border-left: 3px solid var(--c-logo-bleu); }
.conv-conekto-tag {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: var(--c-logo-bleu); color: #fff; padding: 1px 5px;
  border-radius: 4px; margin-right: 4px; vertical-align: middle;
}
.msg-conekto { margin: 12px 0; }

/* Backoffice */
.bo-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--c-carte); border-radius: 8px; border: 1px solid var(--c-bord);
  text-decoration: none; color: inherit; transition: box-shadow .15s;
}
.bo-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.bo-card-icon { flex-shrink: 0; }
.kpi-clickable { transition: transform .15s, box-shadow .15s; }
.kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stat-chart-box {
  background: var(--c-carte); border-radius: 8px; padding: 16px;
  border: 1px solid var(--c-bord);
  position: relative;
}
.stat-chart-box canvas {
  max-height: 180px !important;
}
#pie-grid canvas {
  max-height: 150px !important;
}
@media (max-width: 700px) {
  #charts-grid, #pie-grid { grid-template-columns: 1fr !important; }
}

/* Non-lus (17-B3/B4) */
.conv-item .conv-avatar-wrap { position: relative; flex-shrink: 0; }
.conv-item .conv-avatar-wrap img { display: block; }
.conv-unread-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--c-erreur); color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-carte);
}
.conv-item.conv-unread .conv-nom { font-weight: 700; }
.conv-item.conv-unread .conv-apercu { font-weight: 600; color: var(--c-texte); }
.conv-item.conv-unread .conv-date { font-weight: 700; color: var(--c-logo-bleu); }

.chat-zone {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-bord);
  /* Reste visible en haut même sur conversation longue */
  flex-shrink: 0; position: sticky; top: 0; z-index: 5; background: var(--c-carte);
}
.chat-header .bouton-retour {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--c-texte); padding: 4px;
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.msg { display: flex; flex-direction: column; max-width: 75%; }
.msg-moi { align-self: flex-end; align-items: flex-end; }
.msg-autre { align-self: flex-start; align-items: flex-start; }
.msg-bulle {
  padding: 8px 14px; border-radius: 16px;
  font-size: .92rem; line-height: 1.4; word-break: break-word;
}
.msg-moi .msg-bulle { background: var(--c-logo-bleu); color: #fff; border-bottom-right-radius: 4px; }
.msg-autre .msg-bulle { background: var(--c-hover); color: var(--c-texte); border-bottom-left-radius: 4px; }
.msg-heure { font-size: .72rem; color: var(--c-texte-2); margin-top: 2px; }
/* Carte annonce partagée dans le chat */
.msg-annonce-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--c-fond); border: 1px solid var(--c-bord); text-decoration: none; color: var(--c-texte); transition: background .15s; }
.msg-annonce-card:hover { background: var(--c-hover); }
.msg-annonce-icon { font-size: 1.4rem; flex-shrink: 0; }
.msg-annonce-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-annonce-info strong { font-size: .88rem; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-annonce-info small { font-size: .75rem; color: var(--c-logo-bleu); }
.msg-moi .msg-annonce-card { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); color: #fff; }
.msg-moi .msg-annonce-info small { color: rgba(255,255,255,.7); }
/* Carte annonce partagée globale (groupes, fil, partout) */
.carte-annonce-partagee { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--c-fond); border: 1px solid var(--c-bord); text-decoration: none; color: var(--c-texte); transition: background .15s; margin: 6px 0; }
.carte-annonce-partagee:hover { background: var(--c-hover); }
.carte-annonce-icon { font-size: 1.4rem; flex-shrink: 0; }
.carte-annonce-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--c-bord); }
.carte-annonce-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-annonce-info strong { font-size: .9rem; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-annonce-info small { font-size: .78rem; color: var(--c-logo-bleu); }
.lien-conekto { color: var(--c-logo-bleu); text-decoration: underline; }
/* Listes markdown dans les bulles de chat */
.msg-list { margin: 4px 0; padding-left: 1.4em; font-size: inherit; line-height: 1.5; }
.msg-list li { margin: 2px 0; }
/* Séparateur de date entre jours */
.msg-date-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.msg-date-sep::before, .msg-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--c-bord); }
.msg-date-sep span { font-size: .75rem; font-weight: 600; color: var(--c-texte-2); white-space: nowrap; text-transform: capitalize; }
/* Séparateur de reprise après longue pause */
.msg-gap-sep { display: flex; align-items: center; justify-content: center; margin: 14px 0 8px; }
.msg-gap-sep span { font-size: .7rem; color: var(--c-texte-2); background: var(--c-carte); padding: 2px 10px; border-radius: 10px; border: 1px solid var(--c-bord); }
.msg-baba-label {
  font-size: .7rem; font-weight: 700; color: var(--c-logo-cyan);
  margin-bottom: 2px;
}
.bulle-baba {
  background: linear-gradient(135deg, rgba(44,201,209,.12), rgba(43,102,153,.08)) !important;
  border: 1px solid rgba(44,201,209,.25);
  color: var(--c-texte) !important;
}
/* « écrit… » — trois points en onde fluide (17-A2, revu 16/07) */
.baba-dots { display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px !important; }
.baba-dots i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-logo-bleu); opacity: .3;
  animation: babaWave 1.1s ease-in-out infinite;
  will-change: transform, opacity;
}
.baba-dots i:nth-child(2) { animation-delay: .15s; }
.baba-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes babaWave {
  0%, 55%, 100% { opacity: .3; transform: translateY(0) scale(1); }
  25% { opacity: 1; transform: translateY(-5px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  /* Pulsation d'opacité seule (pas de mouvement) pour rester perceptible */
  .baba-dots i { animation: babaPulse 1.4s ease-in-out infinite !important; transform: none; }
  @keyframes babaPulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
}

/* Boutons d'action Baba (D2 — confirmation avant redirection) */
.baba-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.baba-action-btn {
  padding: 6px 14px; border-radius: 16px; border: 1px solid var(--c-logo-cyan);
  background: rgba(44,201,209,.1); color: var(--c-primaire);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background var(--transition-micro);
}
.baba-action-btn:hover { background: rgba(44,201,209,.22); }

.chat-input {
  display: flex; gap: 6px; padding: 8px 16px;
  border-top: 1px solid var(--c-bord); align-items: flex-end; flex-wrap: wrap;
}
.chat-emojis {
  display: flex; gap: 2px; order: -1; width: 100%; padding-bottom: 4px;
  justify-content: center; align-items: center;
}
.emoji-btn {
  background: none; border: 1px solid var(--c-bord); border-radius: 8px;
  padding: 4px 8px; font-size: 1.1rem; cursor: pointer; line-height: 1;
  transition: background var(--transition-micro);
}
.emoji-btn:hover { background: var(--c-hover); }
.chat-input textarea {
  flex: 1; padding: 8px 12px; border-radius: 16px;
  border: 1px solid var(--c-bord); font-family: inherit;
  font-size: .92rem; outline: none; background: var(--c-fond);
  resize: none; min-height: 36px; max-height: 98px; /* ~5 lignes */
  line-height: 1.4; overflow-y: hidden;
}
.chat-input textarea:focus { border-color: var(--c-logo-bleu); }
.btn-newline {
  display: none; padding: 6px 8px; border: none; background: none;
  font-size: 1.1rem; color: var(--c-texte-2); cursor: pointer; flex-shrink: 0;
  align-self: flex-end; line-height: 1;
}
@media (max-width: 700px) {
  .chat-input textarea { max-height: 58px; /* ~3 lignes */ }
  .btn-newline { display: block; }
}
.btn-send {
  padding: 8px 12px !important; min-width: 36px; flex-shrink: 0;
}

/* Mobile : liste ou chat, pas les deux */
@media (max-width: 700px) {
  .conv-liste { width: 100%; }
  .chat-zone { display: none; }
  .chat-zone.chat-open { display: flex; position: fixed; inset: 0; top: var(--header-h); height: calc(100dvh - var(--header-h)); z-index: 150; background: var(--c-carte); overflow: hidden; }
  .chat-header .bouton-retour { display: block; }
}

/* ============================================================
   LOADER INTERMÉDIAIRE (CONTEXTE/17-C1)
   ============================================================ */
#ck-loader {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--c-fond);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
#ck-loader.ck-open { display: flex; animation: ckFadeIn .2s ease-out; }
@keyframes ckFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ck-loader-inner { width: 100%; max-width: 360px; text-align: center; }
.ck-loader-logo { height: 44px; margin-bottom: 14px; animation: ckBreathe 2.4s ease-in-out infinite; }
@keyframes ckBreathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
.ck-loader-wave { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.ck-loader-wave span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-logo-cyan);
  animation: ckWave 1.4s ease-in-out infinite;
}
.ck-loader-wave span:nth-child(2) { animation-delay: .18s; background: var(--c-logo-bleu); }
.ck-loader-wave span:nth-child(3) { animation-delay: .36s; background: var(--c-primaire); }
@keyframes ckWave { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }
.ck-loader-barwrap {
  height: 6px; border-radius: 99px; background: var(--c-bord);
  overflow: hidden; margin-bottom: 6px;
}
.ck-loader-bar {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-logo-bleu), var(--c-logo-cyan));
  transition: width .25s ease-out;
}
.ck-loader-pct { font-size: .78rem; font-weight: 700; color: var(--c-logo-bleu); margin-bottom: 14px; }
.ck-loader-tech { font-size: .82rem; font-weight: 600; color: var(--c-texte); min-height: 1.2em; }
.ck-loader-desc { font-size: .78rem; color: var(--c-texte-2); margin-top: 4px; min-height: 1.2em; }
.ck-loader-rassure {
  font-size: .92rem; color: var(--c-primaire); line-height: 1.5;
  margin-top: 16px; padding: 12px 14px;
  background: rgba(44,201,209,.1); border: 1px solid rgba(44,201,209,.3);
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .ck-loader-rassure { color: var(--c-texte); }
@media (prefers-reduced-motion: reduce) {
  .ck-loader-logo, .ck-loader-wave span { animation: none; }
}

/* ============================================================
   SWIPE ENTRE SECTIONS (CONTEXTE/17-C2)
   ============================================================ */
html.ck-swiping main { transition: none; }
main.ck-swipe-anim { transition: transform .18s ease-out, opacity .18s ease-out; }
.ck-swipe-hint {
  position: fixed; top: 50%; z-index: 8000; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-primaire); color: #fff; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.ck-swipe-hint svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5; fill: none; }
.ck-swipe-hint.gauche { left: 10px; }
.ck-swipe-hint.droite { right: 10px; }
.ck-swipe-hint.visible { opacity: .95; }

/* ============================================================
   BADGE "NEW" — annonces de moins de 48h
   ============================================================ */
.badge-new {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--c-logo-cyan); color: var(--c-primaire);
  font-weight: 700; font-size: .7rem; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
  letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  pointer-events: none;
}
/* Dans les posts (pas de position:relative sur .post) */
.post .badge-new {
  position: static; display: inline-block;
  margin-left: 6px; vertical-align: middle;
}
/* Badge « Partagée » — annonces non propriétaires dans une boutique (visible admin uniquement) */
.badge-partage {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--c-info); color: #fff;
  font-weight: 600; font-size: .65rem; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .3px;
}

/* ============================================================
   BOUTON RETOUR — vue détail annonce
   ============================================================ */
.btn-retour {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; margin-bottom: 0;
  background: var(--c-hover); color: var(--c-texte);
  border: 1px solid var(--c-bord); border-radius: var(--radius);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  text-decoration: none; font-family: inherit;
  transition: background var(--transition-micro), box-shadow var(--transition-micro);
}
.btn-retour:hover { background: var(--c-bord); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.btn-retour svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   GROUPES — posts + avatars
   ============================================================ */
.gp-post {
  background: var(--c-carte); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.gp-post-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.gp-post-header img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: var(--c-primaire-clair); flex-shrink: 0;
}
.gp-nom { font-weight: 600; font-size: .92rem; }
.gp-time { font-size: .8rem; color: var(--c-texte-2); }
.gp-post-body { font-size: .92rem; line-height: 1.45; white-space: pre-line; margin-bottom: 6px; }
.gp-post-img { width: 100%; border-radius: 6px; margin-top: 6px; }
.gp-post-del {
  background: none; border: 0; cursor: pointer; font-size: 1rem;
  padding: 4px 6px; border-radius: 4px; color: var(--c-texte-2);
}
.gp-post-del:hover { background: var(--c-hover); }

/* ============================================================
   AMIS — cartes + avatars
   ============================================================ */
.page-amis { padding: 0 16px; }
.onglets-amis {
  display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto;
  border-bottom: 1px solid var(--c-bord); padding-bottom: 8px;
}
.onglets-amis .onglet {
  padding: 8px 14px; border: 0; background: none;
  font-family: inherit; font-size: .88rem; font-weight: 500;
  color: var(--c-texte-2); cursor: pointer; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.onglets-amis .onglet.actif { background: var(--c-primaire); color: #fff; }
.onglets-amis .onglet:hover:not(.actif) { background: var(--c-hover); }
.tab-content { display: none; }
.tab-content.actif { display: block; }

.ami-carte {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--c-carte);
  border-radius: var(--radius); margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}
.ami-carte img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--c-primaire-clair); flex-shrink: 0;
}
.ami-info { flex: 1; min-width: 0; }
.ami-nom { font-weight: 600; font-size: .92rem; }
.ami-ville { font-size: .82rem; color: var(--c-texte-2); }
.ami-actions { display: flex; gap: 6px; flex-shrink: 0; }
.compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--c-erreur); color: #fff; font-size: .7rem;
  font-weight: 700; padding: 0 4px; margin-left: 4px;
}
.compteur:empty { display: none; }
.vide { text-align: center; color: var(--c-texte-2); padding: 20px; font-size: .9rem; }

/* ============================================================
   CALENDRIER ÉVÉNEMENTS (F5 + E7/E8/E9 — 17/07/2026)
   ============================================================ */
.evt-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.evt-header h1 { font-size: 1.3rem; margin: 0; flex: 1 1 auto; }
.evt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.evt-actions .bouton svg, .evt-actions button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; }

/* Barre de vues + navigation date */
.evt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; background: var(--c-carte); border-radius: var(--radius); border: 1px solid var(--c-bord); }
.evt-views { display: flex; gap: 0; }
.evt-views button { padding: 6px 14px; font-size: .82rem; border: 1px solid var(--c-bord); background: var(--c-fond); color: var(--c-texte); cursor: pointer; font-family: inherit; transition: all .15s; }
.evt-views button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.evt-views button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.evt-views button:not(:last-child) { border-right: 0; }
.evt-views button.active { background: var(--c-evenements); color: var(--c-primaire); font-weight: 600; border-color: var(--c-evenements); }
.evt-views button:hover:not(.active) { background: var(--c-hover); }

.evt-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.evt-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-bord); background: var(--c-fond); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; padding: 0; }
.evt-nav button:hover { background: var(--c-hover); }
.evt-nav button svg { width: 16px; height: 16px; stroke: var(--c-texte); fill: none; stroke-width: 2; }
.evt-nav-label { font-weight: 600; font-size: .95rem; min-width: 150px; text-align: center; text-transform: capitalize; }
.evt-nav .evt-today { font-size: .78rem; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--c-bord); background: var(--c-fond); cursor: pointer; font-family: inherit; width: auto; height: auto; }
.evt-nav .evt-today:hover { background: var(--c-hover); }

/* VUE MOIS */
.cal-mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--c-bord); border: 1px solid var(--c-bord); border-radius: var(--radius); overflow: hidden; }
.cal-mois-head { padding: 8px 4px; text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--c-texte-2); background: var(--c-fond); }
.cal-jour { min-height: 80px; padding: 4px 6px; background: var(--c-carte); cursor: pointer; transition: background .15s; position: relative; }
.cal-jour:hover { background: var(--c-hover); }
.cal-jour.autre-mois { opacity: .35; }
.cal-jour.aujourdhui { background: rgba(232, 184, 32, .08); }
.cal-jour.aujourdhui .cal-num { background: var(--c-evenements); color: var(--c-primaire); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cal-num { font-size: .82rem; font-weight: 500; margin-bottom: 2px; }
.cal-evt { font-size: .68rem; padding: 2px 4px; border-radius: 3px; background: var(--c-evenements); color: var(--c-primaire); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; cursor: pointer; display: block; line-height: 1.3; }
.cal-evt:hover { opacity: .85; }
.cal-plus { font-size: .65rem; color: var(--c-texte-2); padding: 1px 4px; cursor: pointer; }
.cal-plus:hover { color: var(--c-primaire); }

/* VUE SEMAINE */
.cal-semaine { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 1px; background: var(--c-bord); border: 1px solid var(--c-bord); border-radius: var(--radius); overflow: hidden; }
.cal-sem-head { padding: 8px 4px; text-align: center; font-size: .72rem; background: var(--c-fond); }
.cal-sem-head .cal-sem-day { font-weight: 600; text-transform: uppercase; color: var(--c-texte-2); }
.cal-sem-head .cal-sem-num { font-size: 1.1rem; font-weight: 700; }
.cal-sem-head.aujourdhui .cal-sem-num { background: var(--c-evenements); color: var(--c-primaire); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.cal-sem-heure { padding: 4px 6px; font-size: .7rem; color: var(--c-texte-2); text-align: right; background: var(--c-fond); height: 48px; display: flex; align-items: flex-start; justify-content: flex-end; }
.cal-sem-cell { background: var(--c-carte); height: 48px; position: relative; border-top: 1px solid var(--c-bord); }
.cal-sem-cell:hover { background: var(--c-hover); }

/* VUE JOUR */
.cal-jour-vue { display: flex; flex-direction: column; gap: 0; }
.cal-jour-heure { display: grid; grid-template-columns: 60px 1fr; gap: 1px; min-height: 48px; border-bottom: 1px solid var(--c-bord); }
.cal-jour-heure-label { padding: 4px 8px; font-size: .75rem; color: var(--c-texte-2); text-align: right; }
.cal-jour-heure-content { padding: 4px 8px; background: var(--c-carte); position: relative; min-height: 48px; }
.cal-jour-heure-content:hover { background: var(--c-hover); }

/* VUE LISTE */
.evt-liste { display: flex; flex-direction: column; gap: 12px; }
.evt-carte { display: flex; gap: 14px; padding: 14px; background: var(--c-carte); border-radius: var(--radius); border: 1px solid var(--c-bord); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.evt-carte:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.evt-date-bloc { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 52px; padding-top: 2px; }
.evt-date-mois { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--c-evenements); letter-spacing: .5px; }
.evt-date-jour { font-size: 1.5rem; font-weight: 800; color: var(--c-primaire); line-height: 1; }
.evt-date-dow { font-size: .65rem; color: var(--c-texte-2); text-transform: capitalize; }
.evt-info { flex: 1; min-width: 0; }
.evt-info h3 { margin: 0 0 4px; font-size: .95rem; line-height: 1.3; }
.evt-info .evt-meta { font-size: .82rem; color: var(--c-texte-2); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.evt-info .evt-meta svg { width: 14px; height: 14px; stroke: var(--c-texte-2); fill: none; stroke-width: 2; vertical-align: -2px; }
.evt-info .evt-desc { font-size: .82rem; color: var(--c-texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evt-share-row { display: flex; gap: 6px; margin-top: 8px; }
.evt-share-row button, .evt-share-row a { font-size: .72rem; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--c-bord); background: var(--c-fond); color: var(--c-texte-2); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; transition: background .15s; }
.evt-share-row button:hover, .evt-share-row a:hover { background: var(--c-hover); }
.evt-share-row svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Menu export calendrier */
.cal-export-menu { position: absolute; z-index: 50; background: var(--c-carte); border: 1px solid var(--c-bord); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 4px 0; min-width: 200px; }
.cal-export-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border: none; background: none; font-size: .82rem; color: var(--c-texte); cursor: pointer; font-family: inherit; text-align: left; }
.cal-export-item:hover { background: var(--c-hover); }
.cal-export-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Popup détail événement */
.evt-popup-inner { max-width: 520px; width: 95vw; max-height: 85vh; overflow-y: auto; }
.evt-popup-hero { background: linear-gradient(135deg, var(--c-evenements) 0%, #f0c040 100%); padding: 24px 20px; border-radius: var(--radius) var(--radius) 0 0; }
.evt-popup-hero h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--c-primaire); }
.evt-popup-body { padding: 16px 20px; }
.evt-popup-meta { font-size: .85rem; color: var(--c-texte-2); margin-bottom: 12px; }
.evt-popup-meta div { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.evt-popup-meta svg { width: 16px; height: 16px; stroke: var(--c-evenements); fill: none; stroke-width: 2; flex-shrink: 0; }
.evt-popup-desc { font-size: .9rem; line-height: 1.5; margin-bottom: 16px; white-space: pre-line; }
.evt-popup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.evt-popup-actions .bouton { font-size: .82rem; padding: 8px 16px; }

/* Map placeholder */
.evt-map-placeholder { width: 100%; height: 180px; border-radius: var(--radius); background: var(--c-fond); border: 1px dashed var(--c-bord); display: flex; align-items: center; justify-content: center; color: var(--c-texte-2); font-size: .82rem; margin: 12px 0; }

/* Filtre commune */
.evt-filtre { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.evt-filtre-chip { padding: 4px 12px; font-size: .78rem; border-radius: 16px; border: 1px solid var(--c-bord); background: var(--c-fond); cursor: pointer; font-family: inherit; transition: all .15s; }
.evt-filtre-chip.active { background: var(--c-evenements); color: var(--c-primaire); border-color: var(--c-evenements); font-weight: 600; }
.evt-filtre-chip:hover:not(.active) { background: var(--c-hover); }

/* Section Embed info */
.evt-embed-section { margin-top: 24px; padding: 16px; background: var(--c-carte); border-radius: var(--radius); border: 1px solid var(--c-bord); }
.evt-embed-section h3 { font-size: .95rem; margin: 0 0 8px; }
.evt-embed-code { font-family: monospace; font-size: .75rem; padding: 10px; background: var(--c-fond); border-radius: 6px; border: 1px solid var(--c-bord); word-break: break-all; user-select: all; }

/* Responsive événements */
@media (max-width: 640px) {
  .cal-mois { font-size: .75rem; }
  .cal-jour { min-height: 56px; padding: 2px 3px; }
  .cal-evt { font-size: .6rem; padding: 1px 3px; }
  .evt-toolbar { padding: 8px 10px; }
  .evt-views button { padding: 5px 10px; font-size: .75rem; }
  .evt-nav-label { font-size: .82rem; min-width: 120px; }
  .cal-semaine { display: none; }
  .evt-carte { gap: 10px; padding: 10px; }
}

/* ============================================================
   COLLECTIONS (F1) — chips filtres, drag-and-drop
   ============================================================ */
.coll-chip {
  padding: 4px 12px; font-size: .78rem; border-radius: 16px;
  border: 1px solid var(--c-bord); background: var(--c-fond);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.coll-chip.active {
  background: var(--c-info); color: #fff;
  border-color: var(--c-info); font-weight: 600;
}
.coll-chip:hover:not(.active) { background: var(--c-hover); }

.carte[draggable="true"] { cursor: grab; }
.carte[draggable="true"]:active { cursor: grabbing; }