/* =====================================================================
   UI Steto — jetons reconstitués depuis l'interface produit
   (Suivi diabète : en-tête patient, onglets, cartes, métriques,
    temps entre les seuils, profils glycémiques journaliers, insuline)
   ===================================================================== */
:root{
  color-scheme:light;
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --line:#E9ECF2;
  --line-soft:#F1F3F7;
  --ink:#1F2233;
  --ink-soft:#3C4157;
  --muted:#7A8194;
  /* Marque Stēto — relevés sur app.steto.care (le tailwind.config.js de
     2023 est antérieur au changement de nom et ne fait plus foi). */
  --brand:#1D2B6D;
  --brand-dark:#131C49;
  --brand-soft:#EDEFF7;
  --mint:#58F2BB;
  --ok:#17A673;
  --bad:#E0483D;
  --badge-bg:#D6F5E6;
  --badge-ink:#127A56;

  /* glycémie — couleur de la courbe par plage */
  --band:#E7F8F0;
  --glu-ok:#2FC48D;
  --glu-high:#F2A83C;
  --glu-vhigh:#EB6A42;
  --glu-low:#E2564F;
  --ref:#B4BAC7;

  /* temps entre les seuils */
  --tir-vhigh:#F9AE93; --tir-vhigh-t:#E07A54;
  --tir-high:#FBD79E;  --tir-high-t:#DF9E36;
  --tir-ok:#8FE3C0;    --tir-ok-t:#25AF7C;
  --tir-low:#F58A85;   --tir-low-t:#DE4B45;
  --tir-vlow:#7B2D4E;  --tir-vlow-t:#7B2D4E;

  /* insuline */
  --pill-fast:#FCE1EB; --pill-slow:#DCE8FB;
  --donut-fast:#F7A9C0; --donut-slow:#AECBF5;
  --dot-fast:#F7A9C0;   --dot-slow:#AECBF5;

  --ink-faint:#B6BCC9;
  --line-strong:#D6DAE4;
  --brand-hover:#292463;
  --cta:#1D2B6D; --cta-hover:#131C49;
  --inset:rgba(16,24,40,.07);
  --grid:#EDEFF5;          /* repères verticaux du graphique */
  --pill-ink:#3A3F52;      /* texte des pastilles d'insuline */
  --meal-chip:#EAF9F2;     /* pastille « repas » de la légende */
  --apple-fill:rgba(47,196,141,.18);
  --apple-fill-on:rgba(29,43,109,.13);
  --alert-bg:#FDECEA; --alert-ink:#B3352C; --alert-line:#F6CFC9;
  --warn-bg:#FDF0D8;  --warn-ink:#9A6B12;  --warn-line:#EFCE8C;

  --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-pop:0 10px 30px rgba(16,24,40,.16);
}

/* =====================================================================
   MODE SOMBRE
   Seuls les jetons changent : aucune règle de mise en page n'est dupliquée.
   L'accent passe du bleu nuit — illisible sur fond sombre — à un bleu
   pervenche de la même teinte ; le vert d'eau de la marque reste réservé
   au logo, pour ne pas entrer en concurrence avec le vert de la glycémie.
   ===================================================================== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#11151F;
  --panel:#1A1F2C;
  --line:#2C3346;
  --line-soft:#232939;
  --line-strong:#3A4359;
  --ink:#EAECF2;
  --ink-soft:#C3C8D6;
  --muted:#8A93A8;
  --ink-faint:#5E6779;

  --brand:#8A9BF5;
  --brand-dark:#3B4CA0;
  --brand-hover:#4A5CBA;
  --brand-soft:#242C4C;
  --cta:#3B4CA0; --cta-hover:#4A5CBA;

  --ok:#3DD99B;
  --bad:#FF7A6B;
  --badge-bg:#123A2C;
  --badge-ink:#5FDCA9;

  --band:#16302A;
  --ref:#6D7689;

  --inset:rgba(255,255,255,.09);
  --grid:#262D3E;
  --pill-fast:#4A2A38; --pill-slow:#22334F;
  --pill-ink:#E7EAF2;
  --dot-fast:#F7A9C0;  --dot-slow:#AECBF5;
  --meal-chip:#16302A;
  --apple-fill:rgba(47,196,141,.20);
  --apple-fill-on:rgba(138,155,245,.22);

  --alert-bg:#3A1A17; --alert-ink:#FF9C90; --alert-line:#5C2A24;
  --warn-bg:#3A2E12;  --warn-ink:#EFCB86;  --warn-line:#5C4A1E;

  --shadow:0 1px 2px rgba(0,0,0,.45);
  --shadow-pop:0 12px 34px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);
  font:14px/1.5 "Nunito Sans","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

/* ---------- en-tête patient + onglets ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.topbar-in{max-width:1500px;margin:0 auto;padding:10px 22px 0}
.tbrow{display:flex;align-items:center;gap:12px}
.tbrow h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em}
.tb-meta{font-size:14px;color:var(--ink-soft)}
.badge{background:var(--badge-bg);color:var(--badge-ink);font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:5px;letter-spacing:.01em}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-logo{height:26px;width:auto;display:block;margin-left:6px}
/* Le logo existe en navy et en blanc : on montre celui qui se voit. */
.sombre{display:none}
:root[data-theme="dark"] .clair{display:none}
:root[data-theme="dark"] .sombre{display:block}

