/* ====================== OkiDocky — Portail · Thème clair iOS ======================
   Raccord avec la refonte des apps : fond clair, cartes blanches, tuiles d'icône
   colorées par profil, police système. */

:root{
  --bg:#f1f1f3; --bg2:#ffffff; --card:#ffffff; --card2:#f7f6f3;
  --line:#ebe9e3; --line2:#e3e1da;
  --txt:#16171b; --muted:#8c887d; --faint:#b3afa4;
  --amber:#F5A300;
  --r:18px;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --shadow:0 1px 3px rgba(20,18,12,.07);
  color-scheme:light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#15181d; --bg2:#1c2027; --card:#21262f; --card2:#272d38;
    --line:#333a45; --line2:#3d4654;
    --txt:#eef2f6; --muted:#8b95a3; --faint:#5e6877;
    --amber:#ffb000;
    --shadow:0 1px 3px rgba(0,0,0,.4);
  }
  .toast{background:#2a2f37;color:#eef2f6}
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sys);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;display:flex;justify-content:center;
  padding:calc(clamp(26px,7vw,52px) + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
.shell{width:100%;max-width:640px}

/* ---- En-tête ---- */
header{margin-bottom:32px}
.brand{font-weight:800;font-size:clamp(32px,9vw,42px);letter-spacing:-1px;line-height:1}
.brand span{color:var(--amber)}
.tagline{color:var(--muted);font-size:15px;margin-top:10px;max-width:42ch;line-height:1.45}
.privacy{color:var(--faint);font-size:12.5px;line-height:1.5;margin-top:8px;max-width:44ch}

/* ---- Eyebrow de famille ---- */
.fam{margin:28px 0 14px;display:flex;align-items:center;gap:11px}
.fam .tick{width:10px;height:10px;border-radius:3px;background:var(--famc);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--famc) 18%,transparent)}
.fam .lbl{font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.fam .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.fam-a{--famc:#F5A300}
.fam-b{--famc:#2b7fd4}

/* ---- Grille de cartes ---- */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:540px){ .grid{grid-template-columns:1fr 1fr} }

.card{position:relative;display:flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px;overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}

.card-ic{flex:none;width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ac);background:color-mix(in srgb, var(--ac) 13%, var(--bg2))}
.card .body{flex:1;min-width:0}
.card .name{font-weight:700;font-size:18px;letter-spacing:-.2px;line-height:1.1}
.card .desc{color:var(--muted);font-size:12.8px;line-height:1.45;margin-top:4px}
.card .chev{flex:none;color:var(--faint);transition:color .18s ease, transform .18s ease}

.card:hover,.card:focus-visible{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));
  transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,18,12,.28);outline:none}
.card:hover .chev,.card:focus-visible .chev{color:var(--ac);transform:translateX(3px)}
.card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 35%,transparent)}
.card:active{transform:translateY(0)}

/* accents par profil */
.p-deb{--ac:#F5A300}
.p-ext {--ac:#11a89a}
.p-sur{--ac:#2b7fd4}
.p-bur{--ac:#8a5ad6}

/* ---- Carte désactivée + message ---- */
.card.disabled{cursor:not-allowed;opacity:.6}
.card.disabled:hover,.card.disabled:focus-visible{border-color:var(--line);transform:none;box-shadow:var(--shadow)}
.card.disabled:hover .chev,.card.disabled:focus-visible .chev{color:var(--faint);transform:none}
.card.disabled .card-ic{color:var(--faint);background:var(--card2)}
.card .badge{display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted);background:var(--card2);
  border:1px solid var(--line2);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);
  background:#16171b;color:#fff;border-radius:14px;
  padding:12px 20px;font-size:14px;font-weight:600;box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:9999;
  max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Pied ---- */
.foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;
  gap:10px;color:var(--faint);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;
  letter-spacing:.2px;flex-wrap:wrap}
.foot .ver{color:var(--faint)}

/* ---- Apparition au chargement ---- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.anim{opacity:0;animation:rise .5s ease forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.16s}
.d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .anim{animation:none;opacity:1}
  .card:hover,.card:focus-visible{transform:none}
}

/* ====== Option C — Section verrouillée (révélée par appui long sur le logo + NIP) ====== */
.locked-zone{display:none}
.locked-zone.revealed{display:block}
#brand{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default}

.pin-back{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,12,16,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pin-back.on{display:flex}
.pin-card{width:100%;max-width:320px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.28);padding:22px 20px;font-family:var(--sys)}
.pin-card h3{margin:0 0 4px;font-size:17px;color:var(--txt)}
.pin-card p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.45}
.pin-input{width:100%;font-size:22px;letter-spacing:8px;text-align:center;padding:12px;
  border:1px solid var(--line2);border-radius:12px;background:var(--card2);color:var(--txt);
  outline:none;font-family:var(--sys)}
.pin-input:focus{border-color:var(--amber)}
.pin-input.err{animation:pinshake .35s}
@keyframes pinshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pin-row{display:flex;gap:10px;margin-top:16px}
.pin-row button{flex:1;padding:11px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--line2);font-family:var(--sys)}
.pin-ok{background:var(--amber);color:#1a1205;border-color:var(--amber)}
.pin-cancel{background:var(--card2);color:var(--txt)}