:root{
  --violet:#6759A2; --violet-deep:#453A78; --violet-night:#2E2751; --violet-mist:#EDEAF6; --sky:#8CD0F4;
  --accent:#1668A8; --accent-mist:#E7F4FC;
  --bg:#F4F3F8; --surface:#FFFFFF; --ink:#1C1B2E; --title:#453A78; --muted:#6E6985; --rule:#E2DFEC;
  --btn-bg:#6759A2; --btn-hover:#453A78; --chip:#EDEAF6; --chip-ink:#453A78;
  --font-display: Cambria, Caladea, Georgia, 'Times New Roman', serif;
  --font-body: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif;
  --shadow-md:0 6px 18px rgba(46,39,81,.12); --shadow-lg:0 14px 40px rgba(46,39,81,.16);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15122A; --surface:#211C3D; --ink:#F4F3F8; --title:#DCD6F2; --muted:#B5AFCB; --rule:#3A3360;
    --accent:#8CD0F4; --accent-mist:#1E2F48; --chip:#2E2751; --chip-ink:#DCD6F2;
    --btn-bg:#6759A2; --btn-hover:#7A6CB6;
    --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 14px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#15122A; --surface:#211C3D; --ink:#F4F3F8; --title:#DCD6F2; --muted:#B5AFCB; --rule:#3A3360;
  --accent:#8CD0F4; --accent-mist:#1E2F48; --chip:#2E2751; --chip-ink:#DCD6F2;
  --btn-bg:#6759A2; --btn-hover:#7A6CB6;
  --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 14px 40px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:10px}

.wrap{min-height:100%;padding:0 0 48px}
@media (min-width:560px){.wrap{padding:48px 16px 64px}}

/* ---------- Carte individuelle ---------- */
.card{max-width:440px;margin:0 auto;background:var(--surface);overflow:hidden;position:relative}
@media (min-width:560px){.card{border-radius:16px;box-shadow:var(--shadow-lg)}}
.hero{position:relative;height:168px;background:var(--violet);overflow:hidden}
.hero .bigS{position:absolute;right:-48px;top:-70px;height:300px;width:auto;fill:var(--violet-deep)}
.hero .logo{position:absolute;left:24px;top:24px;height:30px;width:auto}

.ident{padding:0 24px;position:relative}
.avatar{width:104px;height:104px;border-radius:50%;margin-top:-52px;border:4px solid var(--surface);background:var(--violet-mist);display:grid;place-items:center;overflow:hidden;position:relative}
.avatar span{font-family:var(--font-display);font-weight:700;font-size:38px;color:var(--violet-deep);letter-spacing:.5px}
.avatar img{width:100%;height:100%;object-fit:cover}
h1{font-family:var(--font-display);font-weight:700;color:var(--title);font-size:30px;line-height:1.15;margin:16px 0 4px}
.role{margin:0;font-size:17px;color:var(--ink)}
.entity{margin:0;font-size:15px;color:var(--muted)}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:24px 24px 0}
.quick a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:8px 0;border-radius:10px}
.quick .ic{width:52px;height:52px;border-radius:50%;background:var(--chip);display:grid;place-items:center;color:var(--violet-deep);transition:background .15s,color .15s}
:root[data-theme="dark"] .quick .ic{color:var(--title)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quick .ic{color:var(--title)}}
.quick a:hover .ic{background:var(--violet);color:#fff}
.quick svg{width:24px;height:24px}

.save{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 24px 0;width:calc(100% - 48px);background:var(--btn-bg);color:#fff;font-family:var(--font-display);font-weight:700;font-size:18px;padding:16px 24px;border-radius:10px;transition:background .15s}
.save:hover{background:var(--btn-hover)}
.save svg{width:22px;height:22px}

.block{margin:32px 24px 0}
.block h2{font-family:var(--font-display);font-weight:700;color:var(--title);font-size:19px;margin:0 0 8px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule)}
.rows a,.rows div.row{display:flex;align-items:center;gap:16px;padding:12px 0;min-height:56px}
.rows .ri{width:24px;height:24px;flex:none;color:var(--violet)}
:root[data-theme="dark"] .rows .ri{color:var(--sky)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rows .ri{color:var(--sky)}}
.rows .v{display:block;font-size:17px;color:var(--ink);word-break:break-word}
.rows .k{display:block;font-size:14px;color:var(--muted)}
.rows a:hover .v{color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--chip);color:var(--chip-ink);font-size:15px;padding:4px 12px;border-radius:999px}

