/* ================================================================
   ADMIN TI'LAKAZ — feuille unique, recomposée à partir de la refonte de
   l'admin Teknimo (branche refonte-admin/v1, 7e0710f, lot 7a) et de l'app
   staff Teknimo (main, 2.0.14), lues sans rien y modifier :
   - tokens : socle.css (copie conforme, socle staff = guide) ;
   - base, cartes, listes, boutons, pastilles, champs, feuille, message,
     tuiles de code, envoi de photo, connexion : app.css du staff ;
   - rail, barre du bas, feuille « Plus », en-tête d'écran (titre +
     segment), panneau : app.css et habillage.css de l'admin refonte.
   Pensée d'abord pour le téléphone (390 px), écran large au-delà de 760 px.
   Une seule pièce nouvelle, à valider : l'interrupteur (.inter).
   ================================================================ */

/* ---------- Base (staff) ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-texte);
  font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;touch-action:manipulation}
button,input,textarea,select{font-family:inherit}
input,textarea,select{font-size:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
b,strong{font-weight:600}
svg.i{width:20px;height:20px;flex-shrink:0;display:block}
[hidden]{display:none!important}

/* ---------- Gabarit : rail (écran large) et barre du bas (téléphone) — admin refonte ---------- */
.app-shell{display:flex;min-height:100vh;min-height:100dvh}
.rail{display:none;width:208px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);flex-direction:column;
  padding:20px 12px;gap:2px;position:sticky;top:0;height:100vh;height:100dvh}
.rail-logo{font:800 24px/1 var(--font-titre);letter-spacing:-.04em;color:var(--ink);padding:0 10px 20px;white-space:nowrap}
.rail-item{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:12px;color:var(--ink-2);
  font:400 15px var(--font-texte);background:none;border:0;cursor:pointer;text-align:left;width:100%}
