/* 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 CSS) + clair, via variables CSS.
   L'attribut data-theme est posé avant le premier rendu par js/theme.js
   (clair par défaut, sombre par appareil). color-scheme : les contrôles natifs
   (champ date, barres de défilement) suivent la palette. */
:root{
  color-scheme:dark;
  /* --line : filet de séparation ; --line2 : contour d'un objet qu'on manipule
     (champ de saisie, carte). Un champ dessiné avec --line se fond dans le
     panneau et le formulaire paraît sans matière (12/09/2026). */
  --bg:#0f172a; --panel:#1e293b; --panel2:#172033; --line:#334155; --line2:#4a5a73;
  --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"]{
  color-scheme:light;
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f6f8fc; --line:#dde3ec; --line2:#c2cddd;
  --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 chips de compatibilité sur fond clair */
: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; }
/* Prestataire : point rond de sa couleur (palette PFUI.PRESTA_PALETTE) devant son prénom */
.pdot{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; vertical-align:0; }
/* 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; } }

/* ===== Composants partagés (js/pf-comp.js) — lot 1 « socle », 20/09/2026 ===== */

/* Notification (PFC.toast) : en bas, centrée ; chaque page ne règle que sa taille de texte et son plan */
.toast{ position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  padding:12px 18px; border-radius:12px; font-size:13px; line-height:1.4; opacity:0; transition:.25s;
  pointer-events:none; z-index:60; max-width:92vw; background:#052e16; border:1px solid var(--ok); color:#86efac; }
.toast.show{ opacity:1; }
.toast.warn{ background:#3a2a06; border-color:var(--att); color:#fcd34d; }
.toast.err{ background:#3a0a0a; border-color:var(--stop); color:#fca5a5; }
:root[data-theme="light"] .toast{ background:#f0fdf4; border-color:#86efac; color:#166534; box-shadow:0 4px 14px rgba(16,25,43,.12); }
:root[data-theme="light"] .toast.warn{ background:#fffbeb; border-color:#fcd34d; color:#92400e; }
:root[data-theme="light"] .toast.err{ background:#fef2f2; border-color:#fca5a5; color:#b91c1c; }

/* Modale ou feuille (PFC.ov) : le voile commun ; chaque page règle l'alignement, le plan et le fond */
.ov{ position:fixed; inset:0; background:rgba(2,6,23,.66); display:none; align-items:center; justify-content:center; padding:18px; z-index:20; }
.ov.show{ display:flex; }

/* Confirmation (PFC.confirm) : même dessin que les modales du planning, classes à part
   pour ne dépendre d'aucune feuille de page (le suivi a son propre .btn) */
.pf-dialog{ background:var(--panel); border:1px solid var(--line); border-radius:16px; width:360px; max-width:100%;
  max-height:calc(100dvh - 36px); display:flex; flex-direction:column; overflow:hidden; }
.pf-dhead{ padding:18px 22px 15px; flex:none; border-bottom:1px solid var(--line); }
.pf-dhead h3{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.2px; }
.pf-dbody{ padding:14px 22px 16px; overflow:auto; min-height:0; flex:1 1 auto; }
.pf-dbody p{ color:var(--muted); font-size:13.5px; line-height:1.5; margin:4px 0 6px; }
.pf-dfoot{ padding:12px 22px 14px; border-top:1px solid var(--line); flex:none; background:var(--panel); display:flex; gap:10px; justify-content:flex-end; }
.pf-btn{ padding:10px; border:0; border-radius:9px; font:inherit; font-weight:600; cursor:pointer; }
.pf-primary{ background:var(--accent); color:#fff; } .pf-primary:hover{ background:#1d4ed8; }
.pf-ghost{ background:var(--field); border:1px solid var(--line); color:var(--txt); flex:0 0 auto; padding:10px 18px; }
.pf-danger{ background:#dc2626; color:#fff; } .pf-danger:hover{ background:#b91c1c; }
.pf-dfoot .pf-primary, .pf-dfoot .pf-danger{ flex:0 1 220px; padding:10px 26px; font-size:14px; }
:root[data-theme="light"] .pf-dialog{ box-shadow:0 1px 3px rgba(16,25,43,.08); }
.ov.show .pf-dialog{ animation:pf-pop-in .2s cubic-bezier(.2,.9,.3,1); }
@media (max-width:720px){ .pf-dialog{ margin:auto 18px; } .pf-dfoot .pf-primary, .pf-dfoot .pf-danger{ flex:1; } }
@media (pointer:coarse){ .pf-btn{ min-height:44px; } }
@media (prefers-reduced-motion: reduce){ .ov.show .pf-dialog{ animation:none; } }