.share{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center}
.qr{display:block;width:100%;background:#fff;border-radius:10px;padding:10px;border:1px solid var(--rule);aspect-ratio:1}
.qr svg{display:block;width:100%;height:auto}
.qr svg rect{fill:#fff}.qr svg path{fill:#2E2751}
.share p{margin:0 0 12px;font-size:15px;color:var(--muted)}
.sbtn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:2px solid var(--violet);border-radius:10px;color:var(--title);font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:8px;transition:background .15s}
.sbtn:hover{background:var(--chip)}
.sbtn svg{width:20px;height:20px;flex:none}

.qr{cursor:zoom-in;transition:transform .15s}
.qr:hover{transform:scale(1.03)}
.qr-hint{display:block;font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.overlay{position:fixed;inset:0;z-index:20;background:rgba(21,18,42,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.on{opacity:1;pointer-events:auto}
.overlay .big{background:#fff;border-radius:16px;padding:24px;width:min(82vw,380px)}
.overlay .big svg{display:block;width:100%;height:auto}
.overlay .big svg rect{fill:#fff}.overlay .big svg path{fill:#2E2751}
.overlay .who{color:#fff;text-align:center}
.overlay .who b{display:block;font-family:var(--font-display);font-size:24px}
.overlay .who span{opacity:.85;font-size:16px}
.overlay .close{color:#fff;border:2px solid rgba(255,255,255,.6);border-radius:10px;padding:10px 24px;font-family:var(--font-display);font-weight:700;margin-top:8px}
.foot{margin:40px 24px 0;padding:16px 0 24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.foot a:hover{color:var(--accent)}
.foot .back{display:inline-flex;align-items:center;gap:4px}

/* ---------- Annuaire ---------- */
.dir{max-width:720px;margin:0 auto;padding:0 16px}
.dir-head{background:var(--violet);color:#fff;border-radius:0 0 16px 16px;padding:32px 24px 40px;position:relative;overflow:hidden;margin:0 -16px}
@media (min-width:560px){.dir-head{border-radius:16px;margin:0}}
.dir-head .bigS{position:absolute;right:-40px;top:-60px;height:300px;fill:var(--violet-deep)}
.dir-head .logo{height:32px;position:relative}
.dir-head h1{color:#fff;font-size:34px;margin:32px 0 8px;position:relative;max-width:14ch}
.dir-head p{margin:0;position:relative;opacity:.92;max-width:42ch}
.search{margin:24px 0 16px;position:relative}
.search input{width:100%;font:inherit;font-size:17px;padding:14px 16px 14px 48px;border-radius:10px;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:640px){.people{grid-template-columns:1fr 1fr}}
.people a{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:12px 16px;transition:border-color .15s,box-shadow .15s}
.people a:hover{border-color:var(--violet);box-shadow:var(--shadow-md)}
.people .mini{width:48px;height:48px;border-radius:50%;background:var(--violet-mist);display:grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:700;color:var(--violet-deep);font-size:18px}
.people b{display:block;font-family:var(--font-display);color:var(--title);font-size:17px;line-height:1.2}
.people small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:2px}
.people .chev{margin-left:auto;width:20px;height:20px;color:var(--muted);flex:none}
.empty{color:var(--muted);text-align:center;padding:32px 0}
.dir-foot{color:var(--muted);font-size:14px;text-align:center;margin-top:32px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);background:var(--violet-night);color:#fff;padding:12px 20px;border-radius:10px;font-size:15px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Ajouts version en ligne */
a.save{text-decoration:none}
.hero a{display:block}