/* ============================================================
   Senior&Co — Design System
   Charte: Jaune (#FFCE00) · Noir (#101010) · Blanc — responsive & accessible seniors
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Senior&Co · Soft Modern Care ---- */
  --yellow: #FFCE00; --yellow-d: #F0B800; --yellow-l: #FFF1B8; --yellow-soft: #FFF9E1;
  --black: #15140D; --ink: #15140D; --ink2: #2C2A20; --ink3: #57544A;
  --green: #1E8A5A; --green-l: #E7F5ED; --green-m: #9BD9B6;
  --red: #E23A2C; --red-l: #FDEBE9;
  --blue: #2C6FB0; --blue-l: #E8F1FA;
  --surface: #FFFFFF; --bg: #FBFAF6; --bg2: #F4F1E8;
  --border: #ECE7DA; --border2: #E0DACB;

  /* alias de compatibilité (anciennes variables conservées) */
  --cream: var(--bg); --white: var(--surface); --sand: var(--bg2); --sand2: #ECE7DA;
  --terra: var(--ink); --terra-l: var(--yellow-l); --terra-m: var(--ink); --terra-d: #000;
  --sage: var(--green); --sage-l: var(--green-l); --sage-m: var(--green-m);
  --stone: var(--ink3); --stone-l: #F1EDE4; --stone-m: #8A877C;
  --gold: #8A6A00; --gold-l: var(--yellow-soft);

  --r: 20px; --rs: 14px; --rl: 28px; --rpill: 999px;
  --sh-xs: 0 1px 3px rgba(21,20,13,.06);
  --sh: 0 4px 16px rgba(21,20,13,.06), 0 1px 4px rgba(21,20,13,.04);
  --sh2: 0 18px 48px rgba(21,20,13,.13), 0 6px 16px rgba(21,20,13,.06);
  --sh-y: 0 10px 28px rgba(240,184,0,.40);
  --ease: cubic-bezier(.22,.68,.18,1);
  --font-d: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-b: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-b); background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.6; min-height: 100vh; }
img { max-width: 100%; }
a { color: var(--terra); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: var(--font-b); }

/* ── TOPNAV ── */
.topnav { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 28px; display: flex; align-items: center; height: 64px; position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 10px rgba(30,26,20,.06); }
.logo { font-family: var(--font-d); font-size: 24px; font-weight: 600; color: var(--ink); margin-right: 32px; flex-shrink: 0; }
.logo span { color: var(--terra); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-link { padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--stone); transition: .2s; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.nav-link:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--sand2); color: var(--ink); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--terra-m); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; cursor: pointer; letter-spacing: .5px; text-decoration: none; }
.nav-unread { background: var(--red); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: 700; }

/* ── FALL PILL ── */
.fall-pill { background: var(--red-l); border: 1.5px solid #E0AAAA; color: var(--red); font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 20px; display: flex; align-items: center; gap: 7px; cursor: pointer; animation: fpulse 2.5s infinite; text-decoration: none; }
.fall-pill:hover { text-decoration: none; opacity: .9; }
@keyframes fpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,67,58,.25); } 50% { box-shadow: 0 0 0 8px rgba(192,67,58,0); } }
.fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ── LAYOUT ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.page-wrap { max-width: 900px; margin: 0 auto; padding: 36px 24px; }
.page-title { font-family: var(--font-d); font-size: 34px; font-weight: 400; margin-bottom: 6px; }
.page-sub { font-size: 17px; color: var(--stone); margin-bottom: 28px; }

/* ── CARDS ── */
.card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh); overflow: hidden; }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--sand2); display: flex; align-items: center; gap: 10px; }
.card-header h2 { font-size: 18px; font-weight: 600; }
.card-body { padding: 20px 22px; }

