/* Typographie : Hanken Grotesk (auto-hébergée, poids variable 100-900) */
@font-face{
  font-family:'HankenV';
  src:url('/static/fonts/hanken-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{ --font:'HankenV',system-ui,'Segoe UI',Roboto,sans-serif; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* chiffres alignés partout où l'on compare des nombres (heures, compteurs, dates) */
.upd,.kpi .n,.rdate,.when,.count{ font-variant-numeric:tabular-nums; }

/* Palette PoseFlow — thème sombre (défaut) + clair, via variables CSS. */
:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#172033; --line:#334155;
  --txt:#e2e8f0; --muted:#94a3b8;
  --field:#0b1220; --card:#0e1830; --cardh:#13203c; --hover:#243049; --today:#1b2740;
  --accent:#2563eb; --ok:#22c55e; --att:#f59e0b; --enc:#3b82f6; --term:#64748b; --stop:#ef4444;
}
:root[data-theme="light"]{
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f6f8fc; --line:#dde3ec;
  --txt:#10192b; --muted:#5a6577;
  --field:#f7f9fc; --card:#ffffff; --cardh:#eef3fb; --hover:#e9eef6; --today:#e6effe;
  --accent:#2563eb; --ok:#16a34a; --att:#d97706; --enc:#2563eb; --term:#64748b; --stop:#dc2626;
}

/* Profondeur en thème clair (le sombre n'a pas besoin d'ombres) */
:root[data-theme="light"] header{ box-shadow:0 1px 2px rgba(16,25,43,.05); }
:root[data-theme="light"] .card,
:root[data-theme="light"] .iv,
:root[data-theme="light"] .day,
:root[data-theme="light"] .dayhead,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .sheet{ box-shadow:0 1px 3px rgba(16,25,43,.08); }

/* Lisibilité des badges sur fond clair */
:root[data-theme="light"] .b-confirme{ background:rgba(22,163,74,.12); color:#15803d; }
:root[data-theme="light"] .b-attente { background:rgba(217,119,6,.14);  color:#b45309; }
:root[data-theme="light"] .b-en_cours{ background:rgba(37,99,235,.12);  color:#1d4ed8; }
:root[data-theme="light"] .b-termine { background:rgba(100,116,139,.16); color:#475569; }
:root[data-theme="light"] .c-ok   { background:rgba(22,163,74,.12); color:#15803d; }
:root[data-theme="light"] .c-serre{ background:rgba(217,119,6,.16); color:#b45309; }
:root[data-theme="light"] .c-stop { background:rgba(220,38,38,.14);  color:#b91c1c; }

.theme-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.theme-btn:hover{ background:var(--hover); }
/* Icônes SVG inline (remplacent les emojis) : héritent de la couleur du bouton */
.theme-btn svg, .refresh svg, .nav svg{ display:block; pointer-events:none; }

/* Micro-transitions des modales et bottom-sheets */
@keyframes pf-ov-in{ from{ opacity:0; } }
@keyframes pf-pop-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes pf-sheet-in{ from{ transform:translateY(28px); } }
.ov.show{ animation:pf-ov-in .16s ease-out; }
.ov.show .modal{ animation:pf-pop-in .2s cubic-bezier(.2,.9,.3,1); }
.ov.show .sheet{ animation:pf-sheet-in .24s cubic-bezier(.2,.9,.3,1); }
.ovr.show{ animation:pf-ov-in .16s ease-out; }
.ovr.show .rmodal{ animation:pf-pop-in .2s cubic-bezier(.2,.9,.3,1); }
@media (prefers-reduced-motion: reduce){
  .ov.show, .ov.show .modal, .ov.show .sheet, .ovr.show, .ovr.show .rmodal{ animation:none; }
}

/* Barre de progression globale (chargements) */
#uxbar{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:9999;
  opacity:0; transition:width .2s ease, opacity .3s; box-shadow:0 0 10px var(--accent), 0 0 4px var(--accent); }
#uxbar.on{ opacity:1; }

/* ===== Composants épurés partagés (style Linear/Notion) ===== */
/* Statut : point coloré + libellé sobre (remplace les pastilles) */
.st{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; }
.sdot{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
/* Zone : petit carré arrondi coloré — volontairement distinct du rond de statut
   (même couleur possible, ex. confirmé vert + zone Arles verte : la forme lève l'ambiguïté) */
.zd{ width:8px; height:8px; border-radius:2px; flex:none; display:inline-block; }
/* Type en texte ; la livraison (cas plus rare) est discrètement mise en avant */
.ty-livraison{ color:var(--att); font-weight:700; }
/* Séparateur fin */
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* Squelettes de chargement (placeholders animés) */
.sk{ position:relative; overflow:hidden; background:var(--hover); border-radius:8px; }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); animation:sksh 1.1s infinite; }
:root[data-theme="light"] .sk::after{ background:linear-gradient(90deg, transparent, rgba(16,25,43,.06), transparent); }
@keyframes sksh{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .sk::after{ animation:none; } #uxbar{ transition:opacity .2s; } }