:root{
  --bg:#0b1220; --bg2:#0f1a2e; --card:#13203a; --card2:#182a49;
  --line:rgba(255,255,255,.09);
  --txt:#eaf1ff; --mut:#9fb0cc; --dim:#6f83a3;
  --accent:#3d8bff; --accent2:#31d0aa;
  --warn:#ffb23e; --danger:#ff6b5b;
  --radius:18px;
  --shadow:0 12px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(61,139,255,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(49,208,170,.12), transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
}
#app{max-width:560px; margin:0 auto; padding:0 16px 40px; min-height:100vh}

/* Barre du haut */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px 8px; position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg), rgba(11,18,32,.6) 70%, transparent);
  backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:9px}
.logo{font-size:24px}
.brand-name{font-weight:800; font-size:20px; letter-spacing:.3px}
.icon-btn{
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  width:42px; height:42px; border-radius:12px; font-size:18px; cursor:pointer;
}
.icon-btn:active{transform:scale(.94)}

/* Écrans */
.screen{animation:fade .25s ease}
.hidden{display:none !important}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Accueil */
.hero{padding:18px 6px 6px}
.hero h1{font-size:27px; line-height:1.15; margin:0 0 10px; font-weight:800}
.sub{color:var(--mut); font-size:15px; line-height:1.5; margin:0}

.ask-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin:18px 0 16px; box-shadow:var(--shadow);
}
textarea{
  width:100%; background:rgba(0,0,0,.22); border:1px solid var(--line);
  border-radius:12px; color:var(--txt); font-size:16px; padding:13px;
  resize:vertical; font-family:inherit; line-height:1.45;
}
textarea:focus{outline:none; border-color:var(--accent)}

.btn{
  border:none; border-radius:13px; font-size:15px; font-weight:700;
  padding:13px 18px; cursor:pointer; color:#fff; font-family:inherit;
  transition:transform .08s, filter .15s;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(120deg,var(--accent),#5f6dff)}
.btn.big{width:100%; margin-top:12px; font-size:16px; padding:15px}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--txt)}
.btn.block{width:100%}

/* Chips exemples */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:4px 2px}
.chip{
  background:var(--card); border:1px solid var(--line); color:var(--mut);
  padding:9px 13px; border-radius:999px; font-size:13.5px; cursor:pointer;
}
.chip:active{transform:scale(.96); border-color:var(--accent); color:var(--txt)}

.quota-line{color:var(--dim); font-size:13px; text-align:center; margin-top:22px; line-height:1.9}
.quota-line b{color:var(--accent2)}
.quota-activate{display:inline-block; margin-top:4px; color:var(--accent); font-weight:600;
  border:1px solid rgba(61,139,255,.35); border-radius:999px; padding:6px 14px; cursor:pointer}
.quota-activate:active{transform:scale(.97)}

/* Retour + têtes de section */
.back{
  background:none; border:none; color:var(--mut); font-size:15px;
  padding:14px 2px; cursor:pointer; font-family:inherit;
}
.section-head{padding:0 6px 6px}
.section-head h2{font-size:23px; margin:8px 0 6px}
.pill{
  display:inline-block; background:rgba(61,139,255,.16); color:#9dc4ff;
  border:1px solid rgba(61,139,255,.3); padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; text-transform:capitalize;
}

/* Questions */
.q-item{
  background:var(--card); border:1px solid var(--line); border-radius:15px;
  padding:14px; margin:11px 0;
}
.q-item label{display:block; font-size:15px; font-weight:600; margin-bottom:9px; line-height:1.35}
.q-item input{
  width:100%; background:rgba(0,0,0,.22); border:1px solid var(--line);
  border-radius:10px; color:var(--txt); font-size:15.5px; padding:11px; font-family:inherit;
}
.q-item input:focus{outline:none; border-color:var(--accent)}

/* Résultat */
#result-body{padding:0 2px}
.r-title{font-size:22px; margin:6px 0 4px; font-weight:800}
.r-resume{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:15px; padding:15px;
  font-size:15.5px; line-height:1.55; margin:10px 0 20px; color:var(--txt);
}
.block-title{
  display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800;
  margin:22px 0 12px;
}
.block-title .ic{font-size:19px}