/* ── GRID ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sidebar-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 28px 24px; }

/* ── FLASH MESSAGES ── */
.flash { padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 500; margin-bottom: 18px; }
.flash-success { background: var(--sage-l); border: 1px solid var(--sage-m); color: var(--sage); }
.flash-error { background: var(--red-l); border: 1px solid #E0AAAA; color: var(--red); }
.flash-info { background: var(--gold-l); border: 1px solid #D4B060; color: var(--gold); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 12px; padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: .2s; text-decoration: none; }
.btn:hover { text-decoration: none; opacity: .9; transform: translateY(-1px); }
.btn-primary { background: var(--terra); color: #fff; box-shadow: 0 3px 14px rgba(196,113,74,.3); }
.btn-secondary { background: var(--sand2); color: var(--ink); }
.btn-sage { background: var(--sage); color: #fff; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 3px 14px rgba(192,67,58,.3); }
.btn-outline { background: none; border: 1.5px solid var(--border); color: var(--ink); }
.btn-lg { padding: 16px 30px; font-size: 18px; border-radius: 16px; }
.btn-full { width: 100%; }
.btn-display { font-family: var(--font-d); }

/* ── FORMS ── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--stone); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.form-control { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 16px; background: var(--sand); color: var(--ink); transition: .2s; }
.form-control:focus { outline: none; border-color: var(--terra); background: var(--white); }
.form-control.large { font-size: 20px; padding: 16px 20px; border-radius: 14px; }
textarea.form-control { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-icon { position: relative; }
.input-icon input { padding-left: 42px; }
.input-icon .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--stone); padding: 10px 14px; border-bottom: 2px solid var(--sand2); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.adm-table td { padding: 13px 14px; border-bottom: 1px solid var(--sand2); vertical-align: middle; }
.adm-table tr:hover td { background: var(--sand); }

/* ── STATUS BADGES ── */
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
.status-pending { background: var(--gold-l); color: var(--gold); }
.status-confirmed { background: #E8F5E9; color: #2E7D32; }
.status-active { background: var(--sage-l); color: var(--sage); }
.status-done { background: var(--stone-l); color: var(--stone); }
.status-cancelled { background: var(--red-l); color: var(--red); }
.role-senior { background: var(--terra-l); color: var(--terra); }
.role-service_pro { background: var(--sage-l); color: var(--sage); }
.role-medical_pro { background: #E3EDF7; color: #2D5F8A; }
.role-famille { background: var(--gold-l); color: var(--gold); }
.role-admin { background: var(--stone-l); color: var(--stone); }

/* ── SENIOR HOME ── */
.senior-hero { text-align: center; padding: 44px 24px 36px; max-width: 760px; margin: 0 auto; }
.senior-greeting { font-size: 14px; font-weight: 600; color: var(--stone); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.senior-hero h1 { font-family: var(--font-d); font-size: 42px; font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
.senior-hero .date { font-size: 18px; color: var(--stone); margin-bottom: 24px; }
.ai-bubble { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 20px 24px; display: inline-flex; align-items: center; gap: 14px; box-shadow: var(--sh); cursor: pointer; transition: .25s; max-width: 540px; text-align: left; margin-bottom: 0; }
.ai-bubble:hover { box-shadow: var(--sh2); transform: translateY(-2px); text-decoration: none; }
.ai-orb { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--sage), var(--terra)); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; animation: orb 3s ease-in-out infinite; }
@keyframes orb { 0%,100%{box-shadow:0 0 0 0 rgba(74,120,86,.3)}50%{box-shadow:0 0 0 10px rgba(74,120,86,0)} }
.ai-label { font-size: 11px; font-weight: 600; color: var(--sage); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.ai-msg-text { font-size: 16px; color: var(--ink2); line-height: 1.5; }

/* ── BIG 4 BUTTONS ── */
.big4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 28px auto 14px; }
.big-btn { background: var(--white); border: 2px solid var(--border); border-radius: 22px; padding: 30px 20px; text-align: center; cursor: pointer; transition: .3s; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); position: relative; }
.big-btn:hover { border-color: var(--terra-m); box-shadow: var(--sh2); transform: translateY(-4px); text-decoration: none; color: var(--ink); }
.big-btn.featured { border-color: var(--terra-m); background: linear-gradient(160deg, var(--terra-l), var(--white)); }
.big-btn-ico { font-size: 50px; line-height: 1; }
.big-btn-label { font-family: var(--font-d); font-size: 22px; font-weight: 500; }
.big-btn-sub { font-size: 14px; color: var(--stone); }
.big-btn-badge { position: absolute; top: 14px; right: 14px; background: var(--red); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.urgence-btn { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--red); color: #fff; border: none; border-radius: 22px; padding: 20px; width: 100%; max-width: 760px; margin: 0 auto; cursor: pointer; transition: .2s; box-shadow: 0 4px 20px rgba(192,67,58,.4); text-decoration: none; }
.urgence-btn:hover { opacity: .9; transform: scale(1.01); text-decoration: none; color: #fff; }
.urgence-btn .ico { font-size: 34px; }
.urgence-btn .txt { font-family: var(--font-d); font-size: 26px; font-weight: 500; }
.urgence-wrap { max-width: 760px; margin: 14px auto 0; }

/* ── BOOKING FLOW ── */
.flow-step { max-width: 780px; margin: 0 auto; padding: 32px 24px; }
.step-back { display: inline-flex; align-items: center; gap: 6px; color: var(--stone); cursor: pointer; font-size: 15px; margin-bottom: 24px; background: none; border: none; padding: 0; transition: .2s; }
.step-back:hover { color: var(--ink); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.svc-tile { background: var(--white); border: 2px solid var(--border); border-radius: 16px; padding: 20px 12px; text-align: center; cursor: pointer; transition: .25s; }
.svc-tile:hover, .svc-tile.sel { border-color: var(--terra); background: var(--terra-l); }
.svc-tile-ico { font-size: 38px; display: block; margin-bottom: 6px; }
.svc-tile-name { font-size: 14px; font-weight: 600; color: var(--ink2); }
.svc-tile-price { font-size: 12px; color: var(--stone); margin-top: 4px; }
.picker-block { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; margin-bottom: 16px; }
.picker-label { font-size: 12px; font-weight: 600; color: var(--stone); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.date-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.date-tile { background: var(--sand); border: 2px solid transparent; border-radius: 12px; padding: 10px 14px; text-align: center; cursor: pointer; transition: .2s; flex-shrink: 0; min-width: 66px; }
.date-tile:hover, .date-tile.sel { border-color: var(--terra); background: var(--terra-l); }
.date-day { font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: .05em; }
.date-num { font-size: 22px; font-weight: 600; margin: 2px 0; }
.date-month { font-size: 11px; color: var(--stone); }
.time-row { display: flex; flex-wrap: wrap; gap: 8px; }
.time-chip { background: var(--sand); border: 2px solid transparent; border-radius: 9px; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; transition: .2s; }
.time-chip:hover, .time-chip.sel { border-color: var(--terra); background: var(--terra-l); color: var(--terra); }
.dur-row { display: flex; gap: 8px; }
.dur-chip { background: var(--sand); border: 2px solid transparent; border-radius: 9px; padding: 8px 18px; font-size: 14px; cursor: pointer; transition: .2s; }
.dur-chip:hover, .dur-chip.sel { border-color: var(--sage); background: var(--sage-l); color: var(--sage); }
.pro-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pro-card { background: var(--white); border: 2px solid var(--border); border-radius: 18px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; cursor: pointer; transition: .25s; }
.pro-card:hover, .pro-card.sel { border-color: var(--terra); background: var(--terra-l); }
.pro-ava { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pro-info { flex: 1; }
.pro-name { font-size: 17px; font-weight: 600; }
.pro-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--stone); margin-top: 4px; }
.pro-dist { background: var(--sage-l); color: var(--sage); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pro-verified { background: var(--gold-l); color: var(--gold); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pro-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pro-tag { background: var(--sand); color: var(--ink3); font-size: 12px; padding: 2px 8px; border-radius: 5px; }
.pro-price { text-align: right; flex-shrink: 0; }
.pro-price-val { font-family: var(--font-d); font-size: 20px; color: var(--terra); }
.pro-price-unit { font-size: 12px; color: var(--stone); }
.pro-avail { font-size: 12px; color: var(--sage); font-weight: 600; margin-top: 4px; }
.confirm-box { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 26px; margin-bottom: 18px; }
.confirm-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--sand2); font-size: 15px; gap: 12px; }
.confirm-row:last-child { border-bottom: none; }
.confirm-label { color: var(--stone); font-weight: 500; flex-shrink: 0; }
.confirm-val { font-weight: 600; text-align: right; }
.confirm-total { font-family: var(--font-d); font-size: 26px; color: var(--terra); }
.privacy-notice { background: var(--sage-l); border-radius: 12px; padding: 14px; margin-bottom: 16px; font-size: 14px; color: var(--stone); line-height: 1.6; }

/* ── BOOKING CARDS ── */
.booking-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--sh); }
.booking-card-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--sand2); }
.booking-svc-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--terra-l); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.booking-info { flex: 1; }
.booking-svc-name { font-size: 16px; font-weight: 600; }
.booking-who { font-size: 14px; color: var(--stone); margin-top: 2px; }
.booking-body { padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 16px; }
.booking-detail { font-size: 14px; color: var(--stone); }
.booking-detail strong { color: var(--ink); font-weight: 600; }
.booking-actions { padding: 12px 20px; background: var(--sand); display: flex; gap: 8px; flex-wrap: wrap; }

/* ── MESSAGES ── */
.msgs-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: calc(100vh - 64px); max-height: 700px; }
.conv-sidebar { border-right: 1px solid var(--border); background: var(--white); display: flex; flex-direction: column; overflow: hidden; }
.conv-header { padding: 16px; border-bottom: 1px solid var(--sand2); }
.conv-search { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 14px; background: var(--sand); }
.conv-list { overflow-y: auto; flex: 1; }
.conv-item { display: flex; gap: 10px; padding: 12px 14px; cursor: pointer; transition: .2s; border-bottom: 1px solid var(--sand2); text-decoration: none; color: var(--ink); }
.conv-item:hover, .conv-item.active { background: var(--terra-l); text-decoration: none; }
.conv-ava { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; }
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-size: 14px; font-weight: 600; }
.conv-preview { font-size: 13px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-time { font-size: 11px; color: var(--stone-m); }
.conv-unread { background: var(--terra); color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.chat-area { display: flex; flex-direction: column; background: var(--white); overflow: hidden; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--sand2); display: flex; align-items: center; gap: 12px; background: var(--white); }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--sand); }
.msg-bubble { max-width: 70%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.msg-out { align-self: flex-end; background: var(--terra); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg-in { align-self: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; }
.msg-time { font-size: 11px; opacity: .6; margin-top: 3px; display: block; }
.chat-input-row { padding: 12px 14px; border-top: 1px solid var(--sand2); display: flex; gap: 8px; background: var(--white); }
.chat-input { flex: 1; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 15px; background: var(--sand); }
.chat-input:focus { outline: none; border-color: var(--terra); }
.chat-send { background: var(--terra); color: #fff; border: none; border-radius: 12px; padding: 10px 18px; font-size: 18px; cursor: pointer; transition: .2s; }

/* ── ADMIN ── */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 20px; text-align: center; }
.kpi-val { font-family: var(--font-d); font-size: 32px; font-weight: 500; }
.kpi-lbl { font-size: 13px; color: var(--stone); margin-top: 4px; }
.kpi.terra .kpi-val { color: var(--terra); }
.kpi.sage .kpi-val { color: var(--sage); }
.kpi.gold .kpi-val { color: var(--gold); }
.toggle-module { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--white); border-radius: 18px; border: 2px solid var(--border); margin-bottom: 16px; }
.toggle-module.active { border-color: var(--sage-m); background: var(--sage-l); }
.toggle-module.inactive { border-color: #E0AAAA; background: var(--red-l); }
.toggle-label h3 { font-size: 17px; font-weight: 600; }
.toggle-label p { font-size: 14px; color: var(--stone); margin-top: 3px; }
.toggle-switch { position: relative; width: 56px; height: 28px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 28px; cursor: pointer; transition: .3s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 4px; bottom: 4px; background: #fff; border-radius: 50%; transition: .3s; }
input:checked + .toggle-slider { background: var(--sage); }
input:checked + .toggle-slider::before { transform: translateX(28px); }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-tab { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: .2s; color: var(--stone); text-decoration: none; }
.admin-tab:hover { text-decoration: none; background: var(--sand); color: var(--ink); }
.admin-tab.active { background: var(--terra-l); border-color: var(--terra-m); color: var(--terra); font-weight: 600; }

/* ── SECURITY LOG ── */
.sec-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.log-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--sand); font-size: 13px; }
.log-ico { font-size: 16px; width: 26px; text-align: center; flex-shrink: 0; }
.log-txt { flex: 1; color: var(--ink3); }
.log-time { font-size: 11px; color: var(--stone-m); white-space: nowrap; }
.log-lvl { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.ll-ok { background: var(--sage-l); color: var(--sage); }
.ll-info { background: var(--gold-l); color: var(--gold); }
.ll-warn { background: var(--terra-l); color: var(--terra); }
.ll-alert { background: var(--red-l); color: var(--red); }

/* ── AUTH ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--cream); }
.auth-box { background: var(--white); border-radius: 24px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--sh2); }
.auth-logo { font-family: var(--font-d); font-size: 32px; font-weight: 600; text-align: center; margin-bottom: 6px; }
.auth-logo span { color: var(--terra); }
.auth-tagline { text-align: center; font-size: 15px; color: var(--stone); margin-bottom: 30px; }
.auth-sep { text-align: center; font-size: 13px; color: var(--stone-m); margin: 16px 0; }

/* ── PRO SIDEBAR ── */
.pro-profile-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; text-align: center; }
.pro-profile-ava { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; }
.pro-profile-name { font-family: var(--font-d); font-size: 20px; font-weight: 400; }
.pro-profile-role { font-size: 14px; color: var(--stone); margin-top: 3px; }
.pro-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.pbadge { font-size: 12px; padding: 3px 9px; border-radius: 7px; font-weight: 600; }
.pb-green { background: var(--sage-l); color: var(--sage); }
.pb-gold { background: var(--gold-l); color: var(--gold); }
.privacy-box { background: var(--stone-l); border-left: 3px solid var(--stone-m); border-radius: 0 12px 12px 0; padding: 12px 14px; font-size: 13px; color: var(--stone); line-height: 1.6; }

/* ── MISSION CARD ── */
.mission-card { background: var(--sand); border-radius: 14px; padding: 16px; margin-bottom: 12px; border: 1.5px solid var(--border); transition: .2s; }
.mission-card:hover { border-color: var(--terra-m); }
.mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mc-svc-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--terra-l); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.mc-info { flex: 1; }
.mc-title { font-size: 15px; font-weight: 700; }
.mc-sub { font-size: 13px; color: var(--stone); margin-top: 2px; }
.mc-body { font-size: 14px; color: var(--ink3); line-height: 1.5; margin-bottom: 10px; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── FAMILY ── */
.fam-senior-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.fsc-header { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.fsc-ava { width: 54px; height: 54px; border-radius: 50%; background: var(--terra-m); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0; }
.fsc-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fsc-vital { background: var(--sand); border-radius: 10px; padding: 10px; text-align: center; }
.fsc-vital-val { font-size: 22px; font-weight: 700; }
.fsc-vital-lbl { font-size: 11px; color: var(--stone); margin-top: 2px; }
.alert-item { display: flex; gap: 12px; padding: 14px; border-radius: 12px; margin-bottom: 10px; }
.alert-item.high { background: var(--red-l); border-left: 4px solid var(--red); }
.alert-item.med { background: var(--gold-l); border-left: 4px solid var(--gold); }
.alert-item.low { background: var(--sage-l); border-left: 4px solid var(--sage); }
.al-ico { font-size: 22px; flex-shrink: 0; }
.al-title { font-size: 15px; font-weight: 700; }
.al-msg { font-size: 14px; color: var(--stone); margin-top: 2px; line-height: 1.5; }
.al-time { font-size: 12px; color: var(--stone-m); margin-top: 4px; }

/* ── BAR CHART ── */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bc-row { display: flex; align-items: center; gap: 10px; }
.bc-lbl { font-size: 13px; font-weight: 500; width: 110px; flex-shrink: 0; color: var(--ink3); }
.bc-wrap { flex: 1; background: var(--sand2); border-radius: 8px; height: 22px; overflow: hidden; }
.bc-bar { height: 100%; border-radius: 8px; display: flex; align-items: center; padding-left: 8px; transition: width .6s ease; }
.bc-txt { font-size: 12px; font-weight: 700; color: #fff; }
.bc-val { font-size: 13px; font-weight: 700; width: 50px; text-align: right; color: var(--ink3); }

/* ── FOOTER ── */
.footer { background: var(--ink); color: var(--stone-l); padding: 20px 28px; text-align: center; font-size: 13px; margin-top: 48px; }
.footer a { color: var(--stone-m); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .topnav { padding: 0 16px; }
  .big4 { grid-template-columns: 1fr 1fr; }
  .senior-hero h1 { font-size: 30px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sidebar-layout { grid-template-columns: 1fr; }
  .msgs-layout { grid-template-columns: 1fr; height: auto; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .fsc-vitals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .big4 { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .senior-hero h1 { font-size: 26px; }
  .urgence-btn .txt { font-size: 20px; }
}

/* ============================================================
   Senior&Co v3.0 — Extensions messagerie, voix, pro
   ============================================================ */

/* ── MESSAGING COMPLET ── */
.msg-layout{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 120px);max-height:700px;background:var(--white);border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden}
.msg-sidebar{border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.msg-sidebar-header{padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.msg-sidebar-title{font-size:16px;font-weight:700;margin-bottom:10px}
.msg-search-wrap{position:relative}
.msg-search-wrap input{width:100%;border:1.5px solid var(--border);border-radius:22px;padding:8px 14px 8px 36px;font-size:14px;background:var(--sand);transition:.2s}
.msg-search-wrap input:focus{outline:none;border-color:var(--terra);background:var(--white)}
.msg-search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.conv-list{flex:1;overflow-y:auto}
.conv-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--sand2);transition:.18s}
.conv-item:hover{background:var(--sand)}
.conv-item.active{background:var(--terra-l)}
.conv-ava{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-preview{font-size:13px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.conv-time{font-size:11px;color:var(--stone-m)}
.conv-unread{background:var(--terra);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}
.msg-area{display:flex;flex-direction:column;overflow:hidden}
.msg-area-header{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--white)}
.msg-area-name{font-size:16px;font-weight:700;flex:1}
.msg-area-role{font-size:12px;color:var(--stone);margin-top:1px}
.msg-list{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:3px;background:var(--cream)}
.msg-bubble-wrap{display:flex;flex-direction:column;max-width:70%;gap:2px;margin-bottom:6px}
.msg-bubble-wrap.out{align-self:flex-end;align-items:flex-end}
.msg-bubble-wrap.in{align-self:flex-start;align-items:flex-start}
.msg-bubble{padding:10px 15px;border-radius:18px;font-size:15px;line-height:1.5;word-break:break-word}
.msg-bubble.out{background:var(--terra);color:#fff;border-bottom-right-radius:4px}
.msg-bubble.in{background:var(--white);color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg-bubble.voice{background:var(--gold-l);border:1px solid rgba(184,146,42,.3);color:var(--ink)}
.msg-time{font-size:11px;color:var(--stone-m);padding:0 4px}
.msg-date-sep{text-align:center;font-size:12px;color:var(--stone-m);margin:12px 0;position:relative}
.msg-date-sep::before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--border)}
.msg-date-sep span{background:var(--cream);padding:0 10px;position:relative}
.msg-input-area{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;background:var(--white);flex-shrink:0}
.msg-input{flex:1;border:1.5px solid var(--border);border-radius:22px;padding:10px 16px;font-size:15px;background:var(--sand);resize:none;max-height:100px;min-height:42px;overflow-y:auto;transition:.2s;line-height:1.4}
.msg-input:focus{outline:none;border-color:var(--terra);background:var(--white)}
.msg-send-btn{width:44px;height:44px;border-radius:50%;background:var(--terra);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:.2s;flex-shrink:0}
.msg-send-btn:hover{background:var(--terra-d)}
.msg-voice-btn{width:44px;height:44px;border-radius:50%;background:var(--sand2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.2s;flex-shrink:0}
.msg-voice-btn.recording{background:var(--red);animation:vpulse 1s infinite}
@keyframes vpulse{0%,100%{box-shadow:0 0 0 0 rgba(192,67,58,.4)}50%{box-shadow:0 0 0 10px rgba(192,67,58,0)}}
.msg-empty{text-align:center;padding:60px 24px;color:var(--stone)}
.msg-empty-ico{font-size:52px;margin-bottom:14px}
.new-msg-btn{width:100%;padding:12px 16px;display:flex;align-items:center;gap:10px;background:var(--terra-l);border:none;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px;font-weight:600;color:var(--terra-d);transition:.2s;font-family:var(--font-b)}
.new-msg-btn:hover{background:var(--terra);color:#fff}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh2);z-index:100;max-height:240px;overflow-y:auto;margin-top:4px}
.search-result-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;transition:.2s;border-bottom:1px solid var(--sand2)}
.search-result-item:hover{background:var(--sand)}
.search-result-ava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}

/* ── VOICE OVERLAY ── */
.voice-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(30,26,20,.65);z-index:500;align-items:center;justify-content:center}
.voice-overlay.open{display:flex}
.voice-modal{background:var(--white);border-radius:28px;padding:44px 52px;text-align:center;max-width:460px;width:90%;box-shadow:0 16px 60px rgba(0,0,0,.2)}
.voice-orb{width:110px;height:110px;border-radius:50%;background:var(--terra);margin:0 auto 22px;display:flex;align-items:center;justify-content:center;animation:orbpulse 1.2s ease-in-out infinite}
@keyframes orbpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,113,74,.4)}50%{transform:scale(1.06);box-shadow:0 0 0 18px rgba(196,113,74,0)}}
.voice-transcript{min-height:56px;font-size:17px;color:var(--ink);margin:18px 0;font-style:italic;background:var(--sand);border-radius:14px;padding:14px 18px;line-height:1.5}
.voice-cmds-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:16px;text-align:left}
.voice-cmd{background:var(--sand);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--stone);border-left:3px solid var(--terra)}

