:root{
  --primary:#1B4F72; --accent:#2874A6; --light:#D6EAF8; --zebra:#F4F9FD;
  --ifd:#1E8449; --dev:#CA6F1E; --adr:#B03A2E;
  --key-bg:#FDF2E9; --key-bd:#CA6F1E;
  --warn-bg:#FDEDEC; --warn-bd:#B03A2E;
  --info-bg:#EBF5FB; --info-bd:#2874A6;
  --grey:#5D6D7E; --bg:#F7FAFC; --card:#FFFFFF; --line:#E2E8F0;
  --radius:12px;
  --hdr1:#154360; --hdr2:#1B4F72; --hdr3:#21618C;
}
body[data-tab="pharma"]{
  --primary:#0E6655; --accent:#16A085; --light:#D0ECE7; --zebra:#F2FBF9;
  --info-bg:#E8F8F5; --info-bd:#16A085; --key-bg:#E8F8F5; --key-bd:#117A65;
  --bg:#F5FBFA; --hdr1:#0B5345; --hdr2:#117A65; --hdr3:#148F77;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,Calibri,sans-serif;background:var(--bg);color:#212F3D;line-height:1.5;transition:background .3s;padding-bottom:env(safe-area-inset-bottom)}

header{background:linear-gradient(135deg,var(--hdr1),var(--hdr2) 55%,var(--hdr3));color:#fff;padding:18px 20px 0;transition:background .3s}
header .inner{max-width:940px;margin:0 auto}
header h1{font-size:1.15rem;font-weight:700;letter-spacing:.2px}
header .sub{opacity:.82;font-size:.76rem;margin-top:3px}
.tabbar{display:flex;gap:6px;margin-top:14px}
.tab{border:none;background:rgba(255,255,255,.14);color:#fff;padding:10px 18px;font-size:.86rem;font-weight:600;cursor:pointer;border-radius:10px 10px 0 0;opacity:.8;display:flex;align-items:center;gap:7px}
.tab:hover{opacity:1;background:rgba(255,255,255,.22)}
.tab.active{background:var(--bg);color:var(--primary);opacity:1}
.tab .ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

.wrap{max-width:940px;margin:0 auto;padding:0 16px 70px}
.view{display:none}
.view.on{display:block}

/* ---- barre de progression ---- */
.steps{display:flex;gap:6px;margin:18px 0 4px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.done{background:var(--accent)}
.crumb{font-size:.74rem;color:var(--grey);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:18px}
.crumb b{color:var(--primary);font-weight:600}
.steps:empty,.crumb:empty{display:none;margin:0;min-height:0}
.crumb span.sep{opacity:.45}

/* ---- questions ---- */
.qtitle{font-size:1.28rem;color:var(--primary);font-weight:700;margin:6px 0 4px;line-height:1.25}
.qaide{font-size:.84rem;color:var(--grey);margin-bottom:16px}
.opts{display:grid;gap:9px}
.opt{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s;display:block;width:100%}
.opt:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(27,79,114,.10);transform:translateY(-1px)}
.opt .ol{font-weight:700;color:var(--primary);font-size:.98rem}
.opt .os{font-size:.8rem;color:var(--grey);margin-top:2px}
.opt.danger .ol{color:var(--adr)}
.opt.danger:hover{border-color:var(--adr)}
.opt.sel{border-color:var(--accent);background:var(--info-bg)}

/* ---- boutons ---- */
.btn{border:1.5px solid #CBD5E0;background:#fff;border-radius:999px;padding:9px 16px;font-size:.84rem;cursor:pointer;color:var(--primary);font-weight:600;font-family:inherit}
.btn:hover{border-color:var(--accent);background:var(--info-bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--primary);border-color:var(--primary)}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;align-items:center}
.btnrow .spacer{flex:1}

/* ---- recherche ---- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 6px}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid #CBD5E0;border-radius:999px;font-size:16px;background:#fff;outline:none;font-family:inherit}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(40,116,166,.16)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--grey);fill:none;stroke-width:2}

/* ---- grille syndromes ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px;margin-top:12px}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:13px 15px;cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s;text-align:left;font:inherit;color:inherit;position:relative}
.card:hover{box-shadow:0 6px 18px rgba(27,79,114,.12);transform:translateY(-2px);border-color:var(--accent)}
.card .n{font-size:.66rem;font-weight:700;color:var(--accent);letter-spacing:.5px}
.card h3{font-size:.9rem;color:var(--primary);margin:3px 0 5px;line-height:1.3}
.card p{font-size:.74rem;color:var(--grey)}
.card.hide{display:none}
.card.reco::after{content:'suggéré';position:absolute;top:9px;right:10px;font-size:.6rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);background:var(--info-bg);border:1px solid var(--light);border-radius:999px;padding:1px 7px}
.subhead{font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--grey);margin:20px 2px 2px}

/* ---- tags plateau ---- */
.tag{display:inline-block;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px}
.tag.ifd{background:#E8F6EE;color:var(--ifd);border:1px solid #A9DFBF}
.tag.dev{background:#FDF2E9;color:var(--dev);border:1px solid #F0B27A}
.tag.adr{background:#FDEDEC;color:var(--adr);border:1px solid #E6A39C}
.tag.amm{background:#FEF9E7;color:#9A7D0A;border:1px solid #F7DC6F}
.tag.test{background:#EEF3F8;color:var(--primary);border:1px solid #C6D6E4}
.btn.small{padding:5px 12px;font-size:.76rem;margin-top:8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--grey);margin:12px 0 4px;align-items:center}

/* ---- check-list ---- */
.chk{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 15px;margin-bottom:8px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:border-color .12s,background .12s}
.chk:hover{border-color:var(--accent)}
.chk.on{background:var(--zebra);border-color:var(--accent)}
.chk .box{flex:0 0 21px;height:21px;border:2px solid #B7C3CE;border-radius:6px;margin-top:1px;position:relative;transition:.12s}
.chk.on .box{background:var(--accent);border-color:var(--accent)}
.chk.on .box::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.chk .lvl{font-size:.63rem;font-weight:800;color:#fff;background:var(--accent);border-radius:5px;padding:2px 6px;letter-spacing:.3px}
.chk .txt{flex:1;font-size:.9rem}
.chk .txt .g{font-weight:600;color:var(--primary)}
.chk .txt .dd{font-size:.78rem;color:var(--grey);margin-top:3px}
.chk ul{margin:5px 0 0 16px;font-size:.8rem;color:var(--grey)}
.chk li{margin:1px 0}
.chk .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- verdict ---- */
.vhero{background:var(--card);border:1.5px solid var(--accent);border-top:5px solid var(--accent);border-radius:var(--radius);padding:20px 22px;margin:8px 0 14px;box-shadow:0 6px 22px rgba(27,79,114,.09)}
.vhero .kicker{font-size:.7rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--accent)}
.vhero h2{font-size:1.5rem;color:var(--primary);line-height:1.22;margin:6px 0 8px}
.vhero .meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--grey)}
.vhero .lvlbig{font-size:.7rem;font-weight:800;color:#fff;background:var(--primary);border-radius:6px;padding:3px 9px;letter-spacing:.4px}
.vhero .dd{font-size:.87rem;color:#3E5060;margin-top:11px;border-top:1px dashed var(--line);padding-top:11px}

.vhero.stop{border-color:var(--adr);border-top-color:var(--adr);background:var(--warn-bg)}
.vhero.stop h2,.vhero.stop .kicker{color:var(--adr)}
.vhero.fin{border-color:var(--dev);border-top-color:var(--dev)}
.vhero.fin h2,.vhero.fin .kicker{color:var(--dev)}

.blk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 17px;margin-bottom:11px}
.blk h4{font-size:.71rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--grey);margin-bottom:9px}
.blk ol,.blk ul{margin-left:17px;font-size:.86rem}
.blk li{margin:4px 0}
.blk li .lv{font-size:.62rem;font-weight:800;color:var(--grey);letter-spacing:.3px}
.blk.next{opacity:.72}
.blk.next .g{font-weight:600;color:var(--primary)}

.peage{background:var(--key-bg);border:1.5px solid var(--key-bd);border-left-width:5px;border-radius:var(--radius);padding:14px 17px;margin-bottom:11px}
.peage h4{font-size:.71rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--key-bd);margin-bottom:6px}
.peage p{font-size:.94rem;font-weight:600;color:#7E4A12}
.keymsg{background:var(--key-bg);border-left:5px solid var(--key-bd);border-radius:8px;padding:12px 16px;font-size:.87rem;margin:10px 0 14px}
.keymsg b.k{color:var(--key-bd)}
.stopbox{background:var(--warn-bg);border-left:5px solid var(--warn-bd);border-radius:8px;padding:12px 16px;font-size:.87rem;margin:10px 0 14px}
.alert{background:var(--warn-bg);border:1.5px solid var(--warn-bd);border-radius:var(--radius);padding:13px 16px;font-size:.86rem;margin:0 0 12px;display:flex;gap:11px;align-items:flex-start}
.alert .ai{flex:0 0 auto;font-size:1.1rem;line-height:1.2}
.alert b{color:var(--adr)}
.alert .btn{margin-top:8px}

/* ---- axes (3.12 / 3.14) ---- */
.axe{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:14px 17px;margin-bottom:10px}
.axe h4{font-size:.95rem;color:var(--primary)}
.axe .s{font-size:.77rem;color:var(--grey);margin-bottom:7px}
.axe ul{margin-left:17px;font-size:.86rem}
.axe li{margin:3px 0}

/* ---- mode B : arbre complet ---- */
.backbar{display:flex;align-items:center;gap:12px;margin:16px 0 10px;flex-wrap:wrap}
.backbar h2{font-size:1.1rem;color:var(--primary);flex:1;min-width:190px}
.pheno{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.pheno>summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;gap:10px;align-items:flex-start}
.pheno>summary::-webkit-details-marker{display:none}
.pheno>summary .pn{font-weight:700;color:var(--primary);font-size:.94rem}
.pheno>summary .pi{font-size:.78rem;color:var(--grey);margin-top:2px}
.pheno>summary .chev{margin-left:auto;color:var(--grey);transition:transform .2s;flex:0 0 auto}
.pheno[open]>summary .chev{transform:rotate(90deg)}
.pheno .pbody{padding:2px 16px 14px;border-top:1px dashed var(--line)}
.et{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid #F1F5F9}
.et:last-child{border-bottom:none}
.et .lvl{flex:0 0 auto;font-size:.63rem;font-weight:800;color:#fff;background:var(--accent);border-radius:5px;padding:2px 6px;margin-top:2px;letter-spacing:.3px}
.et .g{font-weight:600;color:var(--primary);font-size:.89rem}
.et .dd{font-size:.79rem;color:var(--grey);margin-top:3px}
.et .pg{font-size:.79rem;color:#7E4A12;background:var(--key-bg);border-left:3px solid var(--key-bd);border-radius:4px;padding:5px 9px;margin-top:5px}
.socle{background:var(--info-bg);border:1px solid var(--light);border-radius:var(--radius);padding:13px 16px;margin-bottom:10px}
.socle h4{font-size:.83rem;color:var(--primary);margin-bottom:5px}
.socle ul{margin-left:17px;font-size:.84rem;color:#3E5060}

/* ---- mémo molécules ---- */
.clshead{display:flex;align-items:center;gap:10px;margin:22px 2px 8px}
.clsdot{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.clshead h2{font-size:1.02rem;color:var(--primary)}
.mol{background:var(--card);border:1px solid var(--line);border-left-width:5px;border-radius:var(--radius);margin-bottom:9px;overflow:hidden;scroll-margin-top:16px}
.mol>summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:center;padding:13px 16px}
.mol>summary::-webkit-details-marker{display:none}
.mol .mname{font-weight:700;color:var(--primary);font-size:.94rem}
.mol .mind{font-size:.77rem;color:var(--grey)}
.mol>summary .chev{margin-left:auto;color:var(--grey);transition:transform .2s;flex:0 0 auto}
.mol[open]>summary .chev{transform:rotate(90deg)}
.mol .mbody{padding:6px 16px 16px;border-top:1px dashed var(--line)}
.mlabel{font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin:12px 0 6px}
.cresc{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px}
.cpill{background:var(--zebra);border:1.5px solid var(--light);border-radius:10px;padding:8px 12px;min-width:118px;display:flex;flex-direction:column;justify-content:center}
.cpill .cp-k{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);font-weight:700}
.cpill .cp-v{font-size:.85rem;font-weight:700;color:#1A2B3C;margin-top:2px}
.cpill.start{border-color:var(--accent)}
.cpill.target{background:var(--info-bg);border-color:var(--accent)}
.cpill .cmax{font-size:.67rem;color:var(--adr);font-weight:700;margin-top:2px}
.cgap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:0 2px}
.cgap .cdelay{font-size:.64rem;font-weight:700;color:var(--dev);background:var(--key-bg);border:1px solid #F0C88A;border-radius:999px;padding:1px 8px;white-space:nowrap;margin-bottom:2px;text-align:center}
.cgap .cak{font-size:1.05rem;color:var(--accent);font-weight:800;line-height:1}
.vig{font-size:.83rem;background:#FBFCFD;border:1px solid #EAEFF3;border-radius:8px;padding:9px 13px}
.mol.flash{animation:flash 1.4s ease}
@keyframes flash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 4px rgba(22,160,133,.28)}}

.footer{margin-top:32px;font-size:.7rem;color:var(--grey);border-top:1px solid var(--line);padding-top:12px}
.hint{font-size:.77rem;color:var(--grey);margin:14px 2px 0;font-style:italic}
.empty{font-size:.86rem;color:var(--grey);padding:18px 2px}

@media (max-width:560px){
  header{padding:14px 14px 0}
  header h1{font-size:1.02rem}
  .tab{padding:9px 13px;font-size:.79rem}
  .wrap{padding:0 13px 60px}
  /* la fil d'Ariane reste sur une ligne, scrollable, pour ne pas manger l'écran */
  .crumb{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .crumb::-webkit-scrollbar{display:none}
  .qtitle{font-size:1.14rem}
  .vhero{padding:17px 16px}
  .vhero h2{font-size:1.24rem}
  .grid{grid-template-columns:1fr}
}
@media print{
  .toolbar,.tabbar,.btnrow,.steps,.btn{display:none}
  body{background:#fff}
  .view{display:block!important}
  .pheno .pbody{display:block!important}
}