.cause{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:13px 14px; margin:10px 0;
}
.cause.high{border-left-color:var(--danger)}
.cause.mid{border-left-color:var(--warn)}
.cause.low{border-left-color:var(--dim)}
.cause h4{margin:0 0 6px; font-size:15.5px; display:flex; justify-content:space-between; gap:10px; align-items:center}
.cause p{margin:0; color:var(--mut); font-size:14px; line-height:1.5}
.prob{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap}
.prob.high{background:rgba(255,107,91,.15); color:#ff9b90}
.prob.mid{background:rgba(255,178,62,.15); color:#ffca77}
.prob.low{background:rgba(111,131,163,.18); color:#a9b8d0}

ol.steps{margin:0; padding:0; counter-reset:s; list-style:none}
ol.steps li{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:13px 14px 13px 46px; margin:9px 0;
  font-size:14.5px; line-height:1.5; color:var(--txt);
}
ol.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:12px; top:12px; width:24px; height:24px;
  background:linear-gradient(120deg,var(--accent),#5f6dff); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}

.taglist{display:flex; flex-wrap:wrap; gap:8px}
.tag{background:var(--card2); border:1px solid var(--line); color:var(--mut);
  padding:8px 12px; border-radius:10px; font-size:13.5px}

.safety{
  background:rgba(255,178,62,.09); border:1px solid rgba(255,178,62,.32);
  border-radius:12px; padding:13px 14px; margin:10px 0; font-size:14px;
  line-height:1.5; color:#ffd79a;
}
.diff-badge{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mut); margin:4px 0 2px}
.dot{width:10px; height:10px; border-radius:50%}
.dot.facile{background:var(--accent2)} .dot.moyen{background:var(--warn)}
.dot.difficile{background:var(--danger)} .dot.pro{background:var(--danger)}

/* Liens de recherche */
.search-group{margin:12px 0}
.search-q{font-size:14px; color:var(--txt); font-weight:600; margin:0 0 8px}
.links{display:flex; flex-wrap:wrap; gap:8px}
.link{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:10px 13px; border-radius:11px; font-size:13.5px; font-weight:600;
}
.link:active{transform:scale(.97)}
.link.yt{border-color:rgba(255,80,80,.4)}
.link.gg{border-color:rgba(61,139,255,.4)}
.link.fo{border-color:rgba(49,208,170,.4)}

.r-actions{display:flex; gap:10px; margin:24px 0 8px}
.r-actions .btn{flex:1}

.empty{color:var(--mut); text-align:center; padding:26px 10px; font-size:15px; line-height:1.5}

/* Loader */
.loader{
  position:fixed; inset:0; background:rgba(8,13,24,.86); backdrop-filter:blur(4px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:30;
}
.spinner{width:46px; height:46px; border-radius:50%;
  border:4px solid rgba(255,255,255,.14); border-top-color:var(--accent);
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loader-text{color:var(--mut); margin-top:16px; font-size:15px}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:#1b2842; border:1px solid var(--line); color:var(--txt);
  padding:12px 18px; border-radius:12px; font-size:14px; z-index:40;
  box-shadow:var(--shadow); max-width:90%; text-align:center;
}

/* Feuilles (réglages / paywall / vendeur) */
.sheet-back{position:fixed; inset:0; background:rgba(4,8,16,.6); backdrop-filter:blur(3px);
  z-index:50; display:flex; align-items:flex-end; justify-content:center; animation:fade .2s}
.sheet{
  background:var(--bg2); border:1px solid var(--line);
  border-radius:20px 20px 0 0; width:100%; max-width:560px;
  padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:90vh; overflow:auto; box-shadow:0 -14px 40px rgba(0,0,0,.5);
  animation:up .28s ease}
@keyframes up{from{transform:translateY(40px)} to{transform:none}}
.sheet h3{margin:0 0 6px; font-size:19px}
.sheet .hint{color:var(--mut); font-size:14px; line-height:1.5; margin:6px 0}
.field{display:block; margin:14px 0}
.field .lab{display:block; font-size:13.5px; color:var(--mut); margin-bottom:7px}
.field input, .field textarea, .field select{
  width:100%; background:rgba(0,0,0,.25); border:1px solid var(--line);
  border-radius:11px; color:var(--txt); font-size:15px; padding:12px; font-family:inherit}
.field textarea{min-height:90px; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent)}
.btn-row{display:flex; gap:10px; margin-top:16px}
.btn-row .btn{flex:1}
.spacer{height:12px}
.devbox{background:rgba(0,0,0,.28); border:1px dashed var(--line); border-radius:11px;
  padding:12px; font-family:ui-monospace,monospace; letter-spacing:1px; font-size:15px;
  text-align:center; cursor:pointer; color:var(--accent2)}
.result{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:12px; font-size:14px; line-height:1.5}
.radio-row{display:flex; gap:10px; margin:10px 0}
.radio-row label{flex:1; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:11px; font-size:14px; cursor:pointer}
.radio-row input{display:none}
.radio-row input:checked + span{color:var(--accent); font-weight:700}
.version-line{text-align:center; color:var(--dim); font-size:12.5px; margin-top:18px; user-select:none}
a.help-link{color:var(--accent); font-size:13.5px; text-decoration:none; display:inline-block; margin-top:6px}
.eye{background:none;border:none;color:var(--mut);cursor:pointer;font-size:16px}