/* ── AI BOX ── */
.ai-box{background:linear-gradient(135deg,var(--terra-l),var(--gold-l));border:1.5px solid rgba(196,113,74,.3);border-radius:18px;padding:20px;margin-bottom:20px}
.ai-box-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ai-box-orb{width:38px;height:38px;border-radius:50%;background:var(--terra);display:flex;align-items:center;justify-content:center;animation:orb 3s ease-in-out infinite}
.ai-box-msg{font-size:15px;line-height:1.6;color:var(--ink2)}

/* ── PRESENCE ── */
.checkin-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkin-method{background:var(--white);border:2px solid var(--border);border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:.25s}
.checkin-method:hover{border-color:var(--sage);background:var(--sage-l)}
.checkin-method-ico{font-size:36px;margin-bottom:8px}
.checkin-method-lbl{font-size:14px;font-weight:600}

/* ── ACTIVITES ── */
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.act-tile{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:22px 14px;text-align:center;cursor:pointer;transition:.2s;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px}
.act-tile:hover{border-color:var(--terra);box-shadow:var(--sh2);transform:translateY(-2px);text-decoration:none;color:var(--ink)}
.act-ico{font-size:40px;line-height:1}
.act-lbl{font-size:15px;font-weight:600}
.act-sub{font-size:12px;color:var(--stone)}

