/* ============================================================
   SME - Seine-et-Marne Entreprises | Démo Vestalicom
   Palette issue du logo : bleu marine + orange + vert
   ============================================================ */
:root {
    --primary: #1e3a8a;
    --primary-dark: #152a63;
    --primary-light: #3b5bbf;
    --accent: #f59e0b;
    --accent-dark: #d97f06;
    --green: #84b81a;
    --text-color: #1f2937;
    --muted: #6b7280;
    --bg-color: #ffffff;
    --light-bg: #f5f7fb;
    --border: #e5e7eb;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(30,58,138,.08);
    --shadow-lg: 0 18px 50px rgba(30,58,138,.14);
}

* { box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    margin: 0;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
.text-accent { color: var(--accent) !important; }
.text-green { color: var(--green) !important; }
.bg-primary-soft { background: rgba(30,58,138,.06); }
.bg-light-soft { background: var(--light-bg); }
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }

/* ---------- Navbar ---------- */
.navbar { box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.navbar .nav-link { color: #243b6b; font-weight: 600; padding: .6rem 1rem; border-radius: 8px; transition: .2s; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--primary); background: rgba(30,58,138,.07); }
.navbar-brand span { color: var(--primary-dark); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-primary { background: var(--primary); border-color: var(--primary); font-weight: 700; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); font-weight: 700; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn { border-radius: 50px; padding: .6rem 1.4rem; }
.rounded-pill { border-radius: 50px !important; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    color: #fff;
    overflow: hidden;
}
.hero::after {
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 85% 20%, rgba(245,158,11,.35), transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(132,184,26,.30), transparent 38%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color:#fff; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
.hero .lead { color: rgba(255,255,255,.92); font-size: 1.2rem; }
.hero-badge { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); padding:.4rem 1rem; border-radius:50px; font-weight:600; font-size:.85rem; backdrop-filter: blur(4px); }
.hero-img { border-radius: 20px; box-shadow: var(--shadow-lg); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--border); border-radius: var(--radius); transition: .25s; overflow: hidden; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card-img-top { object-fit: cover; height: 210px; }
.value-icon {
    width: 66px; height: 66px; border-radius: 16px; display:flex; align-items:center; justify-content:center;
    font-size: 1.8rem; color:#fff; margin-bottom: 1rem;
}
.icon-blue { background: linear-gradient(135deg,var(--primary),var(--primary-light)); }
.icon-orange { background: linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.icon-green { background: linear-gradient(135deg,var(--green),#5e8a12); }

/* ---------- Stats ---------- */
.stat-num { font-size: 2.6rem; font-weight: 900; color: var(--primary); line-height:1; }
.stat-label { color: var(--muted); font-weight:600; }

/* ---------- Avatars / Trombinoscope ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--light-bg); }
.avatar-ring { padding: 3px; background: linear-gradient(135deg,var(--accent),var(--green)); border-radius: 50%; display:inline-block; }
.member-card { text-align:center; }
.member-card .role { color: var(--accent-dark); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.badge-soft { background: rgba(30,58,138,.08); color: var(--primary); font-weight:600; }
.badge-soft-orange { background: rgba(245,158,11,.14); color: var(--accent-dark); font-weight:600; }
.badge-soft-green { background: rgba(132,184,26,.16); color:#5e8a12; font-weight:600; }

/* ---------- Section title ---------- */
.eyebrow { color: var(--accent-dark); font-weight: 800; text-transform: uppercase; letter-spacing:.08em; font-size:.8rem; }
.section-title { font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: .6rem; }
.divider-accent { width:64px; height:4px; background: var(--accent); border-radius:4px; margin:.6rem 0 1.4rem; }
.text-center .divider-accent { margin-left:auto; margin-right:auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,.8); }
.site-footer h5 { color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--accent); }
.footer-bottom { background: rgba(0,0,0,.2); font-size:.85rem; }
.social-ic { width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.2s; }
.social-ic:hover { background: var(--accent); color:#fff; }

/* ---------- Espace membre / Admin layout ---------- */
.app-shell { display:flex; min-height:100vh; background: var(--light-bg); }
.app-sidebar { width: 260px; background: var(--primary-dark); color:#fff; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.app-sidebar .brand { padding: 1.1rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.app-sidebar a { display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.78); padding:.7rem 1.3rem; font-weight:600; border-left:3px solid transparent; }
.app-sidebar a:hover, .app-sidebar a.active { color:#fff; background:rgba(255,255,255,.07); border-left-color: var(--accent); }
.app-main { flex:1; min-width:0; }
.app-topbar { background:#fff; border-bottom:1px solid var(--border); padding:.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; }
.app-content { padding: 1.7rem; }
.stat-tile { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.3rem; }
.stat-tile .ic { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff; }
.app-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); }
@media (max-width: 991px){
    .app-sidebar { position:fixed; left:-280px; z-index:1050; transition:.3s; }
    .app-sidebar.open { left:0; }
    .sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; display:none; }
    .sidebar-backdrop.open { display:block; }
}

/* ---------- Misc ---------- */
.feature-list li { margin-bottom:.5rem; }
.timeline { border-left: 3px solid var(--border); padding-left: 1.6rem; }
.timeline-item { position:relative; margin-bottom:1.8rem; }
.timeline-item::before { content:""; position:absolute; left:-1.95rem; top:4px; width:14px;height:14px;border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 0 0 2px var(--accent); }
.post-card { background:#fff;border:1px solid var(--border);border-radius:var(--radius); }
.reaction-btn { border:1px solid var(--border); background:#fff; border-radius:50px; padding:.25rem .8rem; font-size:.85rem; font-weight:600; color:var(--muted); cursor:pointer; }
.reaction-btn:hover, .reaction-btn.active { border-color:var(--accent); color:var(--accent-dark); background:rgba(245,158,11,.08); }
.cal-cell { min-height:96px; border:1px solid var(--border); padding:.4rem; font-size:.8rem; vertical-align:top; }
.cal-event { background:rgba(30,58,138,.1); color:var(--primary); border-radius:6px; padding:.15rem .4rem; margin-bottom:.2rem; font-weight:600; display:block; cursor:pointer; }
.cal-event.evt-orange{background:rgba(245,158,11,.16);color:var(--accent-dark);}
.cal-event.evt-green{background:rgba(132,184,26,.16);color:#5e8a12;}
.pill-tab { cursor:pointer; }
.gdpr-banner { position:fixed; bottom:0; left:0; right:0; background:var(--primary-dark); color:#fff; z-index:1080; }

/* ===== Back-office : boutons compacts et boutons d'action en tableau ===== */
.app-shell .btn-sm { padding: .34rem .9rem; font-size: .8rem; line-height: 1.2; }
.app-shell .btn-light { background: #f4f6fa; border-color: #e6eaf1; color: #334155; }
.app-shell .btn-light:hover { background: #e9edf5; border-color: #d9dfea; color: #0f172a; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; flex-wrap: nowrap; }
.btn-act { width: 32px; height: 32px; padding: 0 !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e6eaf1; background: #fff; color: #475569; font-size: .95rem; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn-act:hover { background: #f1f5ff; color: var(--primary); border-color: #c9d5f2; box-shadow: 0 2px 6px rgba(30,58,138,.08); }
.btn-act.act-primary { color: var(--primary); }
.btn-act.act-danger { color: #be123c; }
.btn-act.act-danger:hover { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.btn-act.act-ghost { visibility: hidden; }
.btn-save { height: 32px; padding: 0 .85rem !important; border-radius: 10px !important; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem;
    background: #fff; border: 1px solid #e6eaf1; color: #94a3b8; transition: all .15s; }
.btn-save.is-dirty { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(30,58,138,.25); }
.btn-save.is-dirty:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }