/* coop-ux.css — Système visuel commun « réseau d'entraide » (2026-11)
   Sobre, institutionnel : vert forêt #1b4332, or #b59449, crème #f6f5f0 */

/* Transitions douces entre les pages (Chrome, Edge, Safari 18.2+ ; ignoré ailleurs) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  --cx-forest: #0d2118; --cx-green: #1b4332; --cx-green-2: #2d6a4f; --cx-gold: #b59449; --cx-silver: #cbd4dc; --cx-silver-dark: #8b99a6; --cx-cream: #f7f5ee;
  --cx-line: #cfd8e0; --cx-ink: #1f2933; --cx-muted: #52606d; --cx-radius: 14px;
}

/* Pastille de messages non lus dans le menu */
.cx-badge { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#c0392b; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.cx-badge[hidden] { display:none; }
@media (max-width: 900px) { .cx-badge { position:static; margin-left:6px; } }
.cpn-lbl--mobile { display:none; }
@media (max-width: 900px) { .cpn-lbl--mobile { display:inline; } }

/* Mise en page */
.cx-page { max-width: 1120px; margin: 0 auto; padding: 6.25rem 1.1rem 4rem; font-family: 'Inter', system-ui, sans-serif; color: var(--cx-ink); }
.cx-grid { display:grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .cx-grid { grid-template-columns: 1fr; } }
.cx-card { background:#fff; border:1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 1.15rem 1.25rem; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.cx-card + .cx-card { margin-top: 1rem; }
.cx-h1 { font-family: 'Playfair Display', Georgia, serif; color: var(--cx-green); font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 .35rem; }
.cx-h2 { font-size: 1.05rem; color: var(--cx-green); margin: 0 0 .75rem; display:flex; align-items:center; gap:.5rem; }
.cx-muted { color: var(--cx-muted); font-size: .88rem; }
.cx-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--cx-gold); }

/* Boutons */
.cx-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 12px; padding: .75rem 1.1rem;
  font-weight: 700; font-size: .95rem; text-decoration:none; border: 1px solid var(--cx-green); background: var(--cx-green); color:#fff; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.cx-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27,67,50,.18); }
.cx-btn--ghost { background:#fff; color: var(--cx-green); }
.cx-btn--gold { background: var(--cx-gold); border-color: var(--cx-gold); }
.cx-btn--sm { padding: .45rem .75rem; font-size: .85rem; border-radius: 10px; }
.cx-btn--big { padding: 1.05rem 1.3rem; font-size: 1.05rem; border-radius: 16px; }
.cx-actions { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
@media (max-width: 520px) { .cx-actions { grid-template-columns: 1fr; } }

/* Avatar & puces */
.cx-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; display:inline-block; }
.cx-avatar--txt { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.cx-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:999px; background:#eef5f0; color: var(--cx-green);
  font-size:.82rem; font-weight:600; margin: 0 .35rem .35rem 0; border:1px solid #d6e7dc; }
.cx-chip--need { background:#fff6e8; color:#8a5a0b; border-color:#f0dcb4; }
.cx-chip--btn { cursor:pointer; background:#fff; }
.cx-chip--btn.is-on { background: var(--cx-green); color:#fff; border-color: var(--cx-green); }

/* Fil d'activité */
.cx-feed-item { display:flex; gap:.85rem; padding: .95rem 0; border-bottom: 1px solid #eeeadd; }
.cx-feed-item:last-child { border-bottom: none; }
.cx-feed-body { flex: 1; min-width: 0; }
.cx-feed-title { font-weight: 700; color: var(--cx-ink); text-decoration:none; }
.cx-feed-title:hover { color: var(--cx-green); }
.cx-feed-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin: .5rem 0; }
.cx-tag { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.05em; padding:.15rem .5rem; border-radius:6px; margin-right:.35rem; }
.cx-tag--offre { background:#e8f5e8; color:#2d7a3a; } .cx-tag--demande { background:#fef3e8; color:#b45309; }
.cx-tag--membre { background:#eef2ff; color:#3949ab; } .cx-tag--merci { background:#fdeef3; color:#b0306a; } .cx-tag--event { background:#f3eefc; color:#6b3fa0; }

/* Progression du profil */
.cx-progress { height: 10px; background: #eeeadd; border-radius: 999px; overflow: hidden; margin: .5rem 0 .75rem; }
.cx-progress > span { display:block; height:100%; background: linear-gradient(90deg, var(--cx-green-2), var(--cx-gold)); border-radius: 999px; }

/* Formulaires */
.cx-input, .cx-textarea, .cx-select { width:100%; padding:.75rem .85rem; border:1px solid #d5d2c4; border-radius: 12px; font-size: 1rem; font-family: inherit; background:#fff; box-sizing: border-box; }
.cx-input:focus, .cx-textarea:focus, .cx-select:focus { outline: 3px solid rgba(45,106,79,.18); border-color: var(--cx-green-2); }
.cx-label { display:block; font-weight:700; margin: .9rem 0 .35rem; color: var(--cx-ink); }
.cx-help { font-size:.82rem; color: var(--cx-muted); margin-top:.3rem; }

/* Toast */
.cx-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120%); background: var(--cx-green); color:#fff;
  padding: .8rem 1.1rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-weight:600; z-index: 9999; transition: transform .25s ease; max-width: 92vw; }
.cx-toast.is-on { transform: translateX(-50%) translateY(0); }

/* Bandeau d'installation de l'application */
.cx-install { display:none; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--cx-line); border-left:4px solid var(--cx-gold);
  border-radius: 12px; padding:.75rem 1rem; margin-bottom: 1rem; }
.cx-install.is-on { display:flex; }
.cx-install p { margin:0; flex:1; font-size:.9rem; }

/* Glossaire « ? » */
.cx-q { display:inline-flex; width:18px; height:18px; border-radius:50%; background:#eeeadd; color: var(--cx-green); font-size:11px; font-weight:800;
  align-items:center; justify-content:center; cursor:help; vertical-align: middle; margin-left: 4px; text-decoration:none; }

/* Annonces : photo */
.card-photo { width:100%; height: 170px; object-fit: cover; border-radius: 10px 10px 0 0; display:block; margin: -1px 0 .6rem; }
.detail-photo { width:100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: .75rem 0 1rem; }