.rail-item svg.i{width:20px;height:20px;flex:none}
.rail-item.active{background:var(--soft);color:var(--ink);font-weight:600;cursor:default}
.rail-item:not(.active):hover{background:var(--soft);color:var(--ink)}
.rail-item.bas{margin-top:auto}
.rail-sep{height:1px;background:var(--line);margin:10px}
.main{flex:1;min-width:0}
.mnav{display:none}
@media (min-width:761px){ body.authed .rail{display:flex} }
@media (max-width:760px){
  .mnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    height:64px;z-index:45;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 24px rgba(28,26,23,.10);padding:5px}
  body:not(.authed) .mnav{display:none}
  .mnav-item{border:0;background:transparent;color:var(--ink-2);font:600 11.5px var(--font-texte);border-radius:999px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
  .mnav-item svg.i{width:20px;height:20px}
  .mnav-item.active{background:var(--soft);color:var(--ink)}
  body.authed .main{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Page et en-tête d'écran (habillage de l'admin refonte) ---------- */
.pm-wrap{max-width:1120px;margin:0;padding:24px 32px 48px;display:flex;flex-direction:column;gap:16px}
/* Cartes côte à côte sur écran large (plus bas) ; empilées sur téléphone. */
.deux-col{display:flex;flex-direction:column;gap:16px}
.ecran-tete{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:0 0 6px}
.ecran-tete h1{margin:0 6px 0 0;font:800 32px/1.05 var(--font-titre);letter-spacing:-.045em;color:var(--ink)}
.ecran-tete .seg{display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ecran-tete .seg::-webkit-scrollbar{display:none}
.ecran-tete .seg button{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:0;background:none;color:var(--ink-2);font:600 14px var(--font-texte);cursor:pointer;white-space:nowrap}
.ecran-tete .seg button.on{background:var(--ink);color:var(--bg)}
.ecran-tete .seg .cpt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--soft);color:var(--ink-2);font:600 12px/20px var(--font-texte);text-align:center}
.ecran-tete .seg button.on .cpt{background:rgba(244,242,238,.2);color:var(--bg)}
.ecran-tete .seg .cpt.alerte{background:var(--e-alerte);color:var(--t-ink)}
.ecran-tete-d{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (max-width:760px){
  .pm-wrap{padding:16px 16px 32px}
  .ecran-tete h1{font-size:30px}
  .ecran-tete .seg{order:3;flex:1 0 100%}
}

/* ---------- Cartes et listes groupées (staff) ---------- */
.carte{background:var(--surface);border-radius:var(--r-carte);padding:var(--padding-carte)}
.carte h2{font:700 20px/1.2 var(--font-titre);letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.carte .sous{font-size:14px;line-height:1.45;color:var(--ink-2);margin:0 0 14px}
.groupe-liste{background:var(--surface);border-radius:var(--r-carte);overflow:hidden}
.ligne-liste{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:72px;width:100%;
  border:0;background:transparent;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.ligne-liste+.ligne-liste{border-top:1px solid var(--line)}
.ligne-liste .txt{flex:1;min-width:0}
.ligne-liste .ti,.ligne-liste .st{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne-liste .ti{font-size:16px;font-weight:600;line-height:1.35}
.ligne-liste .st{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ligne-liste .chev{color:var(--ink-2)}
.ligne-liste .pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ligne-liste .valeur{color:var(--ink-2);font-size:15px;margin-left:auto;white-space:nowrap}
.ligne-lecture{cursor:default}
.tuile-icone{width:var(--tuile-icone);height:var(--tuile-icone);border-radius:var(--r-tuile-icone);background:var(--soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t-ink)}
.tuile-icone.initiale{font:700 18px var(--font-titre);color:var(--t-ink)}
.tuile-icone.tuile-afaire{background:var(--e-afaire)}
.tuile-icone.tuile-encours{background:var(--e-encours)}
.tuile-icone.tuile-prete{background:var(--e-prete)}
.tuile-icone.tuile-alerte{background:var(--e-alerte)}
.tuile-icone.tuile-voyageur{background:var(--e-voyageur)}
.tuile-icone.tuile-repos{background:var(--e-repos)}
.titre-section{font-size:14px;font-weight:600;color:var(--ink-2);margin:8px 4px 0;display:flex;align-items:center;gap:8px}
.vide{padding:20px;color:var(--ink-2);font-size:15px}
/* Phrase d'explication sous l'en-tête d'écran : texte secondaire (14/1.45). */
.ecran-intro{font-size:14px;line-height:1.45;color:var(--ink-2);margin:0 4px}

/* ---------- Boutons (staff) ---------- */
.btn{height:var(--h-bouton);border-radius:var(--r-pilule);border:0;width:100%;display:flex;align-items:center;
  justify-content:center;gap:8px;font-size:16px;font-weight:600;padding:0 20px;cursor:pointer;color:var(--ink);text-decoration:none}
.btn svg.i{width:20px;height:20px}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:disabled{background:#CFCBC4;color:#fff;cursor:default}
.btn.secondary{background:transparent;border:1.5px solid var(--ink)}
.btn.soft{background:var(--soft)}
.btn.light{background:var(--bg);color:var(--ink)}
.btn.sm{height:44px;font-size:15px;width:auto;padding:0 18px}
.btn+.btn{margin-top:10px}
.lien{background:none;border:0;padding:12px 0;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--ink);cursor:pointer}
.rbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;cursor:pointer;position:relative}
.rbtn::after{content:"";position:absolute;inset:-3px}
.rbtn svg.i{width:18px;height:18px}
.rbtn.soft{background:var(--soft);border-color:transparent}
.roue{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);margin:36px auto 0;animation:roue .8s linear infinite}
.btn .roue{width:18px;height:18px;border-width:2.5px;margin:0;border-color:rgba(244,242,238,.35);border-top-color:var(--bg)}
@keyframes roue{to{transform:rotate(360deg)}}

/* ---------- Pastilles (staff) ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:0;border-radius:var(--r-pilule);
  background:var(--soft);font-size:13px;font-weight:600;white-space:nowrap;color:var(--t-ink)}
.pill svg.i{width:14px;height:14px}
.pill.ok{background:var(--e-prete)}
.pill.warn{background:var(--e-alerte)}
.pill.attente{background:var(--e-encours)}
.pill.voyageur{background:var(--e-voyageur)}
.pill.repos{background:var(--e-repos)}
.pill.neutre{background:var(--soft)}
.warn{display:flex;gap:10px;background:var(--e-alerte);color:var(--t-ink);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.45}
.warn svg.i{width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.warn.neutre{background:var(--soft);color:var(--ink)}

/* ---------- Champs (staff) et puces de choix ---------- */
.champ{display:block;margin-bottom:14px}
.champ>span{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 4px 6px}
.sig-champ{width:100%;min-height:52px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  padding:13px 16px;font:inherit;font-size:16px;color:var(--ink)}
textarea.sig-champ{min-height:96px;resize:vertical}
.feuille .sig-champ,.carte .sig-champ{background:var(--surface)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:44px;padding:0 18px;border-radius:var(--r-pilule);border:1px solid var(--line);background:var(--surface);
  font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.deux{display:flex;gap:10px}
.deux .champ{flex:1;min-width:0}

/* ---------- Interrupteur (NOUVEAU, à valider : aucun modèle refait chez Teknimo) ----------
   Pilule 52 × 32 ; éteint : filet --line ; allumé : --ink, comme les puces et
   le segment actifs. Rond blanc de 26 px. */
.inter-ligne{display:flex;align-items:center;gap:14px;min-height:56px}
.inter-ligne .txt{flex:1;min-width:0}
.inter-ligne .ti{display:block;font-size:16px;font-weight:600;line-height:1.35}
.inter-ligne .st{display:block;font-size:14px;line-height:1.45;color:var(--ink-2)}
.inter{position:relative;width:52px;height:32px;flex:0 0 auto;border-radius:999px;border:0;background:var(--line);cursor:pointer;padding:0;transition:background .2s}
.inter::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 3px rgba(28,26,23,.2);transition:transform .2s}
.inter[aria-checked="true"]{background:var(--ink)}
.inter[aria-checked="true"]::after{transform:translateX(20px)}
.inter:disabled{opacity:.45;cursor:default}

/* ---------- Tuiles de code (staff) ---------- */
.codes{display:flex;gap:4px;padding:6px 0}
.codes span{width:36px;flex:0 1 36px;min-width:26px;height:48px;border-radius:var(--r-tuile-code);background:var(--t-ink);color:var(--bg);font:800 28px/48px var(--font-titre);text-align:center}
.ligne-code{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ligne-code .k{font-size:14px;font-weight:600;color:var(--ink-2)}

/* ---------- Lignes clé / valeur dans une fiche ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv span{color:var(--ink-2)}
.kv b{text-align:right;min-width:0;overflow-wrap:anywhere}
.lien-guide{font-size:13px;color:var(--ink-2);word-break:break-all;background:var(--soft);border-radius:12px;padding:10px 12px;margin:8px 0 0}

/* ---------- Feuille (staff) ---------- */
.feuille-fond{position:fixed;inset:0;z-index:80;background:rgba(28,26,23,.35);display:flex;align-items:flex-end;opacity:0;transition:opacity .3s}
.feuille-fond.on{opacity:1}
.feuille{position:relative;width:100%;max-width:560px;margin:0 auto;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-radius:var(--r-ticket) var(--r-ticket) 0 0;padding:10px var(--marge-page) calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.3,.8,.3,1),padding-bottom .25s;outline:none}
.feuille-fond.on .feuille{transform:none}
.feuille .poignee{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 6px}
.feuille-x{position:sticky;top:0;float:right;margin-top:4px;z-index:2}
.feuille h2{font:800 clamp(22px,6.2vw,26px)/1.15 var(--font-titre);letter-spacing:-.035em;margin:18px 52px 6px 0;color:var(--ink)}
.feuille-sous{font-size:16px;color:var(--ink-2);margin:0 0 18px;line-height:1.5}
.feuille .groupe-liste{background:var(--soft);clear:both}
.feuille .bloc{clear:both;margin-top:16px}
.feuille .bloc>.etiq{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 4px 8px}
body.feuille-active{overflow:hidden}
@media (min-width:761px){
  /* Écran large : la fiche s'ouvre à droite (panneau de l'admin refonte). */
  .feuille-fond{align-items:stretch;justify-content:flex-end;padding:12px}
  .feuille{width:440px;max-width:calc(100% - 24px);margin:0;max-height:none;border-radius:20px;box-shadow:0 10px 40px rgba(28,26,23,.16);
    transform:translateX(24px);padding:16px 20px 20px}
  .feuille .poignee{display:none}
}

/* ---------- Messages flottants (staff ; erreur réseau : guide) ---------- */
.toast{position:fixed;left:50%;bottom:calc(64px + 14px + 18px + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,20px);
  width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;line-height:1.35;
  text-align:center;padding:12px 18px;border-radius:22px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.etoast{position:fixed;left:12px;right:12px;bottom:calc(64px + 14px + 18px + env(safe-area-inset-bottom));z-index:90;max-width:536px;margin:0 auto;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);border-radius:18px;padding:12px 12px 12px 16px;
  opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .2s,transform .2s}
.etoast.show{opacity:1;pointer-events:auto;transform:none}
.etoast .et-t{flex:1;min-width:0;display:flex;flex-direction:column}
.etoast .et-t b{font-size:14px}
.etoast .et-t span{font-size:13px;opacity:.75}
.etoast button{height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--bg);color:var(--ink);font:600 14px var(--font-texte);cursor:pointer}
@media (min-width:761px){ .toast,.etoast{bottom:24px} }
body:not(.authed) .toast,body:not(.authed) .etoast{bottom:calc(24px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){ .feuille-fond,.feuille,.toast,.etoast,.inter,.inter::after{transition:none} }

/* ---------- Photos (staff) ---------- */
.photos{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espace-cartes)}
@media (min-width:600px){ .photos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .photos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.photo-carte{background:var(--surface);border-radius:var(--r-carte);padding:12px;display:flex;flex-direction:column;gap:10px}
.photo-carte .ti{font-size:16px;font-weight:600;padding:0 4px}
.photo-carte .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft);font:700 13px var(--font-titre);margin-right:6px}
.shot{width:100%;height:120px;border-radius:16px;border:0;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.shot svg.i{width:22px;height:22px}
.vignette{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--soft);border:0;padding:0;cursor:zoom-in}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.photo-carte .actions{display:flex;gap:8px}
.photo-carte .actions .btn{flex:1;height:40px;font-size:14px;padding:0 10px}
.photo-carte .actions .btn+.btn{margin-top:0}
.photo-carte .actions [data-retirer]{flex:0 0 56px}

/* ---------- Connexion (staff, PIN à 6 chiffres) ---------- */
.connexion{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);max-width:560px;margin:0 auto}
.connexion .hd{height:58px;display:flex;align-items:center;padding:0 var(--marge-page)}
.connexion .logo{font:800 24px/1 var(--font-titre);letter-spacing:-.045em}
.cx-corps{flex:1;display:flex;flex-direction:column;padding:0 var(--marge-page) calc(20px + env(safe-area-inset-bottom))}
.connexion h1.t1{font:800 32px/1.05 var(--font-titre);letter-spacing:-.045em;margin:18px 0 0;color:var(--ink)}
.connexion .intro{font-size:17px;line-height:1.5;color:var(--ink-2);margin:6px 0 0}
.cx-milieu{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px}
.cx-nom{margin:24px 0 14px}
.cx-qui{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 0;font-size:15px;color:var(--ink-2)}
.cx-qui b{color:var(--ink)}
/* 6 cases (le staff en a 4) : 46 × 60 et écart de 8 pour tenir à 360 px. */
.pins{display:flex;justify-content:center;gap:8px;margin:26px 0 6px}
.pbox{width:46px;height:60px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);
  display:flex;align-items:center;justify-content:center;font:800 28px/1 var(--font-titre);color:var(--ink);transition:box-shadow .15s,background .15s}
