:root{
    --ink-950:#0A0A0A; --ink-900:#0F0F0F; --ink-800:#111827; --ink-700:#1F2937; --ink-600:#374151;
    --paper:#FFFFFF; --bone:#FAFAF7; --line:#EEEDE8; --muted:#555555; --silver:#9CA3AF;
    --violet:#8858F8; --violet-soft:#F2ECFF; --violet-deep:#5E2FE0;
  }
  html,body{ background:#FFFFFF; }
  button, a, .choice, .chip-btn{ -webkit-tap-highlight-color:rgba(122,71,240,.18); }
  body{
    font-family:'Clash Display', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:400; color:var(--ink-800);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .font-display{ font-family:'Clash Display', system-ui, sans-serif; font-feature-settings:"ss01","ss02"; }

  /* ambient background */
  .bg-glow{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
  .bg-glow span{ position:absolute; border-radius:999px; filter:blur(90px); opacity:.45; }
  .bg-glow .g1{ display:none; }
  .bg-glow .g2{ display:none; }

  /* ---------- liquid-glass component system (identité Layve) ---------- */
  .btn-primary{
    position:relative; color:#FFFFFF; font-weight:600;
    background:#0F0F0F;
    border:1px solid #0F0F0F;
    box-shadow:none;
    isolation:isolate; overflow:hidden; cursor:pointer;
    transition: transform .35s cubic-bezier(.2,1,.3,1), box-shadow .35s, filter .3s, opacity .3s;
  }
  .btn-primary:hover, .btn-primary:active{ background:#7A47F0; border-color:#7A47F0; }
  #homeBanner .btn-primary{ background:#FFFFFF; color:#0F0F0F; border-color:#FFFFFF; }
  #homeBanner .btn-primary:hover, #homeBanner .btn-primary:active{ background:#7A47F0; color:#FFFFFF; border-color:#7A47F0; }
  .btn-primary:active{ transform:translateY(0) scale(.97); }
  .btn-primary:disabled{ opacity:.4; cursor:not-allowed; filter:none; transform:none; }


  /* choix (pastilles) et espaces réservés aux photos */
  .choice{ display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink-800); background:#fff; border:1px solid rgba(15,15,15,.14); cursor:pointer; transition:background .2s, color .2s, border-color .2s; font-family:inherit; }
  .choice:hover, .choice:active{ border-color:#7A47F0; color:#7A47F0; }
  .choice.selected{ background:#0F0F0F; color:#fff; border-color:#0F0F0F; }
  .choice.selected:hover, .choice.selected:active{ background:#7A47F0; border-color:#7A47F0; color:#fff; }
  #analysisOverlay{ position:fixed; inset:0; background:rgba(250,250,247,.94); display:none; align-items:center; justify-content:center; z-index:150; }
  #analysisOverlay.show{ display:flex; }
  #toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:#0F0F0F; color:#fff; padding:12px 18px; border-radius:14px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200; max-width:min(92vw,420px); }
  #toast.show{ opacity:1; transform:translate(-50%,0); }
  .paper{ border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-top:10px; cursor:pointer; transition:border-color .2s; }
  .paper.selected{ border-color:#0F0F0F; box-shadow:0 0 0 1px #0F0F0F inset; }
  .paper-name{ font-weight:600; font-size:15px; color:var(--ink-900); margin-bottom:8px; }
  .prow{ display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--silver); }
  .prow b{ color:var(--ink-800); font-weight:500; text-align:right; }
  .qlabel{ font-size:13px; font-weight:600; color:var(--ink-900); margin-top:16px; }
  .qhint{ font-size:12px; color:var(--silver); margin-top:2px; }
  .ph{ position:absolute; inset:0; background:#EDEBE6; display:flex; align-items:center; justify-content:center; }
  .ph svg{ opacity:.28; }

  .btn-ghost{
    position:relative; color:var(--ink-900); font-weight:600;
    background:#FFFFFF;
    border:1px solid rgba(15,15,15,.14);
    box-shadow:none;
    cursor:pointer; transition: color .25s, border-color .25s, transform .25s, box-shadow .3s;
  }
  .btn-ghost:hover, .btn-ghost:active{ color:#5E2FE0; border-color:rgba(136,88,248,.35); transform:translateY(-1px); }
  .btn-ghost:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

  .chip{
    position:relative; display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
    border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink-800);
    background:#FFFFFF;
    border:1px solid rgba(15,15,15,.1);
    box-shadow:none;
    white-space:nowrap; user-select:none;
  }
  .chip-violet{ background:var(--violet-soft); color:var(--violet-deep); border-color:transparent; box-shadow:none; }
  .chip-dark{
    color:#FFFFFF; border-color:rgba(255,255,255,.25);
    background:#7A47F0; border-color:#7A47F0; box-shadow:none;
  }
  .chip-btn{ cursor:pointer; transition: transform .2s, box-shadow .2s, color .2s, border-color .2s; }
  .chip-btn:hover, .chip-btn:active{ transform:translateY(-1px); color:var(--violet-deep); border-color:rgba(136,88,248,.35); }

  .ai-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--violet-soft); color:var(--violet-deep); font-size:11px; font-weight:600; white-space:nowrap; }
  .dropdown{ position:relative; cursor:pointer; }
  .dropdown svg.chev{ transition:transform .2s; }
  .dropdown.open svg.chev{ transform:rotate(180deg); }
  .dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 20px 40px -20px rgba(15,15,15,.25); display:none; z-index:60; }
  .dropdown.open .dropdown-menu{ display:block; }
  .dropdown-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:10px; font-size:13px; color:var(--ink-800); }
  .dropdown-item.disabled{ color:var(--silver); cursor:not-allowed; }
  .dropdown-item:not(.disabled):hover{ background:var(--bone); cursor:pointer; }

  .autocomplete-wrap{ position:relative; }
  .autocomplete-list{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:70;
    background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px;
    box-shadow:0 20px 40px -20px rgba(15,15,15,.3); display:none; max-height:220px; overflow-y:auto;
  }
  .autocomplete-list.open{ display:block; }
  .autocomplete-item{ padding:9px 10px; border-radius:10px; font-size:13px; color:var(--ink-800); cursor:pointer; }
  .autocomplete-item:hover, .autocomplete-item.active{ background:var(--violet-soft); color:var(--violet-deep); }

  #identityGrid{ transition: opacity .5s ease; }
  .ai-generated{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#8858F8 0%,#5E2FE0 45%,#0F0F0F 100%); }
  .ai-generated svg{ opacity:.9; }

  .card{
    position:relative; border:1px solid var(--line); background:#FFFFFF;
    border-radius:20px; transition: border-color .35s, box-shadow .35s, transform .35s;
  }
  .card:hover{ border-color:#CFC2F5; }

  /* ---------- login ---------- */
  .login-screen{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:var(--bone);
  }
  .login-screen.hidden{ display:none; }
  .login-card, .signup-card{ width:100%; max-width:600px; padding:0 24px; }
  .signup-step{ display:none; }
  .signup-step.active{ display:block; animation:stepIn .35s ease; }
  .spinner-ring{
    width:34px; height:34px; border-radius:999px; border:3px solid var(--line);
    border-top-color:var(--violet-deep); animation:spin 0.8s linear infinite; margin:0 auto;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .dossier{ font-size:13px; line-height:1.5; color:var(--ink-900); }
  .dossier .d-sec{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .dossier .d-h{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--silver); margin-bottom:6px; }
  .dossier .d-strong{ font-weight:600; }
  .dossier .d-muted{ color:var(--silver); font-size:12px; }
  .dossier .d-list{ list-style:disc; padding-left:18px; margin:4px 0; }
  .dossier .d-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
  .dossier .d-chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; border:1px solid var(--line); margin:2px 4px 2px 0; }
  .dossier a{ color:inherit; text-decoration:underline; }
  .dossier .d-pick{ display:block; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--line); border-radius:12px; margin-top:6px; cursor:pointer; background:#fff; color:var(--ink-900); }
  .dossier > .d-sec:first-child{ border-top:none; margin-top:0; padding-top:0; }
  .dossier-dark, .dossier-dark .dossier{ color:#fff; }
  .dossier-dark .d-sec{ border-top-color:rgba(255,255,255,.15); }
  .dossier-dark .d-h, .dossier-dark .d-muted{ color:rgba(255,255,255,.55); }
  .dossier-dark .d-chip{ border-color:rgba(255,255,255,.25); }
  .login-screen{ overflow-y:auto; }
  .signup-card, .login-card{ margin:auto; padding-top:40px; padding-bottom:40px; }
  .login-input{
    width:100%; margin-top:6px; padding:12px 14px; border-radius:14px; border:1px solid var(--line);
    background:#fff; font-size:14px; color:var(--ink-900);
  }

  /* ---------- app shell ---------- */
  .topbar{
    position:sticky; top:0; z-index:40; height:68px; display:flex; align-items:center;
    padding:0 22px; border-bottom:1px solid var(--line);
    background:#FFFFFF;
  }
  a.wordmark{ text-decoration:none; }
  .wordmark{ font-family:'Clash Display',sans-serif; font-weight:600; font-size:21px; letter-spacing:-0.02em; color:var(--ink-900); }
  .progressline{ position:fixed; top:0; left:0; height:2.5px; background:#7A47F0; z-index:50; transition:width .5s cubic-bezier(.2,1,.3,1); width:0%; }

  .shell{ display:flex; max-width:1240px; margin:0 auto; }
  .sidebar{ width:250px; flex-shrink:0; padding:28px 14px 28px 6px; position:sticky; top:68px; align-self:flex-start; height:calc(100vh - 68px); overflow-y:auto; }
  .appnav-item{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; cursor:pointer;
    transition: background .2s, opacity .2s; color:var(--ink-700);
  }
  .appnav-item:hover, .appnav-item:active{ background:rgba(136,88,248,.06); }
  .appnav-item.active{ background:var(--violet-soft); color:var(--violet-deep); }
  .appnav-item span{ font-size:13.5px; font-weight:600; }
  .appnav-item svg{ flex-shrink:0; }
  .appnav-item.primary{
    color:#fff;
    background:#0F0F0F;
    margin-bottom:6px;
  }
  .appnav-item.primary:hover, .appnav-item.primary:active{ background:#7A47F0; }
  .appnav-sep{ height:1px; background:var(--line); margin:14px 14px; }

  .stage{ flex:1; min-width:0; padding:36px 28px 60px 28px; }
  body.has-footer .stage{ padding-bottom:120px; }
  .example-chip{ cursor:pointer; }
  .view{ display:none; animation: stepIn .4s cubic-bezier(.2,1,.3,1); }
  .view.active{ display:block; }
  .flowstep{ display:none; }
  .flowstep.active{ display:block; }
  @keyframes stepIn{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

  .eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-deep); }
  h1.step-title{ font-size:32px; font-weight:600; letter-spacing:-0.02em; color:var(--ink-900); margin-top:6px; }
  p.step-sub{ font-size:15px; color:var(--muted); margin-top:8px; max-width:640px; line-height:1.5; }

  .flow-stepper{ display:flex; align-items:center; gap:6px; margin:22px 0 30px; flex-wrap:wrap; }
  .flow-dot{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--bone); border:1px solid var(--line); }
  .flow-dot .num{ width:22px; height:22px; border-radius:999px; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ink-700); flex-shrink:0; }
  .flow-dot.active{ background:var(--violet-soft); border-color:transparent; }
  .flow-dot.active .num{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
  .flow-dot.done .num{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
  .flow-dot .lbl{ font-size:12px; font-weight:600; color:var(--ink-800); }
  .flow-sep{ width:14px; height:1px; background:var(--line); }

  .footerbar{
    position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:#FFFFFF;
    border-top:1px solid var(--line);
  }
  .footerbar.hidden{ display:none; }
  .footerbar-inner{ max-width:1240px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; }

  .thumb{ position:relative; border-radius:16px; overflow:hidden; background:var(--bone); border:1px solid var(--line); aspect-ratio:4/5; }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .thumb-tag{ position:absolute; top:8px; left:8px; }
  .thumb-check{ position:absolute; bottom:8px; right:8px; width:24px; height:24px; border-radius:999px; background:var(--ink-900); color:#fff; display:flex; align-items:center; justify-content:center; }

  .checklist-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
  .checklist-item:last-child{ border-bottom:none; }
  .check-dot{ width:20px; height:20px; border-radius:999px; border:1.5px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s; }
  .check-dot.done{ background:var(--ink-900); border-color:var(--ink-900); }

  .tracklog{ border-left:2px solid var(--line); margin-left:9px; padding-left:20px; }
  .tracklog-item{ position:relative; padding-bottom:20px; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
  .tracklog-item.show{ opacity:1; transform:translateY(0); }
  .tracklog-item::before{ content:""; position:absolute; left:-25px; top:2px; width:10px; height:10px; border-radius:999px; background:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
  .tracklog-time{ font-size:11.5px; color:var(--silver); font-weight:600; }
  .tracklog-text{ font-size:14px; color:var(--ink-800); margin-top:1px; }

  input[type=checkbox]{ accent-color:#7A47F0; color:#7A47F0; }
  input[type=text], input[type=email], input[type=password], textarea{ font-family:inherit; }
  textarea:focus, input:focus{ outline:none; box-shadow:0 0 0 3px var(--violet-soft); border-color:var(--violet); }

  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }

  .mobilenav{ display:none; }
  @media (max-width: 900px){
    .sidebar{ display:none; }
    .stage{ padding:24px 16px 60px; }
    .mobilenav{
      display:flex; gap:8px; overflow-x:auto; padding:10px 16px;
      border-bottom:1px solid var(--line); background:rgba(255,255,255,.92);
      position:sticky; top:68px; z-index:35;
    }
    .mobilenav .appnav-item{ flex-shrink:0; padding:8px 14px; }
    .mobilenav .appnav-item span{ font-size:12.5px; }
  }

  /* ---------- écrans d'entrée : connexion, création, double authentification (proportionnés à l'écran) ---------- */
  .login-screen{ background:#FFFFFF; }
  .login-card, .signup-card{ max-width:clamp(560px, 44vw, 860px); }
  .login-screen .wordmark{ font-size:clamp(36px, 3.8vw, 68px); }
  .login-screen .card{ padding:clamp(28px, 3.4vw, 64px); border-radius:clamp(28px, 2.4vw, 40px); }
  .login-screen .card:hover{ border-color:var(--line); }
  .login-screen .card > .text-lg{ font-size:clamp(26px, 2.5vw, 46px); line-height:1.12; letter-spacing:-.02em; }
  .login-screen p{ font-size:clamp(16px, 1.15vw, 21px); line-height:1.5; }
  .login-screen label{ font-size:clamp(12.5px, .85vw, 15px); }
  .login-screen .login-input{ height:clamp(56px, 3.9vw, 76px); margin-top:8px; padding:0 clamp(22px, 1.6vw, 32px); border-radius:999px; font-size:clamp(16px, 1.15vw, 21px); }
  .login-screen .btn-primary{ height:clamp(56px, 3.9vw, 76px); padding:0 24px; font-size:clamp(16px, 1.15vw, 21px); }
  .login-screen .choice{ padding:clamp(11px, .8vw, 16px) clamp(18px, 1.3vw, 26px); font-size:clamp(15px, 1vw, 19px); }
  .login-screen .text-xs, .login-screen .text-sm{ font-size:clamp(14px, 1vw, 19px); }
  .gate-legal a{ color:var(--violet-deep); text-decoration:underline; text-underline-offset:3px; }
  .lang-switch{ position:fixed; top:20px; right:24px; z-index:300; }
  .lang-switch.hidden{ display:none; }
  .lang-switch > button{ display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--ink-900); cursor:pointer; transition:color .2s, border-color .2s; }
  .lang-switch > button:hover, .lang-switch > button:active, .lang-switch.open > button{ color:#7A47F0; border-color:#7A47F0; }
  .lang-switch ul{ position:absolute; right:0; top:calc(100% + 8px); min-width:150px; list-style:none; padding:6px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px -24px rgba(15,15,15,.3); }
  .lang-switch ul[hidden]{ display:none; }
  .lang-switch li button{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:10px; font-size:14px; background:none; border:0; cursor:pointer; color:var(--ink-900); }
  .lang-switch li button:hover, .lang-switch li button:active{ background:var(--violet-soft); color:#5E2FE0; }
  .lang-switch li button[aria-current]{ font-weight:700; }