:root{
  --navy:#0f2346; --navy2:#16335e; --blue:#2f6bd8; --gold:#e2a93b; --gold2:#f0c040;
  --bg:#eef2f7; --card:#ffffff; --ink:#1f2d45; --muted:#6b7a90; --rouge:#c0392b;
  --vert:#27ae60; --line:#e6ebf2; --sh:0 6px 22px rgba(16,40,90,.08);

  /* ─── TYPOGRAPHIE ───────────────────────────────────────────────────────
     Aucune police distante : l'officine doit rester lisible sans Internet.
     On prend donc la MEILLEURE police déjà présente sur chaque appareil —
     Segoe UI Variable sur Windows 11, Roboto sur Android — toutes deux
     dessinées pour l'écran. Segoe UI Variable existe en deux tailles
     optiques : « Display » resserré pour les titres, « Text » plus ouvert
     pour la lecture ; les utiliser à bon escient est ce qui distingue une
     interface soignée d'une interface par défaut. */
  --police:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Roboto,
           system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --police-titre:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",
           Roboto,system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--police);
  background:var(--bg);color:var(--ink);
  /* Rendu net plutôt que gras-baveux (le défaut de Chrome sous Windows). */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  letter-spacing:-.006em;line-height:1.5;
}
a{text-decoration:none;color:var(--blue)}
/* Plus le corps est grand, moins il faut d'espace entre les lettres : sans ce
   resserrage, un gros titre paraît toujours « écarté » et amateur. */
h1,h2,h3{margin:0;font-family:var(--police-titre);letter-spacing:-.021em;
  line-height:1.22;font-weight:700}
/* Chiffres de même largeur : les colonnes de nombres s'alignent au pixel. */
.mono,.kpi .kn,.frn-tot,.bar-val,.tbl-row .mono{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"kern" 1}