.pbox.cur{box-shadow:inset 0 0 0 2px var(--ink)}
.pbox.on{background:var(--ink);color:var(--bg);box-shadow:none}
.pbox i{width:12px;height:12px;border-radius:50%;background:var(--bg);display:block}
.pins.shake{animation:shk .35s}
/* Écran unique : les 6 cases sous le champ numérique (transparent, posé dessus). */
.pins-saisie{position:relative}
.pins-saisie .pins{margin:4px 0 0}
.pin-saisie{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:text;caret-color:transparent}
.connexion .btn.primary{margin-top:16px}
@keyframes shk{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.cx-centre{text-align:center}
.cx-voir{font-size:14px;color:var(--ink-2);min-height:44px;padding:0 8px}
.lmsg{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;font-size:15px;font-weight:600;margin-top:10px}
.lmsg svg.i{width:18px;height:18px}
.lmsg.err{background:var(--e-alerte);color:var(--t-ink)}
.lmsg.net{background:var(--surface);color:var(--ink);padding:8px 8px 8px 14px}
.lmsg-t{flex:1}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:330px;margin:18px auto 0;width:100%}
.key{height:64px;border-radius:20px;border:0;background:var(--surface);color:var(--ink);font:700 26px/1 var(--font-titre);cursor:pointer}
.key:active{background:var(--e-afaire)}
.key.fn{background:transparent;display:flex;align-items:center;justify-content:center}
.key.fn svg.i{width:26px;height:26px}
.cx-aide{text-align:center;color:var(--ink-2);font-size:14px;margin:14px 0 0}
.connexion.attente{align-items:center;justify-content:center;text-align:center;padding:0 var(--marge-page)}
.cx-logo{font:800 30px/1 var(--font-titre);letter-spacing:-.045em;color:var(--ink)}
@media (max-height:700px){ .pins{margin:16px 0 6px} .pbox{height:54px} .key{height:54px} }

/* ---------- Écran large : listes en deux colonnes quand la place le permet ---------- */
@media (min-width:1100px){
  .deux-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espace-cartes);align-items:start}
}