/* ================================================================
   APP STAFF TI'LAKAZ — mise en page propre à l'app (le reste :
   composants.css). Repris de l'app staff Teknimo (main 2.0.14, app.css) :
   en-tête collant 58 px, titre de page, barre d'onglets en pilule (quatre
   onglets) avec fond qui glisse, barre masquée en mission (« mode
   mission ») avec le bouton principal fixé en bas, lignes de tâche à cocher (case 28 px).
   Aucune valeur nouvelle : tokens de socle.css.
   ================================================================ */
.hd{position:sticky;top:0;z-index:30;height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--marge-page) 0;background:var(--bg);
  display:flex;align-items:center;gap:10px;border-bottom:1px solid transparent;transition:border-color .2s;max-width:560px;margin:0 auto}
.hd.scrolled{border-bottom-color:var(--line)}
.hd .logo{font:800 24px/1 var(--font-titre);letter-spacing:-.045em;color:var(--ink)}
.hd .sp{flex:1}
.page{max-width:560px;margin:0 auto;padding:0 var(--marge-page) calc(100px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--espace-cartes)}
.titre-page{margin-bottom:6px}
.titre-page h1.t1{font:800 32px/1.05 var(--font-titre);letter-spacing:-.045em;margin:6px 0 0;color:var(--ink)}
.titre-page .intro{font-size:17px;line-height:1.5;color:var(--ink-2);margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page .titre-section{margin:12px 4px 0}
.page>.roue,#ecran>.roue{margin-top:48px}

/* Barre d'onglets (staff) */
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;height:66px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pilule);box-shadow:0 8px 24px rgba(28,26,23,.10);display:flex;padding:6px;max-width:560px;margin:0 auto}
body:not(.authed) .tabbar{display:none}
.tabbar .glide{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--onglets,4));border-radius:var(--r-pilule);background:var(--soft);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;
  color:var(--ink-2);position:relative;z-index:1;border-radius:var(--r-pilule);cursor:pointer;padding:0;min-width:0}
.tabbar button svg.i{width:22px;height:22px}
.tabbar button.on{color:var(--ink)}
.toast,.etoast{bottom:calc(66px + 10px + 14px + env(safe-area-inset-bottom))}
@media (min-width:761px){ .toast,.etoast{bottom:calc(66px + 10px + 14px + env(safe-area-inset-bottom))} }

/* Appel à installer / activer : carte entière tactile */
.carte.appel{display:flex;align-items:center;gap:14px;width:100%;border:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit;background:var(--e-encours)}
.carte.appel .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.carte.appel .txt b{font-size:16px}
.carte.appel .txt span{font-size:14px;color:var(--t-ink-2)}

/* Demande d'accueil : deux boutons côte à côte */
.carte.demande .warn{margin-bottom:14px}
.deux-btn{display:flex;gap:10px}
.deux-btn .btn{flex:1;padding:0 12px}
.deux-btn .btn+.btn{margin-top:0}
.feuille .bloc .btn+.btn{margin-top:10px}