/* Bouton rond à icône — bascule clair / sombre. La taille du SVG doit être
   redite ici : la règle globale `svg{width:100%}` le ferait sinon remplir
   toute la barre. */
.btn-icone{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--ink-soft);cursor:pointer;box-shadow:var(--shadow)}
.btn-icone:hover{border-color:var(--line-strong);color:var(--ink)}
.btn-icone:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-icone svg{width:17px;height:17px;display:block;flex:0 0 auto}
.btn-primary{background:var(--brand-dark);color:#fff;border:0;border-radius:6px;
  padding:9px 16px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{background:var(--panel);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:6px;padding:9px 13px;font:inherit;font-size:13.5px;cursor:pointer;
  box-shadow:var(--shadow);text-decoration:none;display:inline-flex;align-items:center;
  gap:6px;white-space:nowrap;line-height:1.2}
.btn-ghost:hover{border-color:var(--line-strong)}
.tabs{display:flex;gap:24px;margin-top:10px}
.tab{appearance:none;background:none;border:0;padding:0 0 8px;font:inherit;font-size:13.5px;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink-soft)}
.tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ---------- page ----------
   La contrainte de mise en page : sur un écran de bureau ~20 pouces
   (hauteur utile ≈ 740 px), l'utilisateur doit voir d'un seul coup d'œil soit
   le haut de la page jusqu'au bas du profil journalier, soit le profil
   journalier jusqu'au dernier curseur. D'où l'en-tête et la barre d'outils
   compacts, le graphique en unités pixel (voir CH dans le script) et les
   réglages en deux colonnes. Les indicateurs résumés passent sous les
   réglages : ils n'ont pas besoin d'être visibles en même temps. */
.page{max-width:1500px;margin:0 auto;padding:14px 22px 60px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.sel{position:relative}
.sel > label{display:block;font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
select{appearance:none;-webkit-appearance:none;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);height:36px;padding:0 34px 0 12px;
  font:inherit;font-size:13px;cursor:pointer;min-width:133px;box-shadow:var(--shadow);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%237A8194' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
/* Le chevron est une image : sa couleur ne suit pas les jetons, il faut la
   redéclarer pour le thème sombre. */
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%238A93A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
select:focus{outline:none;border-color:var(--brand)}
/* Largeurs réduites de 30 % : sur une tablette de congrès, les trois menus
   doivent tenir sur une seule ligne — le graphique passe avant la lisibilité
   entière d'un intitulé, qui peut être tronqué. */
select#pat{min-width:231px}
.toolbar{flex-wrap:nowrap}
.toolbar .sel{min-width:0}
.toolbar select{text-overflow:ellipsis}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 18px;margin-bottom:12px}
.card h2{font-size:14.5px;font-weight:800;margin:0 0 12px}
.card h2 .sub{font-weight:400;font-size:12px;color:var(--muted);margin-left:8px}
/* deux colonnes de réglages, côte à côte */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.grid2 .card{margin-bottom:0}

/* ---------- métriques ---------- */
/* Le temps entre les seuils a rejoint le graphique : il ne reste ici que
   les six indicateurs. */
.mgrid{margin-top:2px}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
@media (max-width:640px){.mgrid{grid-template-columns:repeat(2,1fr)}}
.m .k{font-size:12.5px;color:var(--ink-soft)}
.m .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:4px;line-height:1.1}
.m .v .u{font-size:13px;font-weight:600;color:var(--ink-soft);margin-left:4px;letter-spacing:0}
.m .d{font-size:12.5px;font-weight:700;margin-top:5px;color:var(--muted)}
.m .d.ok{color:var(--ok)} .m .d.bad{color:var(--bad)} .m .d.none{color:var(--ink-faint)}