/* ─── App shell ─── */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--navy);background-image:linear-gradient(180deg,#16335e,#0f2346 60%,#0a1930);
  color:#cfe0f5;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 16px}
.side-brand img{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:contain}
.side-brand b{font-family:var(--police-titre);color:#fff;font-size:17px;
  letter-spacing:.05em;display:block;font-weight:700}
.side-brand small{color:#8fb0dd;font-size:11px}
.side-nav{display:flex;flex-direction:column;gap:3px;padding:8px}
.side-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  color:#c3d5ee;font-weight:600;font-size:14px;transition:.15s}
.side-nav a i{font-style:normal;font-size:17px;width:22px;text-align:center}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.on{background:linear-gradient(90deg,rgba(226,169,59,.22),rgba(226,169,59,.05));
  color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#9db6d8}
.side-foot .quit{color:var(--gold2);font-weight:700}
.side-sign{padding:12px 16px 16px;font-size:11.5px;color:#8fb0dd;line-height:1.6}
.side-sign a{display:block;color:var(--gold2);font-weight:700;margin-top:2px}
.appfoot{text-align:center;color:var(--muted);font-size:12.5px;margin:18px 0 4px;line-height:1.7}
.appfoot b{color:var(--navy)}.appfoot a{color:var(--gold);font-weight:700}
.login-sign{text-align:center;margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.7}
.login-sign b{color:var(--navy)}.login-sign a{color:var(--gold);font-weight:700}

.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-logo{display:none;width:30px;height:30px;border-radius:50%}
.top h1{font-size:20px;color:var(--navy);font-weight:700;letter-spacing:-.024em}
.top-right{margin-left:auto;display:flex;gap:8px}
.chip{background:#eef4ff;color:#26436f;border:1px solid #d9e6fb;border-radius:999px;
  padding:7px 13px;font-size:12.5px;font-weight:700}
.content{padding:22px;max-width:1080px;width:100%;margin:0 auto}
.flash{background:#fdecea;color:#a5352a;border:1px solid #f5c6c0;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.botnav{display:none}

/* ─── Hero + KPI ─── */
.hero{background:var(--navy);background-image:linear-gradient(120deg,#2f6bd8,#16335e 55%,#0f2346);
  color:#fff;border-radius:16px;padding:22px 24px;box-shadow:var(--sh);margin-bottom:16px;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(240,192,64,.35),transparent 65%)}
.hero-k{color:var(--gold2);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:11.5px}
.hero-t{font-family:var(--police-titre);font-size:24px;font-weight:700;
  margin:6px 0;letter-spacing:-.026em;line-height:1.2}
.hero-s{color:#cfe0f5;font-size:14px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:var(--sh);display:flex;align-items:center;gap:12px}
.kpi .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:#eef4ff}
.kpi.red .ic{background:#fdeceb}.kpi.green .ic{background:#e8f8ef}.kpi.gold .ic{background:#fdf3dc}
.kpi .kn{font-family:var(--police-titre);font-size:25px;font-weight:700;
  color:var(--navy);line-height:1;letter-spacing:-.028em}
.kpi.red .kn{color:var(--rouge)}.kpi.green .kn{color:var(--vert)}
.kpi .kl{font-size:12.5px;color:var(--muted);margin-top:3px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:var(--sh);margin-bottom:14px}
.card.nopad{padding:0;overflow:hidden}
.card h3{color:var(--navy);font-size:15px;margin-bottom:12px;letter-spacing:-.015em}
.card h3.rouge{color:var(--rouge)}
.muted{color:var(--muted);font-size:13px;margin:2px 2px 12px}

/* ─── Charts ─── */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:150px 1fr 54px;align-items:center;gap:10px}
.bar-lbl{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:#eef2f7;border-radius:8px;height:14px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;min-width:3px;transition:width .5s}
.bar-val{font-size:12.5px;font-weight:700;color:var(--navy);text-align:right}
.spark{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:6px}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.spark-bar{width:70%;border-radius:6px 6px 0 0;min-height:4px}
.spark-x{font-size:11px;color:var(--muted);margin-top:5px}

/* ─── Tables ─── */
.tbl{display:flex;flex-direction:column}
.tbl-head,.tbl-row{display:grid;align-items:center;gap:10px;padding:11px 14px}
.tbl-head{background:#f6f8fc;color:var(--navy);font-weight:700;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tbl-row{border-bottom:1px solid #f0f3f8;font-size:13.5px}
.tbl-row:hover{background:#fafcff}
.tbl-head.arr,.tbl-row.arr{grid-template-columns:130px 110px 1fr 80px 70px}
.tbl-head.rap,.tbl-row.rap{grid-template-columns:1fr 70px 70px 130px 40px}
.grow{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nom de fichier : jamais coupé — un rapport tronqué (« RAPPORT_RUPTURES_DISPONIBILI… »)
   ne se distingue pas du suivant. On enroule sur 2 lignes en corps réduit. */
.fname{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:12.5px;
  line-height:1.35;font-weight:600;color:var(--navy)}
.fname .fmeta{display:none;font-weight:600;color:var(--muted);font-size:11px}
.mono{font-variant-numeric:tabular-nums;color:#33465f}
.tag{background:#eaf1fe;color:#1e3c68;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700}
.tag.pdf{background:#fdeceb;color:#a5352a}
.pill-ok{background:#e2f6ea;color:#146c37;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill-no{background:#fdeae8;color:#992c21;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.dl{font-size:18px}
.vide{color:var(--muted);text-align:center;padding:20px}

/* ─── Pilote ─── */
.pilote{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.btn-or{background:var(--gold);color:var(--navy);border:0;border-radius:10px;padding:12px 18px;font-weight:800;font-size:15px;cursor:pointer}
.btn-or:active{background:var(--gold2)}.btn-or:disabled{opacity:.55}
.job{margin-top:8px;font-size:13.5px;padding:7px 11px;border-radius:8px;background:#f4f7fc}
.agents{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn-ag{flex:1 1 165px;background:var(--navy2);color:#fff;border:0;border-radius:10px;
  padding:11px 13px;font-weight:700;font-size:13px;cursor:pointer;text-align:left}
.btn-ag:hover{background:var(--navy)}
.btn-ag:disabled{opacity:.5;cursor:default}
.job.running{background:#fff4d6;color:#8a5a00}.job.done{background:#e8f8ef;color:#1e7a44}.job.error{background:#fdeceb;color:#a5352a}

/* ─── Recherche + équivalents ─── */
.search{display:flex;gap:8px;flex-wrap:wrap}
.search input{flex:1 1 200px;min-width:150px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.search select{padding:12px;border:1px solid var(--line);border-radius:10px}
/* ─── Arrivages par fournisseur (cartes dépliables) ─── */
.periode{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.seg{display:flex;background:#eef2f9;border-radius:9px;padding:3px;gap:2px}
.seg a{padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:700;
  color:var(--muted);text-decoration:none}
.seg a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(16,40,90,.14)}

.frn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.frn{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh);overflow:hidden;transition:box-shadow .15s,transform .15s}
.frn:hover{box-shadow:0 8px 22px rgba(16,40,90,.13)}
.frn summary{cursor:pointer;list-style:none;padding:14px 15px}
.frn summary::-webkit-details-marker{display:none}
.frn-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.frn-nom{font-family:var(--police-titre);font-weight:700;color:var(--navy);
  font-size:14.5px;letter-spacing:.01em;
  overflow-wrap:anywhere}
.frn-tot{font-family:var(--police-titre);font-size:26px;font-weight:700;
  color:var(--blue);line-height:1;letter-spacing:-.03em}
.frn-jauge{height:7px;background:#eef2f9;border-radius:4px;overflow:hidden;margin:9px 0 8px}
.frn-jauge i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--gold))}
.frn-meta{display:flex;gap:9px;flex-wrap:wrap;font-size:11.5px;font-weight:700}
.m-ok{color:var(--vert)}.m-no{color:var(--rouge)}
.m-pc{margin-left:auto;color:var(--muted)}
.frn-plus{margin-top:9px;font-size:11.5px;font-weight:700;color:var(--blue)}
.frn[open]{grid-column:1/-1}
.frn[open] summary{border-bottom:1px solid var(--line);background:#fbfcfe}
.frn[open] .frn-plus{color:var(--muted)}
.frn[open] .frn-plus::after{content:" (cliquer pour replier)"}
.frn .tbl{max-height:460px;overflow-y:auto}
.tbl-head.arr2,.tbl-row.arr2{grid-template-columns:104px 1fr 74px 74px}
.grow2{min-width:0;overflow-wrap:anywhere;line-height:1.35}
.tot-bas{margin:14px 2px 4px;color:var(--muted);font-size:12.5px;text-align:center}

/* Actualiser */
.periode-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.btn-raf{background:#fff;color:var(--navy2);border:1.5px solid var(--line);border-radius:9px;
  padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.btn-raf:hover{border-color:var(--navy2);background:#f7f9fd}
.btn-raf:disabled{opacity:.6;cursor:default}

/* ─── Mise en exergue des nouveautés ───────────────────────────────────────
   Un produit qui reparaît d'un passage à l'autre n'est pas une nouveauté :
   seul le badge signale une PREMIÈRE apparition dans toute la base. */
.bandeau-neuf{background:linear-gradient(100deg,#fff8e6,#fffdf7);
  border:1px solid #f0dca8;border-left:4px solid var(--gold);border-radius:12px;
  padding:11px 14px;margin-bottom:12px;font-size:13px;line-height:1.55;color:#6b5216}
.bandeau-neuf b{color:#8a6a12}
.neuf{display:inline-block;background:#a9741a;color:#fff;border-radius:5px;
  padding:2px 7px;font-size:11px;font-weight:700;letter-spacing:.04em;
  vertical-align:1px;margin-right:5px;white-space:nowrap;
  /* Un texte minuscule ET très gras devient pâteux : on descend la graisse,
     on remonte le corps, et on prend un fond assez sombre pour que le blanc
     tranche vraiment (le brun sur doré manquait de contraste). */
  -webkit-font-smoothing:auto;text-rendering:auto}
.revu{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.meta-m{display:none}   /* replié sous le produit sur téléphone uniquement */

/* ─── « Où agir maintenant » ───────────────────────────────────────────────
   Les KPI du haut disent l'état ; ce bloc dit quoi faire. Chaque tuile mène à
   l'écran concerné et porte sa propre fraîcheur. */
.agir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.ag{display:block;border:1px solid var(--line);border-radius:13px;padding:12px 13px;
  background:var(--card);border-left-width:4px;transition:.15s;color:var(--ink)}
.ag:hover{box-shadow:0 6px 18px rgba(16,40,90,.13);transform:translateY(-1px)}
.ag b{display:block;font-family:var(--police-titre);font-size:23px;font-weight:700;
  line-height:1.05;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.ag span{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-top:4px}
.ag i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.ag-neuf{border-left-color:var(--gold)}      .ag-neuf b{color:#a9741a}
.ag-sem{border-left-color:#7b8fb5}           .ag-sem  b{color:var(--navy2)}
.ag-risq{border-left-color:var(--rouge)}     .ag-risq b{color:var(--rouge)}
.ag-rupt{border-left-color:#c0392b}          .ag-rupt b{color:var(--rouge)}
.ag-rap{border-left-color:var(--blue)}       .ag-rap  b{color:var(--blue)}
.ag-sync{border-left-color:var(--vert)}      .ag-sync b{color:var(--vert);font-size:16px;
  padding-top:5px}

.agir-frn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px dashed var(--line)}
.af-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--muted)}
.af{display:inline-flex;align-items:baseline;gap:6px;background:#eef4ff;
  border:1px solid #d9e6fb;border-radius:999px;padding:5px 11px;font-size:12px}
.af b{color:var(--navy);font-weight:700}
.af span{color:#26436f}
.af i{font-style:normal;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}

@media(max-width:820px){
  .agir-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .ag{padding:11px}
  .ag b{font-size:20px}
  .ag-sync b{font-size:14px}
  .ag span{font-size:11.5px}
}

/* Bandeau « nouvelles données » — jamais de rechargement imposé : on informe,
   l'utilisateur décide. Posé au-dessus de la barre de navigation basse. */
.maj-dispo{position:fixed;left:12px;right:12px;bottom:14px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--navy);color:#fff;border-radius:12px;padding:11px 13px;
  box-shadow:0 10px 28px rgba(16,40,90,.35);font-size:13px;font-weight:600;
  animation:monte .25s ease-out}
.maj-dispo button{background:var(--gold);color:var(--navy);border:0;
  border-radius:9px;padding:8px 14px;font-family:inherit;font-weight:800;
  font-size:12.5px;cursor:pointer;flex:none}
@keyframes monte{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:820px){ .maj-dispo{bottom:78px} }

/* ─── État du tunnel Cloudflare ─── */
.tun-etat{display:flex;flex-direction:column;gap:3px;border-radius:12px;
  padding:12px 14px;margin:4px 0 14px;border:1px solid var(--line);
  background:#f7f9fd;border-left-width:4px}
.tun-etat b{font-size:14px;color:var(--navy)}
.tun-etat span{font-size:12.5px;color:var(--muted);line-height:1.5;
  overflow-wrap:anywhere}
.tun-etat.ok{background:#e2f6ea;border-color:#bfe6cf;border-left-color:var(--vert)}
.tun-etat.ok b{color:#146c37}
.tun-etat.att{background:#fdf3dc;border-color:#eddaa6;border-left-color:var(--gold)}
.tun-etat.att b{color:#8a6a12}
.tun-etat.ko{background:#fdeae8;border-color:#f0bdb6;border-left-color:var(--rouge)}
.tun-etat.ko b{color:#992c21}
.ok-txt{color:var(--vert);font-weight:700;font-size:11.5px}
/* Choix du mode en CARTES cliquables (comme SCHOOLGET) : on voit les deux
   options et ce qu'elles impliquent, au lieu d'une liste déroulante qui
   cache l'alternative. */
.ss-titre{font-size:13.5px;color:var(--navy);margin:14px 0 8px}
.modes{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
/* Le bouton radio se met EN FACE du texte, pas au-dessus : `.frm input`
   impose `display:block;width:100%` à tous les champs du formulaire et
   emportait aussi les radios. */
.modes label{flex:1 1 240px;border:1.5px solid var(--line);border-radius:11px;
  padding:12px;cursor:pointer;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:#fff;transition:border-color .12s,background .12s;
  display:flex;align-items:flex-start;gap:9px}
.modes label:hover{border-color:#b9cdf0}
.modes label > span{flex:1;min-width:0}
.modes input[type="radio"]{width:17px;height:17px;flex:none;margin:2px 0 0;
  accent-color:var(--vert);display:inline-block}
.modes label:has(input:checked){border-color:var(--vert);background:#e9f8f0}
.modes b{color:var(--navy)}
.btn.rouge{background:var(--rouge)}
.btn.rouge:hover{background:#a5352a}

/* ─── Étiquettes d'information produit ─────────────────────────────────────
   Chaque donnée a sa couleur : on repère la référence de commande ou le stock
   sans lire, ce qui compte quand on parcourt des centaines de lignes. */
.pnom{display:block;font-weight:700;color:var(--navy);line-height:1.35}
/* Ligne d'arrivage cliquable → profil de disponibilité du produit */
.tbl-row.clic{color:inherit;cursor:pointer;transition:background .12s}
.tbl-row.clic:hover{background:#f3f7ff}
.tbl-row.clic:active{background:#e9f0fd}
.fleche{color:var(--blue);font-weight:800;font-size:17px;margin-left:6px;
  line-height:1;vertical-align:-1px}
.etiqs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.et{display:inline-flex;align-items:baseline;gap:4px;border-radius:6px;
  padding:2px 7px;font-size:11.5px;font-weight:700;line-height:1.4;
  border:1px solid;white-space:nowrap;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:auto}
.et i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;opacity:.8}
.et-ref{background:#eaf1fe;border-color:#c3d8fb;color:#1b3f75}   /* commander */
.et-stk{background:#e2f6ea;border-color:#b6e3c8;color:#0f6234}   /* stock frn  */
.et-col{background:#f3eefe;border-color:#ddd0f7;color:#4b2d8f}   /* colisage   */
.et-dci{background:#fff4e2;border-color:#f3ddb8;color:#8a5a12}   /* DCI        */
.et-cat{background:#eef2f7;border-color:#dbe3ee;color:#41556f}   /* catégorie  */
.et-pub{background:#fdeef5;border-color:#f6cfe2;color:#8d2f5c}   /* prix public*/
/* Liseré doré : la ligne se repère sans lire le badge. */
.tbl-row.arr2.neuve{background:#fffdf5;box-shadow:inset 3px 0 0 var(--gold)}
.tbl-row.arr2.neuve:hover{background:#fffbec}
/* Lignes du dernier passage : légèrement détachées de l'historique. */
.tbl-row.arr2.passage .dh{color:var(--navy2);font-weight:700}
.dh{display:flex;flex-direction:column;line-height:1.25}
.dh span{color:var(--muted);font-size:11px;font-weight:400}

/* Repère du dernier passage sur la carte */
.passage{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line);font-size:11.5px}
.p-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;font-size:11px}
.p-h{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.p-n{margin-left:auto;color:var(--muted)}
.p-n b{color:#8a6a12}

/* ─── Profils de disponibilité (rapport Agent Magic) ─── */
.niv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:13px}
.niv{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;box-shadow:var(--sh);border-left-width:4px}
.niv.r{border-left-color:var(--rouge)}.niv.o{border-left-color:var(--gold)}
.niv.v{border-left-color:var(--vert)}
.niv-n{font-family:var(--police-titre);font-size:24px;font-weight:700;line-height:1;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.niv.r .niv-n{color:var(--rouge)}.niv.o .niv-n{color:#a9741a}.niv.v .niv-n{color:var(--vert)}
.niv-l{font-size:11.5px;color:var(--muted);margin-top:4px}

.tbl-head.prof{display:grid;grid-template-columns:1fr 74px 62px}
.pf{border-bottom:1px solid #f0f3f8;background:var(--card)}
.pf:last-child{border-bottom:0}
.pf summary{cursor:pointer;list-style:none;padding:10px 14px}
.pf summary::-webkit-details-marker{display:none}
.pf summary:hover{background:#fafcff}
.pf-h{display:grid;grid-template-columns:1fr 74px 62px;gap:10px;align-items:center}
.pf-nom{min-width:0;overflow-wrap:anywhere;font-weight:700;color:var(--navy);
  font-size:13px;line-height:1.3}
.pf-sub{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
.pf-dispo{text-align:right;font-family:var(--police-titre);font-weight:700;
  font-size:17px;color:var(--navy2);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pf-dispo i{font-style:normal;font-size:11px;color:var(--muted);margin-left:1px}
.pf-niv{text-align:center;font-weight:700;font-size:12.5px;border-radius:7px;padding:4px 0;
  font-variant-numeric:tabular-nums}
.pf.niv-r .pf-niv{background:#fdeae8;color:#992c21}
.pf.niv-o .pf-niv{background:#fdf3dc;color:#8a6a12}
.pf.niv-v .pf-niv{background:#e2f6ea;color:#146c37}
.pf-jauge{height:5px;background:#eef2f9;border-radius:3px;overflow:hidden;margin-top:8px}
.pf-jauge i{display:block;height:100%;border-radius:3px;background:var(--vert)}
.pf.niv-r .pf-jauge i{background:var(--rouge)}.pf.niv-o .pf-jauge i{background:var(--gold)}
.pf[open] summary{background:#f8fafd;border-bottom:1px solid var(--line)}

.pf-detail{padding:12px 14px 14px;background:#fbfcfe}

/* Bandeau de risque : la conclusion d'abord, le détail ensuite. */
.pf-risque{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;border-radius:12px;padding:11px 13px;margin-bottom:11px;
  border:1px solid;border-left-width:4px}
.pf-risque.n-r{background:#fdeae8;border-color:#f0bdb6;color:#992c21}
.pf-risque.n-o{background:#fdf3dc;border-color:#eddaa6;color:#8a6a12}
.pf-risque.n-v{background:#e2f6ea;border-color:#bfe6cf;color:#146c37}
.pr-txt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pr-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;opacity:.75}
.pr-txt b{font-family:var(--police-titre);font-size:17px;letter-spacing:-.02em}
.pr-note{font-weight:700;font-variant-numeric:tabular-nums}
.pr-note i{font-style:normal;font-weight:400;opacity:.7;font-size:11.5px}
.pr-tend{font-size:12px;font-weight:700;opacity:.9}

/* Tuiles de chiffres : lisibles d'un coup d'œil, alignées au pixel. */
.pf-tuiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:11px}
.tu{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 8px;text-align:center}
.tu b{display:block;font-family:var(--police-titre);font-size:17px;font-weight:700;
  color:var(--navy);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tu b i{font-style:normal;font-size:11px;color:var(--muted);margin-left:1px}
.tu span{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.25}
.tu.ok b{color:var(--vert)}.tu.ko b{color:var(--rouge)}

/* Repères chronologiques */
.pf-chrono{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.ch{display:flex;align-items:flex-start;gap:10px;background:var(--card);padding:9px 12px}
.ch i{font-style:normal;font-size:15px;line-height:1.3;flex:none}
.ch b{display:block;font-size:12px;color:var(--navy);font-weight:700}
.ch span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
  font-variant-numeric:tabular-nums}
.ch-vide b,.ch-vide span{opacity:.65}
.pf-eq{margin-top:9px;background:#e2f6ea;border:1px solid #bfe6cf;border-radius:10px;
  padding:9px 11px;font-size:12.5px;color:#146c37;line-height:1.45}
.pf-eq b{overflow-wrap:anywhere}
.pf-eq span{display:block;color:#2c7a4d;font-size:11.5px;margin-top:2px}

/* ─── Saisie assistée (liste de choix) ─── */
/* La liste s'ancre sur TOUTE la ligne de recherche, pas sur le seul champ :
   ancrée au champ, elle recouvrait le bouton « Chercher » placé en dessous
   sur téléphone — le doigt validait une suggestion au lieu de lancer la
   recherche. */
.search{position:relative}
.ac-wrap{flex:1 1 200px;min-width:150px}
.ac-wrap input{width:100%;box-sizing:border-box}
.ac{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(16,40,90,.16);
  max-height:290px;overflow-y:auto;overscroll-behavior:contain}
.ac-i{display:flex;align-items:baseline;gap:6px;padding:9px 11px;cursor:pointer;
  border-bottom:1px solid #f3f6fb;font-size:13px;line-height:1.3}
.ac-i:last-child{border-bottom:0}
.ac-i:hover,.ac-i.on{background:#eef4ff}
.ac-n{font-weight:700;color:var(--navy);overflow-wrap:anywhere;flex:0 1 auto}
/* La DCI cède la place plutôt que de casser la ligne. */
.ac-d{color:var(--muted);font-size:11.5px;flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-r{background:#fdeceb;color:#a5352a;border-radius:5px;padding:1px 6px;
  font-size:11px;font-weight:700;flex:none;margin-left:auto;align-self:center;
  -webkit-font-smoothing:auto}

#res,.rup-list{margin-top:8px}
.rupt{border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden}
/* Corps RÉDUIT et interligne serré : un nom de produit long
   (« ACTINAC PLUS 100MG/500MG CPR B/10 ») doit tenir sans casser la ligne
   sur un téléphone, et laisser voir un maximum d'articles d'un coup d'œil. */
.rupt summary{cursor:pointer;padding:9px 11px;background:#fbfcfe;font-weight:700;
  color:var(--rouge);list-style:none;font-size:13px;line-height:1.35;
  overflow-wrap:anywhere}
.rupt summary::-webkit-details-marker{display:none}
.rupt[open] summary{border-bottom:1px solid var(--line)}
.dci{color:var(--muted);font-weight:500;font-size:12px}
/* Le NOM prend la place restante ; fournisseur, prix et flèche gardent la
   leur — sinon un nom long comprimait « UBIPHARM » en « UBIPHA ». */
.eq{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid #f0f3f8;font-size:14px;line-height:1.35}
.eq > .ok{flex:none}
.eq > *:not(.ok):not(.frn):not(.px):not(.fleche){flex:1 1 auto;min-width:0;
  overflow-wrap:anywhere}
.eq:last-child{border-bottom:0}.eq .ok{color:var(--vert);font-weight:700}
/* Une spécialité mène à son profil de disponibilité */
.eq.clic{color:inherit;cursor:pointer;transition:background .12s}
.eq.clic:hover{background:#f3f7ff}
.eq .fleche{flex:none;margin-left:2px}
.vers-profil{float:right;font-size:11.5px;font-weight:700;color:var(--blue);
  background:#eaf1fe;border:1px solid #c3d8fb;border-radius:6px;padding:1px 8px;
  margin-left:8px}
.vers-profil:hover{background:#dbe8fd}
/* Compte des spécialités trouvées pour une DCI */
.compte{background:#eaf1fe;border:1px solid #c3d8fb;border-radius:10px;
  padding:9px 12px;margin:8px 0;font-size:13px;color:#1b3f75;line-height:1.45}
.compte b{font-size:16px;font-family:var(--police-titre);letter-spacing:-.02em}
.compte span{color:#4a6a9c;font-size:11.5px}
.eq .frn{flex:none;margin-left:auto;color:var(--blue);font-weight:700;
  font-size:11.5px;white-space:nowrap}
.eq .px{flex:none;min-width:60px;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums}
.eq.none{color:var(--muted);font-style:italic}
.eqtable{border:1px solid var(--line);border-radius:10px;overflow:hidden}

/* ─── Login ─── */
.login{max-width:380px;margin:6vh auto;text-align:center}
.login .logo-big,.logo-big{width:84px;height:84px;object-fit:contain}
.login h1{color:var(--navy);letter-spacing:2px;margin:6px 0 2px}
.login .sub{color:var(--muted);margin:0 0 16px}
.lic-ko{background:#fdeceb;border:1px solid #f3b4ae;color:#a5352a;border-radius:12px;padding:12px 14px;margin:0 0 14px;text-align:center;font-size:14px;line-height:1.5}
.lic-ko small{color:#8a3b33;font-size:12px}
.login .card{text-align:left;box-shadow:0 12px 30px rgba(16,40,90,.14)}
.login label{display:block;font-size:13px;color:var(--muted);margin:8px 2px 4px;font-weight:600}
.login input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px}
.login button{width:100%;margin-top:16px;background:var(--gold);color:var(--navy);border:0;border-radius:10px;padding:13px;font-weight:800;font-size:16px;cursor:pointer}
.brand{font-family:var(--police-titre);font-weight:700;letter-spacing:.06em;
  font-size:18px;display:flex;align-items:center;gap:8px}
.logo-mini{width:28px;height:28px;border-radius:50%;background:#fff;object-fit:contain}

/* ─── Responsive (mobile / APK WebView) ─── */
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top-logo{display:block}
  .content{padding:14px 14px 84px}
  .kpis{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .bar-row{grid-template-columns:110px 1fr 46px}
  .tbl-head.arr,.tbl-row.arr{grid-template-columns:96px 1fr 66px 56px}
  .tbl-head.arr>div:nth-child(2){display:none}.tbl-row.arr>div:nth-child(2){display:none}
  /* Arrivages par fournisseur : une carte par ligne, tableau resserré. */
  .frn-grid{grid-template-columns:1fr}
  /* Détail d'un fournisseur : 4 colonnes ne tiennent pas sur 390 px — la date
     et le prix passent sous le nom du produit, seul l'état reste à droite.
     On repasse en FLEX : avec une grille dont deux colonnes sont masquées, le
     placement devenait imprévisible (l'état retombait à la ligne). En flex,
     « le produit prend la place restante, l'état est poussé à droite » est
     vrai quelle que soit la longueur du nom. */
  .tbl-head.arr2,.tbl-row.arr2{display:flex;align-items:flex-start;
    gap:9px;padding:9px 11px;font-size:12.5px}
  .tbl-head.arr2>div:nth-child(1),.tbl-row.arr2>div:nth-child(1),
  .tbl-head.arr2>div:nth-child(3),.tbl-row.arr2>div:nth-child(3){display:none}
  .tbl-head.arr2>div:nth-child(2),.tbl-row.arr2>div:nth-child(2){flex:1 1 auto;min-width:0}
  .tbl-head.arr2>div:nth-child(4),.tbl-row.arr2>div:nth-child(4){flex:0 0 auto;
    margin-left:auto;padding-top:1px}
  .meta-m{display:block;color:#6b7a90;font-size:11px;margin-top:3px;
    font-variant-numeric:tabular-nums}
  .neuf{font-size:10.5px;padding:2px 6px}
  .frn .tbl{max-height:none}
  .frn-tot{font-size:22px}
  .frn-nom{font-size:13.5px}
  /* Profils : 3 tuiles par ligne plutôt que 6 minuscules. */
  .niv-grid{gap:8px}
  .niv{padding:11px 10px}
  .niv-n{font-size:21px}
  .niv-l{font-size:10.5px}
  .pf-tuiles{grid-template-columns:repeat(3,1fr)}
  .tbl-head.prof,.pf-h{grid-template-columns:1fr 60px 52px;gap:8px}
  .pf summary{padding:10px 11px}
  .pf-detail{padding:11px}
  .pr-txt b{font-size:15.5px}
  /* Rapports : la taille passe à la trappe, mais JAMAIS la date — c'est elle
     qui distingue le rapport d'aujourd'hui de celui d'hier. Elle est repliée
     sous le nom (.fmeta) pour tenir sur la largeur d'un téléphone. */
  .tbl-head.rap,.tbl-row.rap{grid-template-columns:1fr 58px 34px;gap:8px;padding:9px 11px}
  .tbl-head.rap>div:nth-child(3),.tbl-row.rap>div:nth-child(3){display:none}
  .tbl-head.rap>div:nth-child(4),.tbl-row.rap>div:nth-child(4){display:none}
  .fname .fmeta{display:block;margin-top:2px}

  /* Densité de lecture : titre sur une seule ligne, listes resserrées. */
  .top{gap:8px;padding:12px 14px}
  .top h1{font-size:16px;line-height:1.2;min-width:0}
  .top .chip{font-size:11.5px;padding:5px 10px;white-space:nowrap}
  .rupt{margin:6px 0}
  .rupt summary{font-size:12.5px;padding:8px 10px}
  .dci{font-size:11px}
  .eq{font-size:12.5px;padding:7px 10px;gap:6px}
  .eq .frn{font-size:11px}
  .eq .px{min-width:58px}
  .kpi .kn{font-size:21px}
  .kpi .kl{font-size:11.5px}
  .hero-t{font-size:19px}
  .hero-s{font-size:12.5px}
  .card h3{font-size:13.5px}
  .tbl-row{font-size:12.5px}
  .spark-x{font-size:10.5px}
  .botnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);
    border-top:1px solid var(--line);z-index:20;box-shadow:0 -4px 16px rgba(16,40,90,.08)}
  .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;
    color:var(--muted);font-weight:600}
  .botnav a i{font-style:normal;font-size:20px}
  .botnav a small{font-size:11px}
  .botnav a.on{color:var(--navy)}
  .botnav a.on i{filter:drop-shadow(0 2px 3px rgba(226,169,59,.6))}
}


/* ─── Paramètres → Accès à distance ─── */
.qr-card{text-align:center}
.qr-box{display:inline-block;padding:14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh);margin:6px 0 10px}
.qr-box svg{display:block;max-width:100%;height:auto}
.qr-url{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.qr-url .lbl,.adr .lbl{display:block;width:100%;font-size:12px;color:var(--muted);
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.qr-url code,.adr code{display:inline-block;background:#f3f6fb;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:14px;color:var(--navy);font-weight:700;
  word-break:break-all;margin:2px}
.adr code.ko{color:var(--rouge)}
.adr{margin-bottom:14px;text-align:left}
.sub{color:var(--muted);font-size:13.5px;margin:2px 0 12px;line-height:1.5}
.hint{color:var(--muted);font-size:12.5px;line-height:1.55;margin:8px 0 0;text-align:left}
.frm{text-align:left}
.frm label{display:block;font-size:13px;color:var(--navy2);font-weight:700;margin:12px 2px 5px}
.frm input,.frm select{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;font-size:15px;color:var(--ink);background:#fff;box-sizing:border-box}
.frm input:focus,.frm select:focus{outline:2px solid var(--blue);outline-offset:1px}
.btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.btn{background:var(--navy2);color:#fff;border:0;border-radius:10px;padding:11px 17px;
  font-weight:800;font-size:14px;cursor:pointer}
.btn:hover{background:var(--navy)}
.btn.ghost{background:#fff;color:var(--navy2);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy2);background:#f7f9fd}
.etapes{margin:6px 0 0 18px;padding:0;color:var(--ink);font-size:13.5px;line-height:1.75;text-align:left}
.etapes code{background:#f3f6fb;border-radius:6px;padding:1px 6px;font-weight:700;color:var(--navy)}

/* ── LA VOIX (28/09/2026) ────────────────────────────────────────────────────
   Le bouton « écouter » doit être atteignable au comptoir, boîte dans une
   main : 40 px de haut au moins, et jamais collé au texte qu'il accompagne. */
.btn-voix{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-height:40px; min-width:40px; margin-left:.55rem; padding:0 .6rem;
  border:1px solid #d6dfea; border-radius:10px; background:#fff;
  color:#0f2346; font-size:.95rem; font-weight:600; cursor:pointer;
  vertical-align:middle; line-height:1;
}
.btn-voix:hover{ background:#eef3f9; border-color:#b9c9dd; }
.btn-voix:active{ transform:translateY(1px); }
.btn-voix:disabled{ opacity:.55; cursor:default; }
.btn-voix:focus-visible{ outline:3px solid #e2a93b; outline-offset:2px; }
/* La barre de lecture occupe le bas de l'écran : on rend sa hauteur au
   contenu, sinon elle recouvre la dernière ligne de la liste. */
body:has(#voix-barre){ padding-bottom:64px; }
#voix-barre button{
  min-height:38px; border:0; border-radius:8px; background:#1d3a66; color:#fff; font-size:1rem; cursor:pointer;
}
#voix-barre button:hover{ background:#2a4d82; }