:root { --c:#1f5fbf; --bg:#f5f7fb; --ok:#1e8e3e; --ko:#c0392b; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin:0; background:var(--bg); color:#1b1f2a; line-height:1.5; }
.topbar { position:sticky; top:0; z-index:50; background:linear-gradient(135deg,#1f5fbf,#164a97); color:#fff; padding:0 1.2rem; min-height:60px; display:flex; align-items:center; gap:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.topbar a { color:#fff; text-decoration:none; }
.topbar .brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.2rem; white-space:nowrap; margin-right:auto; }
.topbar .brand i { font-size:1.5rem; } .topbar .brand em { font-style:normal; font-weight:400; opacity:.85; }
.nav { display:flex; align-items:center; gap:.4rem; }
.nav > a, .account summary { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px; white-space:nowrap; cursor:pointer; transition:background .15s; }
.nav > a:hover, .account summary:hover, .account[open] summary { background:rgba(255,255,255,.18); }
.topbar .nav .cta { background:#fff; color:var(--c); font-weight:600; } .topbar .nav .cta:hover { background:#e8f0ff; }
.account { position:relative; } .account summary { list-style:none; } .account summary::-webkit-details-marker { display:none; }
.account summary span { max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.account .menu { position:absolute; right:0; top:calc(100% + .5rem); min-width:220px; background:#fff; border-radius:10px; padding:.4rem; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.topbar .account .menu a, .account .menu button { display:flex; align-items:center; gap:.6rem; width:100%; margin:0; padding:.6rem .8rem; border-radius:6px; color:#1b1f2a; background:none; text-align:left; font:inherit; }
.topbar .account .menu a:hover, .account .menu button:hover { background:#eef3fc; color:var(--c); }
.account .menu form { margin:.3rem 0 0; border-top:1px solid #e3e6ee; padding-top:.3rem; } .account .menu form button { color:var(--ko); }
.nav-toggle, .burger { display:none; }
@media (max-width:820px) {
  .topbar { flex-wrap:wrap; padding:.4rem 1rem; gap:0; }
  .burger { display:block; font-size:1.8rem; cursor:pointer; padding:0 .3rem; }
  .nav { display:none; flex-direction:column; align-items:stretch; width:100%; padding:.4rem 0 .8rem; }
  .nav-toggle:checked ~ .nav { display:flex; }
  .nav > a, .account summary { border-radius:8px; }
  .account .menu { position:static; box-shadow:none; margin-top:.3rem; }
}
main { max-width:900px; margin:1.5rem auto; padding:0 1rem; }
.card { background:#fff; border-radius:10px; padding:1.2rem; margin-bottom:1rem; box-shadow:0 1px 4px rgba(0,0,0,.08); }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:0; }
.day { text-transform:capitalize; }
.slots { display:flex; flex-wrap:wrap; gap:.5rem; }
.slot { display:inline-flex; flex-direction:column; align-items:center; padding:.4rem .8rem; border:1px solid var(--c); border-radius:8px; color:var(--c); text-decoration:none; background:#fff; }
.slot:hover { background:var(--c); color:#fff; } .slot small { font-size:.75rem; }
label { display:block; margin:.7rem 0 .2rem; font-weight:600; }
input, select, textarea { width:100%; padding:.5rem; border:1px solid #c5cad6; border-radius:6px; font:inherit; }
input[type=checkbox] { width:auto; }
.inline label { display:inline; font-weight:400; }
button, .btn { background:var(--c); color:#fff; border:0; padding:.55rem 1.1rem; border-radius:6px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; margin-top:.8rem; }
button.danger { background:var(--ko); } button.small { padding:.25rem .6rem; margin:0; font-size:.85rem; }
.alert { padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; }
.alert.error { background:#fdeaea; color:var(--ko); } .alert.info { background:#e8f5ec; color:var(--ok); }
.err { color:var(--ko); font-size:.85rem; }
table { width:100%; border-collapse:collapse; } td, th { text-align:left; padding:.4rem; border-bottom:1px solid #e3e6ee; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#dbe4f5; color:var(--c); font-weight:700; flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.sm { width:28px; height:28px; font-size:.8rem; } .avatar.xl { width:96px; height:96px; font-size:2.2rem; }
.profile { display:flex; gap:1rem; align-items:center; margin-bottom:.5rem; } .profile h2 { margin-bottom:0; }
.inline-avatar { display:inline-flex; align-items:center; gap:.5rem; }
td form { margin:0; } td input[type=file] { padding:.2rem; font-size:.8rem; }
.muted { color:#667; } .booked { color:var(--ok); font-weight:600; }

/* Catalogue de créneaux */
.filter { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .filter label { margin:0; white-space:nowrap; } .filter select { flex:1; min-width:220px; width:auto; }
.empty { text-align:center; color:#667; padding:2.5rem 1rem; } .empty i { display:block; font-size:2.2rem; color:#a9b4cc; margin-bottom:.4rem; }
.day-card { padding:0; overflow:hidden; }
.day-head { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:#eef3fc; border-bottom:1px solid #dbe4f5; }
.day-head h2 { margin:0; font-size:1.1rem; }
.date-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:56px; height:56px; border-radius:12px; background:var(--c); color:#fff; line-height:1.1; flex:none; }
.date-badge small { text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; opacity:.9; } .date-badge strong { font-size:1.4rem; }
.member-row { display:flex; align-items:center; gap:1.2rem; padding:.9rem 1.2rem; border-bottom:1px solid #eef0f5; } .member-row:last-child { border-bottom:0; }
.who { display:flex; align-items:center; gap:.7rem; width:230px; flex:none; } .who div { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.times { display:flex; flex-wrap:wrap; gap:.45rem; }
.time { padding:.35rem .8rem; border:1px solid var(--c); border-radius:999px; color:var(--c); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums; background:#fff; transition:all .12s; }
.time:hover { background:var(--c); color:#fff; transform:translateY(-1px); box-shadow:0 2px 6px rgba(31,95,191,.35); }
@media (max-width:640px) { .member-row { flex-direction:column; align-items:flex-start; gap:.6rem; } .who { width:auto; } }

/* Photo de membre agrandie dans le catalogue */
.avatar.lg { width:88px; height:88px; font-size:2.2rem; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.member-row { padding:1.1rem 1.2rem; }
.who { width:320px; gap:1rem; }
.who-name { font-size:1.1rem; }
.who small { font-size:.9rem; }
@media (max-width:640px) { .who { width:100%; } .avatar.lg { width:72px; height:72px; } }

/* Catalogue : une carte par membre (style Bootstrap card) */
main:has(.member-grid) { max-width:1100px; }
.member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.3rem; align-items:start; }
.mcard { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.09); display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.mcard:hover { box-shadow:0 8px 24px rgba(31,95,191,.2); transform:translateY(-3px); }
.mcard-top { height:110px; background:linear-gradient(135deg,#1f5fbf,#5b8fe0); display:flex; justify-content:center; align-items:flex-end; }
.avatar.xxl { width:140px; height:140px; font-size:3.4rem; margin-bottom:-70px; border:5px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.25); background:#dbe4f5; }
.mcard-head { text-align:center; padding:82px 1rem .8rem; border-bottom:1px solid #eef0f5; }
.mcard-head h2 { margin:0; font-size:1.25rem; }
.mcard-head .role { display:inline-block; margin-top:.3rem; padding:.15rem .7rem; border-radius:999px; background:#eef3fc; color:var(--c); font-size:.85rem; font-weight:600; }
.mcard-head .count { display:block; margin-top:.5rem; color:#667; font-size:.85rem; }
.mcard-body { padding:.8rem 1.1rem 1.1rem; }
.mday + .mday { margin-top:.9rem; padding-top:.9rem; border-top:1px dashed #e3e6ee; }
.mday-label { display:flex; align-items:center; gap:.4rem; font-weight:600; margin-bottom:.5rem; color:#33405c; } .mday-label i { color:var(--c); }

/* Catalogue : navigation par jour + blocs de jour */
html { scroll-behavior:smooth; }
.daybar { position:sticky; top:60px; z-index:40; display:flex; gap:.5rem; overflow-x:auto; padding:.6rem .2rem; margin:0 0 1rem; background:var(--bg); scrollbar-width:thin; }
.daychip { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; min-width:64px; padding:.45rem .7rem .4rem; border:1px solid #d5dbe8; border-radius:12px; background:#fff; color:#33405c; text-decoration:none; line-height:1.15; transition:all .15s; }
.daychip small { text-transform:uppercase; font-size:.68rem; letter-spacing:.05em; color:#667; } .daychip strong { font-size:1.35rem; } .daychip em { font-style:normal; font-size:.72rem; color:#667; }
.daychip .n { position:absolute; top:-7px; right:-7px; min-width:20px; padding:0 .3rem; border-radius:999px; background:var(--ok); color:#fff; font-size:.7rem; font-weight:700; text-align:center; line-height:20px; }
.daychip:hover { border-color:var(--c); transform:translateY(-1px); }
.daychip.active { background:var(--c); border-color:var(--c); color:#fff; } .daychip.active small, .daychip.active em { color:#dbe7ff; }
.dayblock { scroll-margin-top:150px; margin-bottom:2rem; }
.day-title { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:2px solid #dbe4f5; }
.day-title h2 { margin:0; font-size:1.25rem; }
.tag { display:inline-block; margin-left:.5rem; padding:.1rem .6rem; border-radius:999px; background:#fff3cd; color:#8a6100; font-size:.75rem; font-weight:700; text-transform:none; vertical-align:middle; }
.mcard-head h3 { margin:0; font-size:1.2rem; } .mcard-head { border-bottom:0; padding-bottom:.4rem; }
.mcard-body .times { justify-content:center; } .mcard-body { padding:.4rem 1.1rem 1.3rem; }
@media (max-width:640px) { .daybar { top:56px; } .day-title h2 { font-size:1.1rem; } }

/* Spécialité, profil public */
.specialty { display:inline-flex; align-items:center; gap:.35rem; margin:.4rem 0 0 .3rem; padding:.15rem .7rem; border-radius:999px; background:#fff3e0; color:#a35200; font-size:.85rem; font-weight:600; }
.mcard-head .role, .mcard-head .specialty { margin-top:.4rem; }
.mcard-head h3 a { color:inherit; text-decoration:none; } .mcard-head h3 a:hover { color:var(--c); }
.mcard-top { text-decoration:none; }
.mcard-head .more { display:block; margin-top:.6rem; font-size:.85rem; font-weight:600; color:var(--c); text-decoration:none; } .mcard-head .more:hover { text-decoration:underline; }
.back { display:inline-block; margin-bottom:1rem; color:var(--c); text-decoration:none; font-weight:600; } .back:hover { text-decoration:underline; }
.pcard { padding:0; overflow:hidden; }
.pcard-banner { height:120px; background:linear-gradient(135deg,#1f5fbf,#5b8fe0); }
.pcard-main { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 1.2rem 1.2rem; }
.pcard-main .avatar.xxl { margin-top:-70px; margin-bottom:.6rem; }
.pcard-main h1 { margin:.2rem 0 .5rem; }
.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; } .badges .specialty { margin:0; }
.badges .role { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .7rem; border-radius:999px; background:#eef3fc; color:var(--c); font-size:.85rem; font-weight:600; }
.pcard-bio { padding:1.2rem 1.5rem 1.5rem; border-top:1px solid #eef0f5; } .pcard-bio h2 { margin-bottom:.5rem; } .pcard-bio p { margin:0; white-space:pre-line; }
.section-title { display:flex; align-items:center; gap:.5rem; margin:1.5rem 0 .8rem; font-size:1.2rem; } .section-title i { color:var(--c); }

/* Cartes du catalogue : format compact */
.member-grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.mcard { border-radius:14px; }
.mcard-top { height:64px; }
.mcard .avatar.xxl { width:96px; height:96px; font-size:2.4rem; margin-bottom:-48px; border-width:4px; }
.mcard-head { padding:56px .8rem .3rem; }
.mcard-head h3 { font-size:1.05rem; }
.mcard-head .role, .mcard-head .specialty { margin-top:.3rem; padding:.1rem .6rem; font-size:.78rem; }
.mcard-head .more { margin-top:.4rem; font-size:.8rem; }
.mcard-body { padding:.3rem .9rem 1rem; }
.mcard .time { padding:.25rem .65rem; font-size:.9rem; }

/* Gestion des membres */
.badge-role { display:inline-block; padding:.1rem .6rem; border-radius:999px; background:#eef0f5; color:#556; font-size:.8rem; font-weight:600; }
.badge-role.admin { background:#fff3cd; color:#8a6100; }
td.actions { white-space:nowrap; } td.actions form { display:inline-block; margin:0 .2rem .2rem 0; } td.actions p { margin:0; }