/* ── TOGGLE ── */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--sand2);gap:16px}
.toggle-row:last-child{border-bottom:none}
.toggle-wrap{position:relative;width:46px;height:26px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--border);border-radius:13px;cursor:pointer;transition:.3s}
.toggle-wrap input:checked+.toggle-track{background:var(--sage)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.3s;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-wrap input:checked~.toggle-thumb{left:23px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .sidebar-layout{grid-template-columns:1fr}
  .msg-layout{grid-template-columns:1fr}
  .msg-sidebar{max-height:220px;border-right:none;border-bottom:1px solid var(--border)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media(max-width:600px){
  .topnav{padding:0 12px;gap:8px}
  .nav-links{display:none}
}



/* ============================================================
   SENIOR&CO · COUCHE MODERNE 2025  (soft, arrondi, profondeur douce)
   Remplace le rendu néo-brutaliste — garde tous les noms de classes
   ============================================================ */

/* ---------- Base & typographie ---------- */
body { font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::selection, ::selection { background: var(--yellow); color: #15140D; }
h1,h2,h3,h4 { font-family: var(--font-d); color: var(--ink); letter-spacing: -.01em; line-height: 1.12; }
a { color: var(--ink); transition: color .18s var(--ease); }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }

/* Focus accessible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }

/* Logo — « &Co » surligné jaune doux */
.logo, .auth-logo, .snav-logo { color: var(--ink); font-family: var(--font-d); font-weight: 600; }
.logo span, .auth-logo span, .snav-logo span, .snc-footer .logo span {
  background: var(--yellow); color: #15140D; padding: 0 .14em; border-radius: 6px; }

/* ---------- Navigation ---------- */
.topnav { background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(21,20,13,.02); height: 68px; }
.nav-link { border-radius: var(--rpill); font-size: 15px; color: var(--ink3); transition: all .18s var(--ease); }
.nav-link:hover { background: var(--bg2); color: var(--ink); }
.nav-link.active { background: var(--yellow-soft); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--yellow-l); }
.nav-ava { background: linear-gradient(140deg, var(--ink), #3a382c); box-shadow: var(--sh-xs);
  border-radius: 50%; transition: transform .2s var(--ease); }
.nav-ava:hover { transform: scale(1.05); }

/* ---------- Conteneurs & titres ---------- */
.page-title { font-weight: 600; letter-spacing: -.02em; }
.page-sub { color: var(--ink3); }

/* ---------- Cartes ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.card:hover { box-shadow: var(--sh2); }
.card-header { border-bottom: 1px solid var(--border); }
.card-header h2 { font-family: var(--font-d); font-weight: 600; }

/* ---------- Boutons ---------- */
.btn { border-radius: var(--rs); font-weight: 600; letter-spacing: .005em;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); border: none; }
.btn:hover { transform: translateY(-2px); opacity: 1; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--yellow); color: #15140D; box-shadow: var(--sh-y); }
.btn-primary:hover { background: var(--yellow-d); color: #15140D; box-shadow: 0 14px 34px rgba(240,184,0,.5); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border2); box-shadow: var(--sh-xs); }
.btn-secondary:hover { background: var(--bg2); }
.btn-sage, .btn-green { background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(30,138,90,.32); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(226,58,44,.32); }
.btn-outline { background: transparent; border: 1.5px solid var(--border2); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--bg2); }
.btn-lg { border-radius: 16px; }
.btn-display { font-family: var(--font-b); }

/* ---------- Formulaires ---------- */
.form-control { border: 1.5px solid var(--border2); background: var(--surface); border-radius: 13px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.form-control:focus { border-color: var(--yellow-d); background: #fff;
  box-shadow: 0 0 0 4px var(--yellow-soft); }
.form-label { color: var(--ink3); letter-spacing: .04em; }

/* ---------- Tableaux admin ---------- */
.adm-table th { color: var(--ink3); border-bottom: 1px solid var(--border2); }
.adm-table td { border-bottom: 1px solid var(--border); }
.adm-table tr:hover td { background: var(--yellow-soft); }

/* ---------- Badges & statuts ---------- */
.badge { border-radius: var(--rpill); padding: 4px 12px; }
.flash { border-radius: 14px; box-shadow: var(--sh-xs); border: 1px solid transparent; }
.flash-success { background: var(--green-l); border-color: var(--green-m); color: #146544; }
.flash-error { background: var(--red-l); border-color: #F1B5B0; color: #B02418; }
.flash-info { background: var(--yellow-soft); border-color: var(--yellow-l); color: #7a5d00; }
.status-pending, .badge.status-pending { background: var(--yellow-soft); color: #7a5d00; }
.status-confirmed { background: var(--green-l); color: #146544; }
.status-active { background: var(--green-l); color: #146544; }
.status-cancelled { background: var(--red-l); color: #B02418; }

/* ---------- Hero senior (tableau de bord) ---------- */
.senior-hero { padding-top: 52px; }
.senior-hero h1 { font-weight: 600; letter-spacing: -.02em; }
.ai-bubble { border: 1px solid var(--border); border-radius: var(--rl); box-shadow: var(--sh);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.ai-bubble:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.ai-orb { background: conic-gradient(from 140deg, var(--yellow), #FFE27A, var(--green-m), var(--yellow));
  box-shadow: 0 6px 18px rgba(240,184,0,.4); }

/* ---------- Grands boutons d'action (seniors) ---------- */
.big-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl);
  box-shadow: var(--sh); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.big-btn:hover { transform: translateY(-5px); box-shadow: var(--sh2); border-color: var(--yellow-l); }
.big-btn .ico, .big-btn .big-ico { transition: transform .22s var(--ease); }
.big-btn:hover .ico, .big-btn:hover .big-ico { transform: scale(1.08); }
.big-btn.featured { border-color: var(--yellow-l); background: linear-gradient(165deg, var(--yellow-soft), #fff 70%); }
.big-btn-badge { background: var(--ink); color: var(--yellow); border-radius: var(--rpill); }

/* ---------- Messagerie ---------- */
.msg-out, .msg-bubble.out { background: linear-gradient(135deg, #232118, var(--ink)); color: #fff; }
.conv-unread, .chat-send, .msg-send-btn { background: var(--ink); border-radius: 50%; }
.msg-send-btn:hover { background: #000; }

/* ---------- États sélectionnés ---------- */
.svc-tile, .date-tile, .time-chip, .pro-card { border-radius: 16px; transition: all .18s var(--ease); }
.svc-tile:hover, .svc-tile.sel, .date-tile:hover, .date-tile.sel,
.time-chip:hover, .time-chip.sel, .pro-card:hover, .pro-card.sel {
  border-color: var(--yellow-d); background: var(--yellow-soft); color: var(--ink);
  box-shadow: 0 0 0 3px var(--yellow-l); }

/* ---------- SOS (rouge conservé) ---------- */
.urgence-btn, .fall-pill { box-shadow: 0 8px 22px rgba(226,58,44,.28); }

/* ---------- Pied de page ---------- */
.footer { background: #15140D; color: #cdcabf; }
.footer a { color: var(--yellow); }

/* ---------- Utilitaires images ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--bg2)
  linear-gradient(135deg, var(--yellow-soft), var(--bg2)); }
.media img, .img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tint::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 35%, rgba(21,20,13,.55)); }
.media .on-photo { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; z-index: 2; }
/* Repli si une image ne charge pas : on masque <img> cassée, le dégradé reste */
img.ph { background: linear-gradient(135deg, var(--yellow-l), var(--bg2)); }
img.ph:-moz-broken { visibility: hidden; }

/* Icônes SVG (remplacent les emojis dans les blocs .ico) */
.ico svg, .snc-feat .ico svg, .big-ico svg { width: 1.5em; height: 1.5em; display: block; }
.svg-ico { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   LANDING « accueil.php » — moderne, chaleureux, imagé
   ============================================================ */
.snc-nav { position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 20px; padding: 15px 30px; }
.snc-nav .logo { font-size: 27px; margin: 0; }
.snc-nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.snc-nav-links a { font-size: 16px; font-weight: 600; color: var(--ink3); }
.snc-nav-links a:hover { color: var(--ink); }

.snc-hero { max-width: 1140px; margin: 0 auto; padding: 70px 30px 46px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.snc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 22px; }
.snc-eyebrow span { background: var(--yellow); color: #15140D; padding: 5px 12px; border-radius: var(--rpill); }
.snc-hero h1 { font-size: clamp(40px, 5.4vw, 64px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.04; color: var(--ink); margin-bottom: 22px; }
.snc-hero h1 mark { background: linear-gradient(180deg, transparent 58%, var(--yellow) 58%);
  color: inherit; padding: 0 .04em; }
.snc-hero p.lead { font-size: 20px; line-height: 1.6; color: var(--ink2); margin-bottom: 32px; max-width: 47ch; }
.snc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.snc-trust { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink3); }
.snc-trust .dots { display: flex; }
.snc-trust .dots i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px;
  background-size: cover; background-position: center; box-shadow: var(--sh-xs); }

/* Visuel hero : photo réelle + carte flottante */
.snc-hero-media { position: relative; }
.snc-hero-photo { position: relative; border-radius: var(--rl); overflow: hidden; aspect-ratio: 4/5;
  box-shadow: var(--sh2); background: linear-gradient(135deg, var(--yellow-soft), var(--bg2)); }
.snc-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.snc-hero-card { position: absolute; left: -28px; bottom: 26px; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--sh2); padding: 18px 20px; max-width: 270px; }
.snc-hero-card h3 { font-size: 16px; margin-bottom: 12px; }
.snc-hero-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.snc-hero-card li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.snc-hero-card li b { display: inline-flex; color: var(--green); }

.snc-section { max-width: 1140px; margin: 0 auto; padding: 64px 30px; }
.snc-section.alt { background: var(--bg2); border: none; max-width: none; }
.snc-section.alt > .snc-inner { max-width: 1140px; margin: 0 auto; }
.snc-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; }
.snc-h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.snc-sub { font-size: 18px; color: var(--ink3); margin-bottom: 38px; max-width: 60ch; }

.snc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.snc-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.snc-feat:hover { transform: translateY(-6px); box-shadow: var(--sh2); border-color: var(--yellow-l); }
.snc-feat .ico { width: 54px; height: 54px; border-radius: 15px; background: var(--yellow-soft);
  border: 1px solid var(--yellow-l); color: var(--gold); display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px; }
.snc-feat h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.snc-feat p { font-size: 15.5px; line-height: 1.6; color: var(--ink3); }

.snc-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.snc-role { border: none; border-radius: var(--r); padding: 0; background: var(--surface);
  text-align: left; overflow: hidden; box-shadow: var(--sh); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.snc-role:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.snc-role .role-photo { aspect-ratio: 3/2; overflow: hidden; background: linear-gradient(135deg, var(--yellow-soft), var(--bg2)); }
.snc-role .role-photo img { width: 100%; height: 100%; object-fit: cover; }
.snc-role .role-body { padding: 18px 20px 22px; }
.snc-role h4 { font-family: var(--font-d); font-size: 19px; margin: 0 0 6px; color: var(--ink); }
.snc-role p { font-size: 14.5px; color: var(--ink3); line-height: 1.55; }
.snc-role .e { font-size: 34px; }

.snc-band { background: radial-gradient(120% 160% at 0% 0%, #2a2820, var(--ink) 60%); color: #fff;
  border-radius: var(--rl); padding: 56px; text-align: center; position: relative; overflow: hidden; }
.snc-band::before { content:""; position:absolute; top:-40px; right:-30px; width:220px; height:220px;
  background: var(--yellow); border-radius: 50%; filter: blur(10px); opacity:.22; }
.snc-band h2 { font-size: clamp(30px,3.4vw,42px); font-weight: 600; margin-bottom: 12px; }
.snc-band h2 mark { background: var(--yellow); color: #15140D; padding: 0 .08em; border-radius: 6px; }
.snc-band p { font-size: 18px; color: #d9d7cd; margin-bottom: 28px; }

.snc-footer { background: #15140D; color: #b9b6ab; padding: 46px 30px; }
.snc-footer-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: center; }
.snc-footer a { color: var(--yellow); }
.snc-footer .logo { font-size: 24px; color: #fff; }

/* ---------- Authentification : écran scindé moderne ---------- */
.auth-wrap { background:
  radial-gradient(80% 120% at 100% 0%, var(--yellow-soft), transparent 60%),
  radial-gradient(70% 90% at 0% 100%, #EAF5EE, transparent 55%), var(--bg);
  padding: 24px; }
.auth-box { background: var(--surface); border: 1px solid var(--border); border-radius: 26px;
  box-shadow: var(--sh2); padding: 40px; max-width: 440px; }
.auth-logo { font-size: 32px; }
.auth-logo span { font-family: var(--font-b); }
.auth-tagline { color: var(--ink3); }
.auth-sep { color: var(--stone-m); position: relative; }

/* Repli motion */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .snc-hero { grid-template-columns: 1fr; padding-top: 44px; gap: 38px; }
  .snc-hero-media { max-width: 460px; }
  .snc-cards { grid-template-columns: 1fr 1fr; }
  .snc-roles { grid-template-columns: 1fr 1fr; }
  .snc-nav-links a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .snc-cards, .snc-roles { grid-template-columns: 1fr; }
  .snc-hero-card { left: 8px; right: 8px; max-width: none; }
  .snc-band { padding: 36px 24px; }
}

/* ---------- Menu compte (header partagé) ---------- */
.nav-right { display: flex; align-items: center; gap: 10px; }
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; display: inline-flex; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 250px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--sh2); padding: 8px; z-index: 300; }
.acct-head { display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-ava { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--ink), #3a382c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.acct-head strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.2; }
.acct-head span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; }
.acct-item { display: block; padding: 11px 12px; border-radius: 11px; font-size: 14.5px;
  font-weight: 500; color: var(--ink); }
.acct-item:hover { background: var(--bg2); color: var(--ink); }
.acct-out { color: var(--red); }
.acct-out:hover { background: var(--red-l); color: var(--red); }
.nav-tag { border-radius: var(--rpill); padding: 5px 12px; font-size: 12px; font-weight: 600; }
.nav-tag-ok { background: var(--green-l); color: #146544; }
.nav-tag-gold { background: var(--yellow-soft); color: var(--gold); }

/* ---------- Pied de page uniforme + collé en bas ---------- */
html, body { min-height: 100dvh; }
body { display: flex; flex-direction: column; }
.footer { background: #15140D; color: #b9b6ab; text-align: center;
  padding: 22px 24px; font-size: 14px; margin-top: auto; }
.footer a { color: var(--yellow); font-weight: 600; }
.footer a:hover { color: #FFE27A; }

/* ---------- Impression (export PDF propre) ---------- */
@media print {
  .snav-top, .snav-bot, .topnav, .footer, .add-form, .entry-actions,
  .journal-hero .btn, .voice-overlay, #newMsgModal, .modal-overlay { display: none !important; }
  body { padding: 0 !important; background: #fff !important; display: block !important; }
  .page-wrap { max-width: 100%; padding: 0; }
  .entry-card, .card { box-shadow: none !important; border: 1px solid #ddd !important;
    break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
}