.tir-title{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.tirrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:center;
  margin-bottom:12px}
.tirrow .lab{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.track{display:flex;align-items:center;gap:8px}
.fill{height:13px;border-radius:4px;min-width:4px;
  box-shadow:inset 0 0 0 1px var(--inset)}
.pc{font-size:12px;font-weight:700;white-space:nowrap}

/* ---------- alerte ---------- */
.alert{display:none;align-items:flex-start;gap:10px;background:var(--alert-bg);color:var(--alert-ink);
  border:1px solid var(--alert-line);border-radius:var(--radius);padding:9px 13px;
  font-size:12.5px;line-height:1.45;margin-bottom:12px}
.alert.on{display:flex}
.alert b{font-weight:800}

/* ---------- chart ---------- */
svg{display:block;width:100%;height:auto}
/* Une seule ligne. Volontairement dimensionnée avec de la marge : la police
   Nunito Sans n'est pas embarquée, et la police de repli d'un iPad n'a pas les
   mêmes métriques — un ajustement au pixel près se romprait là-bas. */
.legend{display:flex;flex-wrap:nowrap;gap:0 9px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line-soft);font-size:10px;color:var(--muted);
  overflow:hidden}
.legend span{flex:0 0 auto}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.dash{width:16px;height:0;border-radius:0;border-top:1.8px dashed var(--ref)}

/* ---------- lignes de traitement (curseurs), version compacte ---------- */
.rows{border-top:1px solid var(--line-soft)}
.row{display:grid;grid-template-columns:116px minmax(0,1fr) minmax(0,1fr);gap:14px;
  align-items:center;padding:7px 0 7px 7px;border-bottom:1px solid var(--line-soft);
  border-left:3px solid transparent;background:var(--panel)}
.row:last-child{border-bottom:0}
.row.changed{background:var(--brand-soft);border-left-color:var(--brand)}
.row .nm{display:flex;gap:7px;align-items:flex-start}
.row .nm .dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:0 0 auto;
  background:var(--dot-fast)}
.row.long .nm .dot{background:var(--dot-slow)}
.row .nm b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.row .nm em{font-style:normal;display:block;font-size:10.5px;color:var(--muted);
  margin-top:1px;line-height:1.3}
.sl label{display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:10.5px;color:var(--muted);margin-bottom:2px}
.sl label b{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap}
.sl label b .d{font-weight:700;color:var(--brand);margin-left:3px}
input[type=range]{width:100%;accent-color:var(--brand);margin:0;height:15px;display:block}
@media (max-width:1000px){
  .row{grid-template-columns:1fr;gap:8px;border-left:0;border-top:3px solid transparent}
  .row.changed{border-top-color:var(--brand)}
}
.hint{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.45}
.row.meal .nm .dot{background:var(--glu-ok)}
.row .cover{font-size:10.5px;color:var(--muted);line-height:1.4}

/* ---------- bouton « i » et infobulle d'incertitude ----------
   Les réserves sur les constantes d'insuline sont réelles mais n'ont pas à
   occuper l'écran en permanence : elles sont derrière ce bouton, au survol
   comme au focus clavier. La teinte du bouton suit la confiance de
   l'insuline sélectionnée, pour signaler sans alarmer. */
.info{position:relative;display:inline-flex}
.info-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font:inherit;font-size:13px;
  font-weight:800;font-style:italic;cursor:help;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;padding:0}
.info-btn:hover,.info-btn:focus{outline:none;border-color:var(--brand);color:var(--brand)}
.info-btn.moyenne{border-color:var(--warn-line);color:var(--warn-ink)}
.info-btn.basse{border-color:var(--alert-line);color:var(--alert-ink)}
/* Ancrée à DROITE du bouton : ancrée à gauche, l'infobulle de 430 px
   dépassait du cadre sur une tablette et faisait défiler la page
   horizontalement, même fermée. */
.info-pop{position:absolute;top:32px;right:-8px;width:430px;max-width:88vw;z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);padding:14px 16px;
  font-size:12px;line-height:1.55;color:var(--ink-soft);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s}
