:root{
  --fond:#e3e8e6;--creux:#dde3e0;--ombre:#b5bfba;--lumiere:#ffffff;--ombre-creux:#bcc5c1;--contour:rgba(17,20,22,.50);
  --texte:#111416;--texte-2:#454b50;--libelle:#3f454a;
  --vert-t:#1d6b28;--orange-t:#9c3a15;--rouge-t:#a11f1b;
  --vert-p:#23802f;--orange-p:#b8431f;--rouge-p:#b02a25;--gris-p:#4d565b;
  --point:#3caa46;
  --relief:5px 5px 12px var(--ombre),-5px -5px 12px var(--lumiere);
  --relief-s:3px 3px 7px var(--ombre),-3px -3px 7px var(--lumiere);
  --enfonce:inset 4px 4px 9px var(--ombre-creux),inset -4px -4px 9px var(--lumiere);
}
*{box-sizing:border-box}
html{font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texte);background:var(--fond);-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
/* bandeau : surface en relief, plus de fond noir */
.band{margin:12px 16px 0;padding:10px 16px;border-radius:18px;background:var(--fond);box-shadow:var(--relief);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.brand{font-weight:800;letter-spacing:.03em;font-size:14px}.brand .g{color:var(--vert-t)}.brand .o{color:var(--orange-t)}
.ed{font-size:11px;color:var(--texte-2)}
.band a{color:var(--texte);font-size:12px}
.ed-tab{display:none}
/* onglets : boutons en relief, l'actif en creux avec un point vert */
.tabs{display:flex;gap:10px;padding:14px 16px 0}
.tabs button{flex:1;padding:11px 4px;border:0;border-radius:20px;background:var(--fond);box-shadow:var(--relief);font:600 13px system-ui,sans-serif;color:var(--texte-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--creux);box-shadow:var(--enfonce);color:var(--vert-t);font-weight:700}
.tabs button[aria-selected="true"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--point);margin-right:8px;vertical-align:1px}
main{flex:1;padding:12px 16px 20px;max-width:640px;width:100%;margin:0 auto}
.rail ~ main{display:flex;flex-direction:column}
main h1{font-size:18px;margin:0 0 12px}
.tab[hidden]{display:none}
.k{display:block;font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);margin:12px 0 6px}
input,select{width:100%;border:1px solid var(--contour);border-radius:16px;background:var(--creux);box-shadow:var(--enfonce);font:16px system-ui,sans-serif;padding:9px 12px;color:var(--texte);-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233f454a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:34px}
/* Le focus doit rester visible : l'onglet Écrasable se parcourt au clavier. */
:focus-visible{outline:2px solid var(--vert-t);outline-offset:2px}
.row{display:flex;gap:16px}.row>div{flex:1}
.combo{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--fond);border-radius:16px;box-shadow:var(--relief);z-index:2;max-height:50vh;overflow:auto}
.suggest li{padding:10px 12px;border-radius:10px;cursor:pointer}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--creux);box-shadow:var(--enfonce)}
.suggest .vide,.suggest .vide:hover{background:none;box-shadow:none;color:var(--texte-2);cursor:default;font-size:13px;margin:0}
.suggest small,.list small,.sel small{display:block;color:var(--texte-2);font-size:12px}
.sel{padding:8px 0;font-weight:700}
.res{margin-top:14px}
.res:empty{display:none}
/* tuiles de résultat */
.tile{padding:14px 16px;border-radius:22px;background:var(--fond);box-shadow:var(--relief)}
.tile+.tile{margin-top:14px}
.tk{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);margin:0}
.tn{font-size:28px;font-weight:800;line-height:1.1;color:var(--vert-t);margin:4px 0 0}
.tv{font-size:16px;font-weight:700;line-height:1.2;color:var(--vert-t);margin:4px 0 0}
.tv.orange{color:var(--orange-t)}.tv.gris{color:var(--texte-2)}
.tile.orange .tn{color:var(--orange-t)}.tile.rouge .tn{color:var(--rouge-t)}
.ts{font-size:13px;color:var(--texte-2);margin:3px 0 0}
.tile .st{margin-bottom:6px}
/* pastilles de statut : seul élément plein et saturé de l'écran */
.st{display:inline-block;font:800 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;padding:5px 10px;border-radius:14px;white-space:nowrap;box-shadow:var(--relief-s)}
.st.vert{background:var(--vert-p)}.st.orange{background:var(--orange-p)}.st.rouge{background:var(--rouge-p)}.st.gris{background:var(--gris-p)}
.list{margin:0;padding:0;list-style:none}
.list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;margin-top:10px;border-radius:16px;background:var(--fond);box-shadow:var(--relief);cursor:pointer}
.list-t{display:none}
.detail{margin-top:12px;padding:14px 16px;border-radius:22px;background:var(--fond);box-shadow:var(--relief);font-size:14px}
.detail dt{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);margin-top:8px}
.detail dd{margin:0}
.note{font-size:12px;color:var(--texte-2);margin:12px 0 0}
.err{font-size:15px;color:var(--texte);margin:12px 0;padding:12px 16px;border-radius:16px;background:var(--creux);box-shadow:var(--enfonce)}
.cpt{font-size:12px;color:var(--texte-2);margin:8px 0 0}
.cpt:empty{display:none}
.cpt-t{display:none}
.leg{font-size:11px;color:var(--texte-2);margin-top:18px;padding-top:8px}
.leg .nv{color:var(--orange-t);font-weight:700}
.avert{font-size:11px;color:var(--texte-2);padding:12px 16px 18px;max-width:640px;width:100%;margin:0 auto}
.avert a{color:var(--texte);margin-left:8px}
/* blocs du rail et fiche : masqués sur téléphone, mis en page en trois colonnes plus bas */
.rb{display:none}
.fiche{display:none}
.rt{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--libelle);margin:0}
.rl{font-size:11px;line-height:1.35;margin:8px 0 0;color:var(--texte-2)}.rl b{color:var(--texte)}
.rv{color:var(--vert-t);font-weight:700}
.rnv{color:var(--orange-t);font-weight:700}
.rg{font-size:11px;color:var(--texte-2);margin:5px 0 0}
.rtags{margin:8px 0 0}
.rtags .st{margin:0 3px 3px 0}
.fnom{font-weight:800;font-size:15px;margin:12px 0 0}
.fiche dl{margin:8px 0 0}
.fiche dt{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);margin-top:12px}
.fiche dd{margin:3px 0 0;font-size:13px;overflow-wrap:break-word}
.vide{font-size:13px;color:var(--texte-2);margin:12px 0 0}
.amb{color:var(--texte-2)}
/* derniers produits consultés : bas de la zone centrale */
.recents{padding-top:22px}
.recents[hidden]{display:none}
.recents .rt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.recents .rt button{border:0;background:none;padding:0;font:600 11px system-ui,sans-serif;color:var(--texte-2);text-decoration:underline;cursor:pointer}
.recg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.rc{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:16px;background:var(--fond);box-shadow:var(--relief);cursor:pointer;font:inherit;color:var(--texte);min-height:64px;min-width:0}
.rc.on{background:var(--creux);box-shadow:var(--enfonce)}
.rc .n,.rc .s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc .n{font-weight:700;font-size:13px}
.rc .s{font-size:11px;color:var(--texte-2);margin-top:2px}
.rc .s .vert{color:var(--vert-t);font-weight:700}.rc .s .orange{color:var(--orange-t);font-weight:700}.rc .s .rouge{color:var(--rouge-t);font-weight:700}
.rc .t{display:block;font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);margin-top:6px}
/* dose prescrite -> gouttes */
.dose{margin-top:14px;padding:14px 16px;border-radius:22px;background:var(--fond);box-shadow:var(--relief)}
.dose[hidden]{display:none}
.dose .k{margin-top:0}
.dsuf{display:flex;align-items:center;gap:8px}
.dsuf input{max-width:160px}
.dsuf span{font-weight:700;color:var(--texte-2)}
.dose .tk{margin-top:12px}
.dose .big{font-size:26px;font-weight:800;color:var(--vert-t);line-height:1.1;margin:4px 0 0}
.dose .big.orange{color:var(--orange-t)}
.dose .ts .nonent{color:var(--orange-t);font-weight:700}
.dose table{border-collapse:separate;border-spacing:0;width:100%;margin-top:12px}
.dose th{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);text-align:left;padding:6px 10px 6px 8px}
.dose td{font-size:13px;padding:7px 10px 7px 8px;border-top:1px solid var(--ombre)}
.dose tr.on td{background:var(--creux);font-weight:800;color:var(--vert-t)}
.dose tr.on td:first-child{border-radius:10px 0 0 10px}.dose tr.on td:last-child{border-radius:0 10px 10px 0}
@media (min-width:700px){.band{margin:12px 24px 0;padding:12px 24px}}
@media (min-width:1100px){
  :root{--relief:7px 7px 16px var(--ombre),-7px -7px 16px var(--lumiere)}
  body{display:grid;grid-template-columns:minmax(180px,210px) minmax(0,1fr) minmax(280px,340px);grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden}
  .band{grid-column:1/-1;margin:12px 14px 0}
  .ed-tab{display:inline}
  .rail{grid-column:1;grid-row:2;min-height:0;overflow:auto;padding:18px 12px 20px}
  .tabs{display:block;padding:0}
  .tabs button{display:block;width:100%;text-align:left;padding:11px 14px;margin-bottom:12px}
  .rb{display:block;margin-top:22px}
  main{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:auto;max-width:none;width:auto;margin:0;padding:20px 22px 24px}
  .fiche{grid-column:3;grid-row:2;display:block;min-height:0;overflow:auto;margin:18px 14px 14px 0;padding:16px;border-radius:22px;background:var(--fond);box-shadow:var(--relief)}
  .avert{grid-column:1/-1;grid-row:3;max-width:none;margin:0;padding:10px 24px 14px}
  input,select{font-size:18px;min-width:0}
  .k{font-size:11px;margin:0 0 6px}
  .fields{display:grid;grid-template-columns:2.2fr repeat(4,minmax(0,1fr));gap:16px;align-items:end}
  .fld{min-width:0}
  .fields-2{grid-template-columns:2.2fr minmax(0,1fr)}
  .form:not([hidden]){display:contents}
  .row{display:contents}
  .fmed,.ffla,.fgtt,.fpri,.fjou,.fouv{grid-row:1}
  .fmed{grid-column:1}.ffla{grid-column:2}.fgtt{grid-column:3}.fpri{grid-column:4}.fjou{grid-column:5}.fouv{grid-column:2}
  .sel{grid-column:1/-1;grid-row:2}
  .res{grid-column:1/-1;grid-row:3;margin-top:0}
  .note{grid-column:1/-1;grid-row:4}
  .dose{grid-column:1/-1;grid-row:5;display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:start;margin-top:4px}
  .dose table{margin-top:0}
  .tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start}
  .tile+.tile{margin-top:0}
  .tn{font-size:44px;line-height:1.05}
  .tv{font-size:22px}
  .list,#d-ecrasable,.cpt-l{display:none}
  .cpt-t{display:block}
  .list-t{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin-top:16px;padding:6px 14px 10px;border-radius:22px;background:var(--fond);box-shadow:var(--relief)}
  .list-t th{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--libelle);text-align:left;padding:10px 12px 8px 8px}
  .list-t th:nth-child(1){width:30%}
  .list-t th:nth-child(2){width:12%}
  .list-t th:nth-child(3){width:17%}
  .list-t th:nth-child(4){width:21%}
  .list-t th:nth-child(5){width:20%}
  .list-t td{font-size:14px;vertical-align:top;padding:10px 12px 10px 8px;border-top:1px solid var(--ombre);overflow-wrap:anywhere}
  .list-t tbody tr{cursor:pointer}
  .list-t tbody tr.on td{background:var(--creux);font-weight:700;color:var(--vert-t)}
  .list-t tbody tr.on td:first-child{border-radius:12px 0 0 12px}.list-t tbody tr.on td:last-child{border-radius:0 12px 12px 0}
  .leg{margin-top:26px}
  .recents{margin-top:auto}
  .recg{grid-template-columns:repeat(5,1fr);gap:14px}
}