/* Zodiac Intelligence — styles partagés des maquettes Pro */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --surface-alt:#FAF8F3;
  --ink:#2D2D3A; --muted:#6E6E7C; --faint:#9C9CA8;
  --hairline:#E8E3D9; --hairline-soft:#EFEBE2;
  --accent:#5A62A8; --accent-deep:#4A5193; --accent-soft:#828AC8;
  --accent-tint:rgba(90,98,168,.07); --warm:#C99B72; --good:#4F9D7A;
  --serif:'Space Grotesk',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);margin:0;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

.topbar{height:56px;display:flex;align-items:center;gap:18px;padding:0 20px;background:rgba(246,244,239,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.7) brightness(1.04);backdrop-filter:blur(18px) saturate(1.7) brightness(1.04);
  border-bottom:1px solid var(--glass-edge,var(--hairline));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px -14px rgba(30,28,55,.4);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:26px;height:26px;color:var(--accent)}
.brand b{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.06em}
.spacer{flex:1}
.navlink{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted);cursor:pointer}
.navlink:hover{color:var(--accent)}

/* Boutons en MOTEUR Liquid Glass (gloss par liseré, lisible sur fond clair) */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:9px 15px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--glass-accent-bg,var(--accent));color:#fff;border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));
  box-shadow:var(--glass-shadow-btn,0 6px 18px -6px rgba(30,28,55,.34)),var(--glass-rim,inset 0 1px 1px rgba(255,255,255,.5))}
.btn-primary:hover{background:var(--glass-accent-bg-hover,var(--accent-deep))}
.btn-ghost{background:var(--glass-btn-bg,var(--surface));color:var(--ink);border:1px solid var(--glass-edge,var(--hairline));
  -webkit-backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));
  box-shadow:var(--glass-shadow-btn,0 6px 18px -6px rgba(30,28,55,.34)),var(--glass-rim,inset 0 1px 1px rgba(255,255,255,.9))}
.btn-ghost:hover{background:var(--glass-btn-bg-hover,var(--surface));border-color:var(--accent-soft);color:var(--accent)}
.btn-lg{padding:12px 20px;font-size:13px}

.page{max-width:1040px;margin:0 auto;padding:32px 24px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h1{font-size:30px;font-weight:600}
.page-head p{color:var(--muted);font-size:13.5px;margin:6px 0 0}

.field{margin-bottom:18px}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.input,.select,textarea.input{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--hairline);border-radius:9px;padding:11px 13px;outline:none;transition:.15s}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-tint)}
.select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239C9CA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer;margin-top:-6px}
.hint{font-size:11.5px;color:var(--faint);margin-top:6px}

/* Cartes/panneaux en verre (plus opaques → lisibilité) */
.card{border-radius:14px;background:var(--glass-panel-bg,var(--surface));border:1px solid var(--glass-edge,var(--hairline));
  -webkit-backdrop-filter:blur(var(--glass-blur-pop,18px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));backdrop-filter:blur(var(--glass-blur-pop,18px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));
  box-shadow:var(--glass-shadow-pop,0 10px 30px -14px rgba(30,28,55,.2)),var(--glass-rim,inset 0 1px 1px rgba(255,255,255,.9))}
.search{display:flex;align-items:center;gap:10px;border-radius:10px;padding:10px 14px;max-width:380px;
  background:var(--glass-btn-bg,var(--surface));border:1px solid var(--glass-edge,var(--hairline));
  -webkit-backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));backdrop-filter:blur(var(--glass-blur-btn,11px)) saturate(var(--glass-sat,1.8)) brightness(var(--glass-bright,1.06));
  box-shadow:var(--glass-shadow-btn,0 4px 13px -4px rgba(30,28,55,.2)),var(--glass-rim,inset 0 1px 1px rgba(255,255,255,.9))}
.search input{border:none;outline:none;flex:1;font-size:14px;background:none;color:var(--ink)}
.search svg{width:16px;height:16px;color:var(--faint)}