.info:hover .info-pop,.info:focus-within .info-pop,.info.open .info-pop{
  opacity:1;visibility:visible;transform:translateY(0)}
.info-pop h4{margin:0 0 7px;font-size:12.5px;color:var(--ink);font-weight:800}
.info-pop p{margin:0 0 9px}
.info-pop p:last-child{margin-bottom:0}
.info-pop .mono{font-size:11px;color:var(--muted)}
.info-pop b{color:var(--ink)}
.conf{display:inline-block;font-size:10px;font-weight:800;padding:2px 6px;
  border-radius:4px;letter-spacing:.02em;margin-right:6px;vertical-align:1px}
.conf.haute{background:var(--badge-bg);color:var(--badge-ink)}
.conf.moyenne{background:var(--warn-bg);color:var(--warn-ink)}
.conf.basse{background:var(--alert-bg);color:var(--alert-ink)}
/* ---------- dossier / modèle ---------- */
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:760px){.dl{grid-template-columns:1fr}}
.dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.dl div span:first-child{color:var(--ink-soft)}
.dl div span:last-child{font-weight:700}
.callout{background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:6px;
  padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:20px}
.callout b{font-weight:800}
.prose{font-size:13.5px;line-height:1.62;color:var(--ink-soft);max-width:96ch}
.prose p{margin:0 0 14px}
.prose h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:26px 0 10px;font-weight:800}
.prose b{color:var(--ink);font-weight:800}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--brand-soft);color:var(--brand);padding:1px 5px;border-radius:4px}
.prose table{border-collapse:collapse;width:100%;font-size:13px;margin:0 0 14px}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.prose th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* ---------- onglets internes (Injections / Repas) ---------- */
.subtabs{display:flex;gap:18px;margin:-2px 0 10px;border-bottom:1px solid var(--line-soft);
  align-items:center}
/* « Réinitialiser » vit dans la barre d'onglets de la carte, poussé à droite */
.btn-reinit{margin-left:auto;margin-bottom:7px;padding:5px 10px;font-size:12px}
.btn-reinit svg{width:14px;height:14px;flex:0 0 auto}
.subtab{appearance:none;background:none;border:0;padding:0 0 8px;font:inherit;font-size:13px;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab:hover{color:var(--ink-soft)}
.subtab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
.subpane{display:none} .subpane.on{display:block}

/* ---------- profil glycémique + temps entre les seuils, côte à côte ----------
   La colonne de droite est délibérément étroite : c'est la courbe qui doit
   rester lisible sur l'écran d'un stand. */
/* Deux cartes côte à côte. L'écart horizontal est le même que l'écart
   vertical entre cartes (la marge basse de .card, 12 px). La colonne de
   droite fait 178 px pour que son CONTENU en garde 150, une fois retirés
   ses 14 px de marge intérieure de chaque côté. */
.chartrow{display:grid;grid-template-columns:minmax(0,1fr) 178px;gap:12px;
  align-items:start;margin-bottom:12px}
.chartrow > .card{margin-bottom:0}
#colDroite{padding-left:14px;padding-right:14px}
@media (max-width:900px){.chartrow{grid-template-columns:1fr}}

/* deux barres empilées, référence et journée simulée, légende dessous */
/* --hauteur-pile est posée par app.js pour aligner le bas de cette colonne
   sur celui de la légende du graphique. La valeur ci-dessous ne sert qu'au
   premier rendu, avant mesure. */
.stack-wrap{display:flex;gap:14px;justify-content:center;padding-top:2px}
.stack-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.stack{width:30px;height:var(--hauteur-pile,150px);border-radius:5px;overflow:hidden;display:flex;
  flex-direction:column;box-shadow:inset 0 0 0 1px var(--inset);background:var(--line-soft)}
.stack .seg{width:100%}
.stack-lab{font-size:10px;color:var(--muted);text-align:center;line-height:1.28;max-width:66px}
.stack-legend{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line-soft)}
.stack-legend span{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);
  white-space:nowrap}
.stack-legend i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}

.pane{display:none} .pane.on{display:block}

/* ---------- attente d'une réponse du serveur ----------
   Le calcul se fait à distance : un très léger voile signale que la courbe
   affichée n'est pas encore celle des curseurs. Assez discret pour ne pas
   clignoter à chaque cran de curseur. */
#chartbox{transition:opacity .18s ease}
#chartbox.attente{opacity:.62}