/* Écran de timbrage — installé en application sur le bureau de chaque poste.
   Volontairement plus aéré que le reste de l'application : on le manœuvre d'un
   clic, souvent sans le lire. Les couleurs restent celles de Frivision. */
:root{
  --pt-teal:#003652; --pt-teal2:#0a4a66; --pt-gold:#b5a079;
  --pt-ink:#15282f; --pt-ink2:#3c545c; --pt-muted:#6a7c83;
  --pt-piste:#e6ebec; --pt-prevu:#e0cfa8; --pt-travail:#4a7f99; --pt-pause:#c3b389;
  --pt-vert:#2f7d5b; --pt-vert-anneau:#9ec4b4; --pt-rouge:#a33e35; --pt-rouge-anneau:#d99d95;
  --pt-eteint:#a3b2b7; --pt-eteint-bord:#d3dde0; --pt-eteint-fond:#f7fafa;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45;
  color:var(--pt-ink);-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#ccdde3 0%,#e2ebed 55%,#f1f6f7 100%);
  background-attachment:fixed;min-height:100vh;
}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.pt-page{
  max-width:430px;margin:0 auto;display:flex;flex-direction:column;gap:15px;
  padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
}
.pt-attente{padding:60px 24px;text-align:center;color:var(--pt-muted)}

/* ---------- En-tête ---------- */
.pt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 2px}
.pt-logo{display:block;width:160px;height:auto}
.pt-rule{height:3px;width:38px;background:var(--pt-gold);margin-top:9px}
.pt-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pt-muted);margin-top:7px}
.pt-who{text-align:right;font-size:12.5px;color:var(--pt-ink2);line-height:1.4}
.pt-whosub{font-size:11px;color:var(--pt-muted)}

/* ---------- Cartes ---------- */
.pt-card{background:#fff;border-radius:16px;padding:18px 22px 15px;box-shadow:0 2px 12px rgba(0,54,82,.10)}
.pt-date{font-size:18px;font-weight:500;margin:0 0 16px}

/* Frise commune aux trois barres : 07:00 → 19:00 */
.pt-frise{display:flex;align-items:center;gap:14px;margin-bottom:11px}
.pt-frise:last-child{margin-bottom:0}
.pt-ico{width:18px;height:18px;flex:none;fill:none;stroke:#9fb0b5;stroke-width:1.7;stroke-linecap:round}
.pt-piste{flex:1;height:8px;border-radius:4px;background:var(--pt-piste);position:relative;overflow:hidden}
/* Une plage très courte vaut une fraction de pixel sur une frise de douze heures :
   sans largeur minimale elle disparaît, et l'on croit que rien n'a été enregistré. */
.pt-seg{position:absolute;top:0;bottom:0;border-radius:4px;min-width:3px}

/* ---------- Compteur ---------- */
.pt-compteur{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pt-compteur-lab{font-size:15.5px;color:var(--pt-ink2)}
.pt-compteur-val{font-size:20px;font-weight:600;white-space:nowrap}
.pt-du{color:var(--pt-muted);font-weight:500}
/* Les secondes ne servent qu'à montrer que le compteur tourne : sans elles il
   reste figé sur 0h00 pendant une minute entière, et rien ne dit qu'il compte. */
.pt-sec{font-size:12px;color:var(--pt-muted);font-weight:500}
.pt-horaire{
  border-top:1px solid #eef2f3;margin-top:12px;padding-top:10px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;
}
.pt-horaire-lab{color:var(--pt-muted);white-space:nowrap}
.pt-horaire .num{font-weight:500}

/* ---------- Actions ---------- */
.pt-actions{padding-bottom:84px;position:relative;text-align:center;min-height:196px}
.pt-sous{font-size:13.5px;color:var(--pt-muted);margin:0}
.pt-msg{font-size:13px;margin:10px 0 0;color:var(--pt-rouge);font-weight:500}
.pt-lien{
  margin-top:13px;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:15px;color:var(--pt-teal2);font-weight:500;padding:6px 10px;
}
.pt-lien:hover{color:var(--pt-teal)}
.pt-lien:disabled{color:var(--pt-eteint);cursor:default}
/* L'exception, pas la règle : elle reste discrète, sous la reprise, et ne coûte
   un geste que le jour où la pause n'a pas pu être prise. */
.pt-lien-sec{display:block;margin:2px auto 0;font-size:13px;color:var(--pt-muted);font-weight:400;text-decoration:underline}
.pt-lien-sec:hover{color:var(--pt-ink2)}

.pt-ronds{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);display:flex;gap:26px}
.pt-rond{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:128px;height:128px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.6);cursor:pointer;font-family:inherit;
  transition:transform .12s ease;
}
.pt-rond:active{transform:scale(.97)}
.pt-rond-mot{font-size:17px;font-weight:600;letter-spacing:.12em}
.pt-rond-sous{font-size:11.5px}
.pt-start{border:1.5px solid var(--pt-vert-anneau)}
.pt-start .pt-rond-mot{color:var(--pt-vert)} .pt-start .pt-rond-sous{color:#7d9a8e}
.pt-stop{border:1.5px solid var(--pt-rouge-anneau)}
.pt-stop .pt-rond-mot{color:var(--pt-rouge)} .pt-stop .pt-rond-sous{color:#b08079}
/* Un bouton indisponible reste à sa place, éteint : on doit toujours voir où
   l'on arrête sa journée, même avant de l'avoir commencée. */
.pt-rond:disabled{
  background:var(--pt-eteint-fond);border-color:var(--pt-eteint-bord);cursor:default;transform:none;
}
.pt-rond:disabled .pt-rond-mot{color:var(--pt-eteint)}
.pt-rond:disabled .pt-rond-sous{color:#b3c0c4}

.pt-foot{
  margin-top:52px;text-align:center;font-size:10.5px;color:var(--pt-muted);
  display:flex;flex-direction:column;gap:6px;
}
.pt-foot a{color:var(--pt-teal2)}

@media (max-width:420px){
  .pt-ronds{gap:18px}
  .pt-rond{width:116px;height:116px}
  .pt-logo{width:138px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}