/* Lignes de tâche à cocher (staff) */
.taches{background:var(--surface)}
.feuille .groupe-liste.taches{background:var(--soft)}
.task{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;min-height:var(--h-tache);width:100%;border:0;background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.task+.task{border-top:1px solid var(--line)}
.task:disabled{cursor:default}
.task .box{width:var(--case);height:var(--case);border-radius:9px;box-shadow:inset 0 0 0 2px #C9C4BC;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t-ink);transition:background .15s,box-shadow .15s}
.task .box svg.i{width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.task.on .box{background:var(--e-prete);box-shadow:none}
.task.on .box svg.i{opacity:1;transform:scale(1)}
.task-txt{flex:1;min-width:0;display:block;padding-top:2px}
.task .tl{font-size:16px;font-weight:600;line-height:1.4}
.task.on .tl{color:var(--ink-2)}

/* Signaler : photos */
.sig-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sig-photo{position:relative}
.sig-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--soft)}
.sig-photo .rbtn{position:absolute;top:6px;right:6px}
.sig-photos .shot{height:auto;aspect-ratio:1;font-size:13px;text-align:center;padding:6px}
.btn .roue{margin-right:4px}

/* Plus, notifications, installation */
.version{text-align:center;color:var(--ink-2);font-size:13px;margin:8px 0 0}
.etat-ligne{margin:0 0 14px;font-size:15px;line-height:1.5}
.etapes{margin:8px 0 0;padding-left:22px;font-size:16px;line-height:1.5}
.etapes li+li{margin-top:8px}
@media (prefers-reduced-motion:reduce){ .tabbar .glide,.task .box,.task .box svg.i{transition:none} }

/* Mission en écran plein (staff : mode mission) */
body.mode-mission .tabbar{display:none}
.page-mission{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.action-fixe{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--marge-page) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(244,242,238,0),var(--bg) 28%);max-width:560px;margin:0 auto}
body.mode-mission .toast,body.mode-mission .etoast{bottom:calc(84px + env(safe-area-inset-bottom))}
.warn.encours{background:var(--e-encours)}
.warn.ok{background:var(--e-prete)}
.tache-ligne{display:flex;align-items:center}
.tache-ligne+.tache-ligne,.tache-ligne+.tache-code{border-top:1px solid var(--line)}
.tache-ligne .task{flex:1;min-width:0}
.tache-ligne .tache-rq{margin-right:12px}
.tache-ligne.manque{background:var(--e-alerte)}
.task .td{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.task .td svg.i{width:16px;height:16px;margin-top:2px}
.tache-code{padding:16px;display:flex;flex-direction:column;gap:10px}
.tache-code-t{display:flex;align-items:center;gap:14px}
.tache-code .box{width:var(--case);height:var(--case);border-radius:9px;background:var(--e-encours);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tache-code .box svg.i{width:18px;height:18px}
.tache-code.on .box{background:var(--e-prete)}
.tache-code .tl{font-size:16px;font-weight:600;line-height:1.4}
.tache-code .ligne-code{justify-content:flex-start;padding-left:42px}
.tache-code .btn.sm{align-self:flex-start;margin-left:42px}
.tache-code .fait{display:flex;align-items:center;gap:6px;margin:0 0 0 42px;font-weight:600;font-size:15px}
.tache-code .fait svg.i{width:18px;height:18px}

/* Lot 10b : accueil du jour sur la ligne, photos du ménage (emplacements
   de l'app staff Teknimo), mes prestations */
.ligne-action{cursor:default}
.ligne-action{flex-wrap:wrap}
.ligne-action .btn.sm{flex:1 0 100%;margin-left:58px;max-width:calc(100% - 58px)}
.ligne-action .pill{margin-left:auto}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{position:relative;height:104px;border-radius:18px;border:0;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;overflow:hidden;text-align:center;padding:4px}
.slot svg.i{width:22px;height:22px}
.slot.on{box-shadow:none;background:var(--e-prete);cursor:default}
.slot.on img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--soft)}
.slot.off{opacity:.5;cursor:default}
.slot.envoi,.tache-rq.envoi{opacity:.5}
.slot-x{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.slot-x svg.i{width:15px;height:15px}
.tache-ligne label.tache-rq{cursor:pointer;margin-right:8px}
.tache-photos{display:flex;gap:6px;margin-right:8px}
.mini-photo{position:relative;display:block}
.mini-photo img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--soft);display:block}
.mini-photo .slot-x{width:22px;height:22px;top:-6px;right:-6px}
.tache-code .box.neutre{background:var(--soft)}
.tache-code .tl.hors{color:var(--ink-2);font-weight:400}
.mois-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mois-chips::-webkit-scrollbar{display:none}
.mois-chips .chip{flex:none}
.presta-total{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.presta-total span{color:var(--ink-2)}
.presta-total b{font:800 28px/1 var(--font-titre);letter-spacing:-.02em;margin-right:auto}