/* ===== Mode tablette — esthétique iOS ================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* ===== v349 — JETONS : une seule source, clair ET sombre ==================
   Tout le système visuel (tronc commun + modules Tâches/Workflows/Import qui
   ne lisent QUE ces variables) part d'ici. Règles : les textes secondaires
   restent lisibles (--txt2 ≥ 4.5:1 sur --bg), les remplissages neutres sont
   nommés (--fill*), les couleurs sémantiques ne servent qu'à leur sens
   (--ok / --warn / --red), et le thème sombre ne fait que redéfinir ces
   jetons — aucune règle n'a à connaître le thème. */
:root {
  --bg: #f2f2f7; --card: #ffffff; --txt: #1c1c1e;
  --txt2: #6b6b70;           /* secondaire : lisible en 13 px (était #8e8e93, 2.9:1) */
  --txt3: #8e8e93;           /* tertiaire : repère, jamais une information seule  */
  --sep: rgba(60,60,67,.12); --blue: #007aff; --green: #34c759;
  --red: #ff3b30; --orange: #ff9500; --purple: #af52de; --teal: #5ac8fa;
  --ok: #1e9e46; --warn: #b86a00;               /* texte sur teinte pâle        */
  --radius: 18px; --r-s: 10px; --r-m: 14px;     /* rayons : champ / bouton / carte */
  --fill: rgba(120,120,128,.14);               /* remplissage neutre (bouton)  */
  --fill-2: rgba(120,120,128,.24);             /* … appuyé / plus marqué        */
  --fill-3: rgba(120,120,128,.08);             /* … à peine posé (colonne)      */
  --tint: rgba(0,122,255,.12);                 /* teinte de l'accent            */
  --seg-on: #ffffff;                           /* segment sélectionné           */
  --on-bg: #1c1c1e; --on-txt: #ffffff;         /* filtre sélectionné (fchip.on) */
  --tap: 44px;                                 /* cible tactile minimale        */
  --e-out: cubic-bezier(.2,.9,.25,1);          /* décélération (défaut)         */
  --e-spring: cubic-bezier(.32,1.18,.5,1);     /* léger élan (gestes lancés)    */
  --hairline: 0 0 0 .5px rgba(60,60,67,.08);
  --ombre-1: 0 1px 1px rgba(0,0,0,.03), 0 5px 16px rgba(0,0,0,.05);
  --ombre-2: 0 2px 5px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.09);
  --ombre-3: 0 8px 20px rgba(0,0,0,.10), 0 28px 70px rgba(0,0,0,.18);
  color-scheme: light;
}
/* Thème sombre du SYSTÈME : les mêmes jetons, valeurs iOS sombre. Les
   modules qui avaient leur propre bloc sombre (éditeur/inspecteur de
   workflows, notifications Tâches) lisent d'abord ces variables : ils
   n'étaient sombres qu'en îlots, l'app entière l'est désormais. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f12; --card: #1c1c1e; --txt: #f2f2f7;
    --txt2: #a6a6ad; --txt3: #8e8e93;
    --sep: rgba(84,84,88,.6); --blue: #0a84ff; --green: #30d158;
    --red: #ff453a; --orange: #ff9f0a; --purple: #bf5af2; --teal: #64d2ff;
    --ok: #30d158; --warn: #ffb340;
    --fill: rgba(120,120,128,.22); --fill-2: rgba(120,120,128,.34);
    --fill-3: rgba(120,120,128,.12); --tint: rgba(10,132,255,.22);
    --seg-on: #636366; --on-bg: #e5e5ea; --on-txt: #1c1c1e;
    --hairline: 0 0 0 .5px rgba(255,255,255,.08);
    --ombre-1: 0 1px 1px rgba(0,0,0,.3), 0 5px 16px rgba(0,0,0,.35);
    --ombre-2: 0 2px 5px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
    --ombre-3: 0 8px 20px rgba(0,0,0,.45), 0 28px 70px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--txt);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  user-select: text; -webkit-user-select: text;
}
#app { min-height: 100dvh; display: flex; flex-direction: column; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 17px; color: var(--txt); }

.screen { flex: 1; display: flex; flex-direction: column; min-height: 100dvh;
  animation: fadein .22s ease; }
@keyframes fadein { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---- barre du haut (style iOS) ---- */
.tbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 20px 12px;
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 10;
}
.tbar .back { color: var(--blue); font-size: 18px; font-weight: 500; display: flex;
  align-items: center; gap: 2px; padding: 6px 10px 6px 0; }
.tbar .back::before { content: "‹"; font-size: 30px; line-height: 0; margin-right: 3px; }
/* Fil d'Ariane : le chemin parcouru, chaque segment cliquable. Il défile
   horizontalement plutôt que de pousser le titre hors de l'écran. */
.tbar .chemin { display: flex; align-items: center; gap: 2px; min-width: 0;
  max-width: 46%; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; }
.tbar .chemin::-webkit-scrollbar { display: none; }
.tbar .nseg { color: var(--blue); font-size: 16px; font-weight: 500;
  padding: 6px 2px; display: inline-flex; align-items: center; gap: 3px;
  flex: none; }
.tbar .nseg.off { color: var(--txt3); }
.tbar .nsep { color: var(--txt3); font-size: 17px; padding: 0 1px; flex: none; }
.tbar h1 { font-size: 21px; font-weight: 700; flex: 1; text-align: center;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .spacer { width: 84px; }
.tbar .clock { font-size: 16px; font-weight: 600; color: var(--txt2); font-variant-numeric: tabular-nums; }

.content { flex: 1; padding: 8px 20px calc(env(safe-area-inset-bottom) + 28px);
  max-width: 1000px; width: 100%; margin: 0 auto; }

/* ---- écran comptes ---- */
.acc-wrap { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 40px 24px; }
.acc-logo { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 6px; }
.acc-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.acc-sub { color: var(--txt2); font-size: 16px; margin-bottom: 30px; }
.acc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 44px; max-width: 760px; }
.acc { display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .12s; }
.acc:active { transform: scale(.93); }
.acc .avatar {
  width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 42px; font-weight: 700; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.16); border: 4px solid #fff;
}
.acc .nm { font-size: 18px; font-weight: 600; }
.acc .rl { font-size: 13px; color: var(--txt2); margin-top: -8px; }

/* ---- écran PIN ---- */
.pin-wrap { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px; }
.pin-wrap .avatar { width: 84px; height: 84px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 34px; font-weight: 700;
  color: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.pin-name { font-size: 22px; font-weight: 700; }
.pin-hint { color: var(--txt2); font-size: 15px; min-height: 20px; }
.pin-hint.err { color: var(--red); font-weight: 600; animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.pin-dots { display: flex; gap: 16px; margin: 10px 0 16px; min-height: 16px; }
.pin-dots i { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid var(--txt2); }
.pin-dots i.on { background: var(--txt); border-color: var(--txt); }
.pad { display: grid; grid-template-columns: repeat(3, 82px); gap: 18px; }
.pad button {
  width: 82px; height: 82px; border-radius: 50%; background: var(--fill);
  font-size: 32px; font-weight: 500; transition: background .1s, transform .1s;
  font-variant-numeric: tabular-nums;
}
/* .hit = même retour visuel quand la touche vient du clavier physique */
.pad button:active, .pad button.hit { background: var(--fill-2); transform: scale(.94); }
.pad button.ghost { background: transparent; font-size: 17px; font-weight: 600; color: var(--blue); }
.pad button.ok { background: var(--green); color: #fff; font-size: 22px; }

/* ---- accueil : grille d'apps ---- */
.home-head { display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 26px) 28px 6px; max-width: 1000px;
  margin: 0 auto; width: 100%; }
.home-head .avatar { width: 52px; height: 52px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  color: #fff; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.home-head .hi { flex: 1; }
.home-head .hi b { font-size: 24px; font-weight: 800; display: block; letter-spacing: -.4px; }
.home-head .hi span { color: var(--txt2); font-size: 15px; }
.btn-quit { background: var(--fill); border-radius: 22px; padding: 10px 18px;
  font-size: 15px; font-weight: 600; color: var(--red); }
.btn-quit:active { background: var(--fill-2); }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 34px 20px; padding: 40px 34px; max-width: 1000px; margin: 0 auto; width: 100%; }
/* En-tête de catégorie de l'accueil (Vente / Atelier / Administration) :
   occupe toute la largeur de la grille pour suivre son responsive. */
.home-cat { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 -18px;
  border-bottom: .5px solid var(--sep); padding-bottom: 8px; }
.home-cat:first-child { margin-top: -14px; }
.app-ic { display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .12s; position: relative; }
.app-ic:active { transform: scale(.92); }
.app-ic .ic { width: 108px; height: 108px; border-radius: 26px; display: flex;
  align-items: center; justify-content: center; font-size: 52px;
  box-shadow: 0 10px 24px rgba(0,0,0,.16); color: #fff; position: relative; }
.app-ic .lb { font-size: 16px; font-weight: 600; }
.app-ic .dot { position: absolute; top: -5px; right: -5px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--green); border: 3.5px solid var(--bg);
  animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.ic-heures { background: linear-gradient(160deg, #34c759, #1e9e46); }
.ic-cmd { background: linear-gradient(160deg, #4a9df8, #0a5fd0); }
.ic-stock { background: linear-gradient(160deg, #ff9f0a, #e0700a); }
.ic-admin { background: linear-gradient(160deg, #af52de, #7b2fae); }

/* ---- cartes / listes ---- */
.card { background: var(--card); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 14px; }
.card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt2); font-weight: 600; margin-bottom: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }

/* ---- badgeuse ---- */
.punch { text-align: center; padding: 28px 20px; }
.punch .state { font-size: 16px; color: var(--txt2); font-weight: 600; }
.punch .timer { font-size: 58px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -1px; margin: 6px 0 2px; }
.punch .since { color: var(--txt2); font-size: 15px; margin-bottom: 20px; }
.btn-punch { width: 100%; max-width: 460px; padding: 20px; border-radius: 20px;
  font-size: 21px; font-weight: 700; color: #fff; background: var(--green);
  box-shadow: 0 8px 20px rgba(52,199,89,.35); transition: transform .1s; }
.btn-punch:active { transform: scale(.97); }
.btn-punch.out { background: var(--red); box-shadow: 0 8px 20px rgba(255,59,48,.3); }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 16px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stat b { font-size: 26px; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.stat span { color: var(--txt2); font-size: 13px; font-weight: 600; }

/* ---- listes iOS (heures / stock / commandes) ---- */
.ilist { background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 14px; }
.irow { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: .5px solid var(--sep); min-height: 60px; }
.irow:last-child { border-bottom: 0; }
.irow:active { background: var(--fill-3); }
.irow .t1 { font-size: 17px; font-weight: 600; }
.irow .t2 { font-size: 14px; color: var(--txt2); margin-top: 1px; }
.day-h { padding: 18px 6px 8px; font-size: 15px; font-weight: 700; color: var(--txt2);
  display: flex; justify-content: space-between; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px;
  font-weight: 600; background: var(--fill); white-space: nowrap; }
.chip.green { background: rgba(52,199,89,.16); color: var(--ok); }
.chip.red { background: rgba(255,59,48,.13); color: var(--red); }
.chip.orange { background: rgba(255,149,0,.18); color: var(--warn); }
.chip.blue { background: rgba(0,122,255,.12); color: var(--blue); }
.mono { font-variant-numeric: tabular-nums; }

/* ---- barre recherche + filtres ---- */
.search { display: flex; gap: 10px; margin-bottom: 14px; }
.search input { flex: 1; border: 0; background: var(--fill);
  border-radius: 12px; padding: 12px 16px; font-size: 17px; outline: none; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.fchip { padding: 8px 15px; border-radius: 20px; background: var(--card); font-size: 14px;
  font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.fchip.on { background: var(--on-bg); color: var(--on-txt); }

/* ---- boutons ---- */
.btn { padding: 12px 20px; border-radius: 14px; font-size: 16px; font-weight: 600;
  background: var(--fill); }
.btn:active { opacity: .7; }
.btn.primary { background: var(--blue); color: #fff; }
/* v349 — TROIS niveaux d'action, et rien d'autre :
   .btn.primary = L'action de l'écran (plein, une seule par barre) ;
   .btn         = action secondaire (remplissage neutre) ;
   .btn.quiet   = action discrète (texte accent, sans fond) — annuler, liens.
   .btn.icon    = pictogramme seul : carré ≥44 px et aria-label OBLIGATOIRE.
   Un changement de VUE n'est pas une action : c'est .seg (segments) ;
   un filtre actif est .fchip.on ; un STATUT est .chip — jamais un bouton. */
.btn.quiet { background: transparent; color: var(--blue); }
.btn.quiet:active { background-color: var(--fill); }
/* ⚠️ L'échelle de l'interface (body { zoom: --ui-scale }, « Compact » = .85 par
   défaut sur téléphone) rétrécit tout : la cible se calcule DIVISÉE par
   l'échelle pour rester ≥ 44 px réels quel que soit le réglage. */
.btn.icon { min-width: calc(var(--tap) / var(--ui-scale, 1)); min-height: calc(var(--tap) / var(--ui-scale, 1));
  padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.btn.danger { color: var(--red); }
.btn.round { width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 24px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.btn.plus { background: rgba(52,199,89,.16); color: var(--ok); }
.btn.minus { background: rgba(255,59,48,.12); color: var(--red); }

/* ---- modale (feuille iOS) ---- */
.sheet-bg { position: fixed; inset: 0; background: transparent; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center; animation: fadein .18s;
  pointer-events: none; }
.sheet { background: var(--bg); width: 100%; max-width: 640px; max-height: 92%;
  border-radius: 22px 22px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 22px);
  overflow-y: auto; animation: up .24s ease; pointer-events: auto;
  box-shadow: 0 -10px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(120,120,128,.18); }
@keyframes up { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(120,120,128,.55);
  margin: -6px auto 8px; padding: 12px 44px; box-sizing: content-box;
  background-clip: content-box; cursor: ns-resize; touch-action: none; }
.sheet h2 { font-size: 21px; font-weight: 800; margin-bottom: 16px; text-align: center; }
.frm label { display: block; font-size: 13px; font-weight: 600; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
.frm input, .frm select, .frm textarea { width: 100%; border: 0; background: var(--card);
  border-radius: 12px; padding: 13px 15px; outline: none; }
.frm .duo { display: flex; gap: 12px; } .frm .duo > div { flex: 1; }
.sheet .actions { display: flex; gap: 12px; margin-top: 22px; }
.sheet .actions .btn { flex: 1; padding: 15px; font-size: 17px; text-align: center; }

/* ---- détail commande ---- */
.od-amount { font-size: 30px; font-weight: 800; }
.comp { display: flex; gap: 10px; padding: 9px 0; border-bottom: .5px solid var(--sep);
  font-size: 15px; align-items: baseline; }
.comp:last-child { border: 0; }
.comp .q { color: var(--txt2); font-variant-numeric: tabular-nums; min-width: 34px; }

/* ---- toast ---- */
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translateX(-50%) translateY(20px); background: rgba(28,28,30,.96); color: #fff;
  padding: 13px 22px; border-radius: 16px; font-size: 16px; font-weight: 600; opacity: 0;
  transition: opacity .25s, transform .25s; z-index: 100000; pointer-events: none;
  max-width: min(88vw, 460px); text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- bannières de notification premier-plan (canal son fiable, empilables) ---- */
#notifBannerHost { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 50%;
  transform: translateX(-50%); z-index: 100001; display: flex; flex-direction: column;
  gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.notif-banner { background: rgba(28,28,30,.97); color: #fff; border-radius: 14px;
  padding: 11px 16px; box-shadow: 0 8px 26px rgba(0,0,0,.4); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(-14px);
  transition: opacity .22s, transform .22s; pointer-events: auto; }
.notif-banner.show { opacity: 1; transform: translateY(0); }
.notif-banner.clickable { cursor: pointer; }
.notif-banner .nb-title { font-weight: 700; font-size: 15px; }
.notif-banner .nb-body { font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 2px; }

.loader { text-align: center; color: var(--txt2); padding: 46px 0; font-size: 16px; }
.empty { text-align: center; color: var(--txt2); padding: 36px 16px; font-size: 16px; }
/* v349 : les états partagés (vide / erreur) vivent en fin de fichier (§ v348) ;
   .empty en est l'ancien nom, même rendu. */

/* ---- téléphone (petits écrans) ---- */
@media (max-width: 640px) {
  .acc-grid { gap: 24px 26px; }
  .acc .avatar { width: 86px; height: 86px; font-size: 34px; }
  .apps { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 26px 12px; padding: 28px 22px; }
  .app-ic .ic { width: 86px; height: 86px; font-size: 40px; border-radius: 22px; }
  .app-ic .lb { font-size: 14px; }
  .punch .timer { font-size: 44px; }
  .stats3 { gap: 8px; } .stat b { font-size: 20px; }
  .content { padding: 8px 14px calc(env(safe-area-inset-bottom) + 22px); }
  .pad { grid-template-columns: repeat(3, 74px); gap: 14px; }
  .pad button { width: 74px; height: 74px; font-size: 28px; }
}

/* ===== v132 : apps complètes ========================================== */
.g-green { background: linear-gradient(160deg, #34c759, #1e9e46); }
.g-yellow { background: linear-gradient(160deg, #ffcc00, #e0a800); }
.g-blue { background: linear-gradient(160deg, #4a9df8, #0a5fd0); }
.g-orange { background: linear-gradient(160deg, #ff9f0a, #e0700a); }
.g-purple { background: linear-gradient(160deg, #af52de, #7b2fae); }
.g-red { background: linear-gradient(160deg, #ff5b52, #d5271e); }
.g-teal { background: linear-gradient(160deg, #5ac8fa, #1f97cc); }
.g-pink { background: linear-gradient(160deg, #ff2d55, #c9184a); }
.g-indigo { background: linear-gradient(160deg, #5e5ce6, #3634a3); }
.g-gray { background: linear-gradient(160deg, #8e8e93, #5b5b60); }
.g-mint { background: linear-gradient(160deg, #00c7be, #009a92); }
.g-brown { background: linear-gradient(160deg, #a2845e, #7a6244); }

.seg { display: flex; background: var(--fill); border-radius: 12px;
  padding: 3px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 9px 6px; border-radius: 9px; font-size: 14px;
  font-weight: 600; color: var(--txt2); white-space: nowrap; }
.seg button.on { background: var(--seg-on); color: var(--txt); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.sw { width: 52px; height: 32px; border-radius: 16px; background: var(--fill-2);
  position: relative; transition: background .18s; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: left .18s; }
.sw.on { background: var(--green); } .sw.on::after { left: 22px; }

.app-ic .cnt { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 12px; background: var(--red); color: #fff; font-size: 13px;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bg); }

.editrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card); border-radius: 14px; margin-bottom: 8px; }
.editrow.off { opacity: .45; }
.editrow .mini { width: 40px; height: 40px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; color: #fff; flex: none; }
.editrow .nm { flex: 1; font-size: 16px; font-weight: 600; }
.editrow .arr { width: 40px; height: 40px; border-radius: 10px; font-size: 18px;
  background: var(--fill); display: inline-flex; align-items: center; justify-content: center; }
.editrow .arr:disabled { opacity: .25; }

.slot { display: flex; gap: 12px; padding: 12px 16px; border-bottom: .5px solid var(--sep);
  align-items: center; width: 100%; text-align: left; }
.slot:last-child { border: 0; }
.slot .hrs { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
  min-width: 92px; }
.slot .bpill { width: 12px; height: 34px; border-radius: 6px; flex: none; }
.slot.st-fait { opacity: .5; }

.alert { display: flex; gap: 10px; align-items: center; background: var(--card);
  border-left: 5px solid var(--orange); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 8px; font-size: 15px; }
.alert.warn { border-left-color: var(--red); }

.logbox { background: #1c1c1e; color: #d9d9de; border-radius: 14px; padding: 12px;
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto;
  max-height: 46dvh; white-space: pre-wrap; word-break: break-all; user-select: text;
  -webkit-user-select: text; }

.kv { display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: .5px solid var(--sep); font-size: 15px; }
.kv:last-child { border: 0; }
.kv b { font-variant-numeric: tabular-nums; }
.big2 { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); } .neg { color: var(--red); }
.stats2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.txtarea { width: 100%; border: 0; background: var(--card); border-radius: 12px;
  padding: 13px 15px; outline: none; min-height: 110px; font-size: 16px; resize: vertical; }
.linkbtn { color: var(--blue); font-weight: 600; font-size: 15px; text-decoration: none; }

/* ===== v137 : bon de livraison signé + réglages + divers portages ===== */
.dn-pad { width: 100%; height: 190px; background: #fff; border: 2px dashed var(--sep);
  border-radius: 14px; touch-action: none; cursor: crosshair; display: block; }
.dn-hint { text-align: center; color: var(--txt2); font-size: 13px; margin-top: 6px; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: .5px solid var(--sep); }
.setrow:last-child { border: 0; }
.setrow label { flex: 1; font-size: 15px; font-weight: 500; }
.setrow input[type=text], .setrow input[type=number], .setrow select {
  width: 46%; border: 0; background: var(--fill); border-radius: 10px;
  padding: 10px 12px; font-size: 15px; outline: none; }
.setrow input[type=color] { width: 56px; height: 38px; border: 0; background: none; padding: 0; }
.upl { display: block; width: 100%; padding: 16px; border: 2px dashed var(--sep);
  border-radius: 14px; text-align: center; color: var(--txt2); font-size: 15px; }
.upl input { display: none; }

/* ===== v138 : redimensionnement par appareil ==========================
   Points de rupture : petit téléphone / téléphone / tablette portrait /
   tablette paysage / desktop, + cas paysage court (téléphone couché). */

/* --- tablette portrait (768-1023) : plus d'apps par ligne, respirations --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .content, .home-head, .apps { max-width: 900px; }
  .apps { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
  .stats3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- tablette paysage & petit desktop (1024-1365) --- */
@media (min-width: 1024px) and (max-width: 1365px) {
  .content, .home-head { max-width: 1100px; }
  .apps { max-width: 1100px; grid-template-columns: repeat(5, 1fr); gap: 34px 22px; }
  .sheet { max-width: 720px; border-radius: 22px; margin-bottom: 4dvh; }
  .sheet-bg { align-items: center; }
}

/* v194 — Kanban : sur ordinateur (≥1024), le tableau prend TOUTE la largeur de
   l'écran. Le plafond de .content (1000/1100/1200px) garde son sens pour du
   texte en colonne, mais ici il coupait des colonnes de statut alors qu'il
   restait de la place. La classe .wide est posée par le JS en vue Kanban. */
@media (min-width: 1024px) {
  .content.wide { max-width: none; }
}

/* --- grand écran / desktop (≥1366) : on garde une colonne lisible --- */
@media (min-width: 1366px) {
  .content, .home-head { max-width: 1200px; }
  .apps { max-width: 1200px; grid-template-columns: repeat(6, 1fr); gap: 38px 24px; }
  .app-ic .ic { width: 116px; height: 116px; font-size: 56px; }
  .sheet { max-width: 780px; border-radius: 22px; margin-bottom: 5dvh; }
  .sheet-bg { align-items: center; }
  .stats2 { grid-template-columns: repeat(4, 1fr); }
}

/* --- paysage court (téléphone couché, hauteur < 500px) : compacter --- */
@media (max-height: 500px) and (orientation: landscape) {
  .pin-wrap { padding: 10px; gap: 6px; }
  .pin-wrap .acc-logo, .pin-wrap .avatar { display: none; }
  .acc-title { font-size: 20px; }
  .pad { grid-template-columns: repeat(3, 62px); gap: 9px; }
  .pad button { width: 62px; height: 62px; font-size: 24px; }
  .pin-dots { margin: 4px 0 8px; }
  .apps { padding: 14px 22px; gap: 18px 12px; }
  .app-ic .ic { width: 66px; height: 66px; font-size: 30px; border-radius: 18px; }
  .app-ic .lb { font-size: 12.5px; }
  .home-head { padding-top: calc(env(safe-area-inset-top) + 10px); }
  .punch { padding: 14px; } .punch .timer { font-size: 34px; }
  .sheet { max-height: 96%; }
}

/* --- petit téléphone (≤380px) : éviter les débordements --- */
@media (max-width: 380px) {
  .apps { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; padding: 22px 14px; }
  .app-ic .ic { width: 74px; height: 74px; font-size: 34px; border-radius: 19px; }
  .app-ic .lb { font-size: 12.5px; }
  .pad { grid-template-columns: repeat(3, 66px); gap: 11px; }
  .pad button { width: 66px; height: 66px; font-size: 25px; }
  .stats3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat b { font-size: 17px; } .stat span { font-size: 11.5px; }
  .stat .t2 { font-size: 10.5px; }
  .tbar h1 { font-size: 18px; }
  /* Petit écran : la maison suffit, le mot « Accueil » prendrait la place
     des segments utiles du chemin. */
  .tbar .nseg-lb { display: none; }
  .tbar .nseg { font-size: 15px; }
  .tbar .chemin { max-width: 52%; }
  .home-head .hi b { font-size: 20px; }
  .btn { padding: 10px 14px; font-size: 15px; }
  .irow { padding: 12px 14px; gap: 10px; }
  .setrow { flex-wrap: wrap; }
  .setrow input[type=text], .setrow input[type=number], .setrow select { width: 100%; }
}

/* --- tables/listes larges : jamais de débordement horizontal --- */
.ilist, .card { max-width: 100%; }
.irow .t1, .irow .t2 { overflow-wrap: anywhere; }
.logbox { max-width: 100%; }

/* --- confort tactile : cibles ≥44px partout (recommandation Apple) --- */
.btn, .fchip, .seg button, .irow button { min-height: 40px; }
.pad button, .btn-punch { min-height: 44px; }

/* ===== constructeur visuel de workflows (tablette) ===== */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.fnode { background: var(--card); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); border-left: 5px solid var(--blue); }
.fnode.trig { border-left-color: var(--purple); }
.fnode.filt { border-left-color: var(--orange); }
.fnode.msg { border-left-color: var(--blue); }
.fnode.br { border-left-color: var(--green); }
.fnode.opt { border-left-color: var(--txt2); }
.fnode h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; display: flex;
  align-items: center; gap: 8px; }
.fnode h4 .n { width: 24px; height: 24px; border-radius: 50%; background: var(--fill);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.farrow { align-self: center; width: 2px; height: 20px; background: var(--sep); position: relative; }
.farrow::after { content: "▾"; position: absolute; left: -6px; bottom: -8px; color: var(--txt2); font-size: 13px; }
.fnode label { display: block; font-size: 12px; font-weight: 600; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 5px; }
.fnode input, .fnode select, .fnode textarea { width: 100%; border: 0;
  background: var(--fill); border-radius: 10px; padding: 10px 12px;
  font-size: 15px; outline: none; }
.fnode .duo { display: flex; gap: 10px; } .fnode .duo > div { flex: 1; }
.brcard { background: var(--fill-3); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.brcard .bt { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.wfprev { background: #e5ddd5; border-radius: 14px; padding: 12px; margin-top: 8px; }
.wfbub { background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  max-width: 85%; box-shadow: 0 1px 2px rgba(0,0,0,.15); white-space: pre-wrap; }

/* ===== v140 : ronds parfaits + échelle d'interface + en-tête compact ===== */

/* 1) RONDS PARFAITS partout : jamais compressés par un parent flex. */
.avatar, .home-head .avatar, .pin-wrap .avatar, .acc .avatar,
.app-ic .dot, .app-ic .cnt, .btn.round, .pin-dots i, .fnode h4 .n {
  flex: 0 0 auto; flex-shrink: 0;
}
.avatar, .home-head .avatar, .pin-wrap .avatar, .acc .avatar,
.app-ic .dot, .btn.round, .pin-dots i, .fnode h4 .n { aspect-ratio: 1 / 1; }
.avatar { border-radius: 50%; }              /* base commune aux avatars inline (JS) */
.app-ic .cnt { border-radius: 12px; }        /* badge compteur = pilule, garde aspect */

/* 2) ÉCHELLE DE L'INTERFACE (met à l'échelle tout le contenu de l'app,
   mémorisée par appareil ; ce n'est pas le zoom du navigateur). */
:root { --ui-scale: 1; }
body { zoom: var(--ui-scale); }

.scalepick { display: flex; gap: 10px; }
.scalepick button { flex: 1; padding: 14px 6px; border-radius: 14px; font-weight: 700;
  background: var(--fill); border: 2px solid transparent; }
.scalepick button.on { border-color: var(--blue); background: rgba(0,122,255,.1); color: var(--blue); }
.scalepick button .az { display: block; font-weight: 800; }
.btn-aa { background: var(--fill); border-radius: 22px; padding: 10px 14px;
  font-size: 15px; font-weight: 700; flex: 0 0 auto; }

/* 3) EN-TÊTE ACCUEIL COMPACT SUR MOBILE : maximum de place pour la grille. */
@media (max-width: 640px) {
  .home-head { gap: 9px; padding: calc(env(safe-area-inset-top) + 10px) 16px 4px; align-items: center; }
  .home-head .avatar { width: 40px; height: 40px; font-size: 17px; border-width: 2px; }
  .home-head .hi { min-width: 0; }
  .home-head .hi b { font-size: 18px; line-height: 1.15; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .home-head .hi span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-head .btn, .home-head .btn-quit, .home-head .btn-aa {
    padding: 8px 11px; font-size: 13.5px; }
  .apps { padding: 20px 18px; gap: 26px 12px; }
}
@media (max-width: 380px) {
  .home-head .hi b { font-size: 16.5px; }
  .home-head .btn, .home-head .btn-quit, .home-head .btn-aa { padding: 7px 9px; font-size: 12.5px; }
  .home-head .avatar { width: 36px; height: 36px; font-size: 15px; }
}

/* ===== v141 : anti-chevauchement en-tête + z-index cohérents ===== */
.home-head { flex-wrap: nowrap; }
.home-head .btn, .home-head .btn-quit, .home-head .btn-aa { flex: 0 0 auto; white-space: nowrap; }
.tbar { z-index: 20; }
.sheet-bg { z-index: 500; }
/* le toast doit toujours passer au-dessus des feuilles et de la barre */
#toast { z-index: 100000; }

/* ===== v144 : indicateur mode atelier ===== */
.kiosk-badge { position: fixed; left: calc(env(safe-area-inset-left) + 12px);
  bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 99999;
  background: rgba(255,149,0,.95); color: #1c1c1e; font-weight: 800; font-size: 12.5px;
  padding: 6px 12px; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  pointer-events: none; letter-spacing: .02em; }

/* v155 — sélection de texte réactivée sur les pièces/composants (copier-coller
   fournisseur) malgré le user-select:none global ; boutons/chips exclus. */
.seltext, .seltext * { user-select: text !important; -webkit-user-select: text !important; cursor: text; }
.comp .chip, .btn, .fchip { user-select: none !important; -webkit-user-select: none !important; }
/* Aperçu des remarques de montage sur la carte de commande (2 lignes max + …) */
.od-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--txt2); margin-top: 3px; font-style: italic; word-break: break-word; }
/* v157 — composant de commande cliquable → fiche produit */
.comp.clickable { cursor: pointer; border-radius: 10px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.comp.clickable:active { background: var(--fill); }

/* v159 — vue Kanban Commandes (drag & drop souris) */
.kanban { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start;
  padding: 2px 2px 14px; -webkit-overflow-scrolling: touch; }
.kcol { flex: 0 0 272px; max-width: 272px; background: var(--fill-3);
  border-radius: 14px; padding: 10px; }
.kcol-h { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; padding: 2px 4px 10px; }
.kcards { display: flex; flex-direction: column; gap: 8px; min-height: 46px;
  border-radius: 10px; }
.kcard { background: var(--card); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; }
.kcards.dragover { outline: 2px dashed var(--blue); outline-offset: 3px;
  background: rgba(0,122,255,.06); }

/* v160 — INVERSION : tout le contenu est sélectionnable par défaut (adresse,
   fiches, listes, montants…). user-select:none UNIQUEMENT sur les contrôles
   où une sélection gênerait le tactile / le drag. */
.tbar, .tbar *,
.btn, .btn *,
.fchip, .chips-scroll *,
.seg, .seg *,
.pad, .pad *, .pin-wrap, .pin-dots, .pin-dots *,
.acc, .acc *, .acc-grid,
.apps, .app-ic, .app-ic *,
.grab, .cnt, .kiosk-badge,
.kcard, .kcard *,
button.chip,
.actions, .actions *,
.linkbtn {
  user-select: none !important; -webkit-user-select: none !important;
}
/* champs de saisie : comportement natif */
input, select, textarea { user-select: auto !important; -webkit-user-select: auto !important; }

/* v163 — feuille plein écran (cran 100%) + boutons désactivés */
.sheet.full { max-height: 100%; border-radius: 0; margin-bottom: 0 !important;
  padding-top: calc(env(safe-area-inset-top) + 8px); }
.btn:disabled { opacity: .35; pointer-events: none; }

/* v174 — éditeur visuel de workflows (canvas type Make) */
.wfc-tools { gap: 8px; padding: 8px 14px; flex-wrap: wrap; }
/* (v199) Le canvas maison a été retiré : ses styles .wfc/.wfnode/.wfport/
   .wfedge/.wfbadge sont partis avec lui. Le nouvel éditeur porte ses propres
   styles dans wf-editor.css (préfixe wfe-) et wf-inspector.css (wfi-).
   .wfc-tools est CONSERVÉ ci-dessus : la barre d'outils du nouvel écran l'utilise. */

/* v180 — fenêtres libres (déplaçables + redimensionnables) sur écran ≥700px */
.sheet.win { position: absolute; margin: 0 !important; border-radius: 16px;
  max-width: none; width: 640px; animation: none;
  box-shadow: 0 14px 50px rgba(0,0,0,.32), 0 0 0 1px var(--fill-2); }
.sheet.win.winfull { border-radius: 0; }
.sheet-bg.winbg { align-items: initial; justify-content: initial; }

/* v202 — habillage type macOS : barre de titre + trois pastilles.
   La barre est en position:sticky et non absolute : elle occupe sa place dans
   le flux (donc _winFit la compte dans la hauteur utile) tout en restant collée
   en haut quand le contenu défile. Les marges négatives la font déborder sur le
   padding latéral de .sheet pour qu'elle aille d'un bord à l'autre. */
.sheet.win { padding-top: 0; }              /* la barre fournit la marge haute */
.sheet.win > .grab { display: none; }        /* remplacée par la barre de titre */
.sheet.win h2.win-h2 { display: none; }      /* titre repris par la barre */
.win-bar { position: sticky; top: 0; z-index: 22;
  display: flex; align-items: center; height: 38px;
  margin: 0 -20px 14px; padding: 0 13px;
  background: var(--card); border-bottom: .5px solid var(--sep);
  border-radius: 16px 16px 0 0;
  cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.sheet.win.winfull .win-bar { border-radius: 0; }
.win-title { position: absolute; left: 96px; right: 96px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--txt2); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-lights { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; z-index: 1; }
.win-dot { width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 0;
  flex: 0 0 auto; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.win-dot span { font-size: 9px; line-height: 1; font-weight: 800;
  color: rgba(0,0,0,.55); opacity: 0; transition: opacity .12s; }
/* pictogrammes visibles au survol du groupe, comme sur macOS */
.win-lights:hover .win-dot span, .win-dot:focus-visible span { opacity: 1; }
.win-close { background: #ff5f57; }
.win-min { background: #febc2e; }
.win-max { background: #28c840; }

/* v203 — plusieurs fenêtres ouvertes : celle du premier plan (.winon) se
   distingue par une ombre plus marquée et un titre plein contraste ; les
   autres s'estompent, comme des fenêtres d'arrière-plan sur macOS. */
.sheet.win { box-shadow: 0 8px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(120,120,128,.18); }
.sheet.win.winon { box-shadow: 0 18px 56px rgba(0,0,0,.34), 0 0 0 1px rgba(120,120,128,.24); }
.sheet.win:not(.winon) .win-title { opacity: .55; }
.sheet.win:not(.winon) .win-dot { filter: saturate(.25) brightness(1.08); }
.sheet.win:not(.winon) .win-lights:hover .win-dot { filter: none; }

/* Fenêtre réduite : repliée sur sa seule barre de titre, rangée dans le Dock en
   bas à gauche. La LARGEUR est posée en JS (_winDock la réduit quand la rangée
   se remplit), donc surtout pas de !important ici. */
.sheet.win.winmin { height: 38px !important;
  max-height: 38px !important; overflow: hidden; padding-bottom: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 1px var(--fill-2); }
.sheet.win.winmin .win-bar { cursor: pointer; }
.sheet.win.winmin > *:not(.win-chrome) { display: none !important; }
.sheet.win.winmin .win-rs { display: none; }
.sheet.win.winmin .win-bar { margin-bottom: 0; border-radius: 16px; border-bottom: 0; }
.sheet.win.winmin .win-title { left: 92px; right: 12px; text-align: left; }
/* v202 — poignées ENTIÈREMENT à l'intérieur du cadre. Débordantes (bottom/right
   négatifs), elles ajoutaient 6 px de défilement fantôme à toute fenêtre : une
   barre de défilement apparaissait même quand le contenu tenait, et la mesure
   de la hauteur utile s'en trouvait faussée. Leur moitié extérieure était de
   toute façon rognée par overflow-y:auto — rien n'est perdu. */
.win-rs { position: absolute; z-index: 19; touch-action: none; }
.win-rs-n { top: 0; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.win-rs-s { bottom: 0; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.win-rs-e { right: 0; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.win-rs-w { left: 0; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.win-rs-ne { top: 0; right: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.win-rs-sw { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.win-rs-nw { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.win-rs-se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.sheet.win .grab { cursor: move; }

/* v191 — VRAI split-screen mobile : écran coupé en 2 zones indépendantes.
   Le haut (#app = liste/Kanban/app en cours) est contraint à (100-pct)% en
   position:fixed (même repère viewport que la feuille, insensible au zoom),
   scrollable ; le bas = la feuille de détail. Pas de chevauchement. */
body.split { overflow: hidden; }
#splitWrap {
  position: fixed; top: 0; left: 0; right: 0;   /* bottom = pct%, posé en JS */
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); z-index: 10;
  border-bottom: 1px solid var(--sep);
}
body.split #app { min-height: 0; }
body.split .sheet { position: relative; border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 22px rgba(0,0,0,.25); }
body.split .sheet .grab { width: 64px; height: 6px; background: var(--blue);
  opacity: .85; }
/* la barre de séparation = zone de la poignée, bien visible et saisissable */
body.split .sheet::before { content: ""; position: absolute; left: 0; right: 0;
  top: 0; height: 3px; background: var(--blue); opacity: .5;
  border-radius: 14px 14px 0 0; }
@media (min-width: 700px) {
  #splitWrap { position: static; overflow: visible; border: 0; }
  body.split { overflow: auto; }
}

/* ---- module Import (écrans Produits / Lots) ----
   Les champs de formulaire n'avaient de style que dans `.frm` : les écrans
   pleine page en étaient dépourvus, d'où des champs bruts. `.inp` fournit le
   même rendu, utilisable partout (écran comme feuille). */
.inp { border: 0; background: var(--card); border-radius: 12px;
  padding: 11px 13px; outline: none; color: var(--txt); min-width: 0;
  border: .5px solid var(--sep); }
.inp:focus { border-color: var(--blue); }
select.inp { flex: 1 1 140px; }

/* Barre d'actions groupées : elle doit rester sous la main quand on fait
   défiler une longue liste, sinon toute sélection au-delà d'un écran oblige à
   remonter. */
.imp-barre { position: sticky; top: 0; z-index: 5; }

/* Une ligne produit : la case à cocher ne doit jamais rétrécir, et le titre
   doit pouvoir être tronqué plutôt que de pousser les prix hors de l'écran. */
.ipck { width: 20px; height: 20px; accent-color: var(--blue); }

/* Compteurs par état, utilisés comme filtres. */
.seg button.on { font-weight: 700; }

/* ===== v298 : passe « interfaces fluides » (skill apple-design) ==========
   AFFICHAGE UNIQUEMENT — aucun sélecteur retiré, aucune structure changée :
   cette section SURCHARGE en fin de cascade. Quatre axes, tirés des
   conférences design d'Apple traduites pour le web :
   1. RÉPONSE : retour visuel à l'appui (pointer-down), jamais à la relâche.
   2. MATIÈRE : les surfaces flottantes sont des matériaux translucides
      (flou + saturation + arête claire), l'épaisseur suit la taille.
   3. TYPOGRAPHIE : l'interlettrage dépend de la taille (serré en grand,
      neutre en petit), chiffres tabulaires, optical sizing.
   4. ACCESSIBILITÉ : reduced-motion / reduced-transparency / contrast
      respectés, focus clavier visible. */

/* ---- 1. RÉPONSE : l'appui se voit À L'INSTANT, la relâche est douce.
   L'astuce : la transition LONGUE vit sur l'état de repos (elle joue au
   retour), l'état :active pose une transition COURTE (l'appui est
   immédiat). Uniquement transform/opacity : compositeur, jamais de reflow. */
.btn, .fchip, .seg button, .irow, .kcard, .editrow .arr, .pad button,
.scalepick button, .btn-aa, .btn-quit, .win-dot, .tbar .nseg {
  transition: transform .26s cubic-bezier(.2,.9,.25,1),
              opacity .26s cubic-bezier(.2,.9,.25,1),
              background-color .2s ease, box-shadow .26s ease;
}
.btn:active { opacity: 1; transform: scale(.97); transition-duration: .06s;
  background-color: var(--fill-2); }
.btn.primary:active { background-color: var(--blue); filter: brightness(.94); }
.fchip:active { transform: scale(.95); transition-duration: .06s; }
.seg button:active { transform: scale(.96); transition-duration: .06s; }
.tbar .nseg:active { opacity: .55; transition-duration: .04s; }
.irow:active { transition-duration: .05s; }
.editrow .arr:active { transform: scale(.92); transition-duration: .06s; }
.linkbtn:active { opacity: .55; }
.comp.clickable { transition: background-color .2s ease; }
.kcard { will-change: auto; }
.kcard.dragging { will-change: transform; }

/* ---- 2. MATIÈRE & PROFONDEUR ------------------------------------------- */
/* Barre du haut : matériau plus présent (saturation), et un VOILE dégradé à
   la place d'un trait dur — l'effet « bord de défilement » d'iOS. */
.tbar { background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); }
.tbar::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -14px; height: 14px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), transparent); }

/* Cartes : ombre en deux couches (contact + portée) + liseré hairline —
   plus doux qu'un seul aplat, et la carte « tient » sur le fond. */
.card, .stat, .ilist { box-shadow: var(--hairline), var(--ombre-1); }
.fchip { box-shadow: var(--hairline), 0 1px 2px rgba(0,0,0,.05); }
.kcard { box-shadow: var(--hairline), 0 1px 3px rgba(0,0,0,.07); }
.kcol { border-radius: 16px; }

/* Feuille du bas : un VRAI matériau (grande surface = plus épaisse : flou
   fort + ombre profonde + arête claire en haut, la lumière qui accroche).
   Les fenêtres desktop (.win) restent quasi opaques : deux matériaux clairs
   empilés ruinent la lisibilité — règle Apple. */
.sheet:not(.win) { background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 -12px 48px rgba(0,0,0,.26), 0 0 0 .5px var(--fill-2); }
.sheet.win { background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); }
.win-bar { background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); }

/* Entrées de scène : décélération franche (départ vif, arrivée posée) —
   l'allure d'une détente critique, sans rebond pour ce qui ne vient pas
   d'un geste. Chemins courts : moins de distance, plus de présence. */
.screen { animation: fadein .26s cubic-bezier(.2,.9,.25,1); }
@keyframes up { from { transform: translateY(28px); opacity: .78; }
                to { transform: none; opacity: 1; } }
.sheet { animation-duration: .3s;
  animation-timing-function: cubic-bezier(.2,.9,.25,1); }

/* Interrupteur : la course a un léger dépassement (le pouce vient de le
   lancer — c'est un geste avec de l'élan, le SEUL cas où le rebond est
   juste), le fond suit sans à-coup. */
.sw { transition: background .22s ease; }
.sw::after { transition: left .26s cubic-bezier(.32,1.18,.5,1); }

/* ---- 3. TYPOGRAPHIE : l'interlettrage suit la taille ------------------- */
body { font-optical-sizing: auto; }
.tbar h1 { letter-spacing: -.015em; }
.sheet h2 { letter-spacing: -.015em; line-height: 1.15; }
.acc-title { letter-spacing: -.022em; }
.home-head .hi b { letter-spacing: -.018em; }
.od-amount { letter-spacing: -.02em; line-height: 1.1; }
.punch .timer { letter-spacing: -.025em; }
.big2, .stat b { letter-spacing: -.015em; }
.irow .t2, .fnode label, .frm label, .card h3 { line-height: 1.35; }
/* Sur un matériau translucide, pas de gris plat : un poil plus de graisse
   et d'interlettrage pour rester lisible sur fond changeant (vibrancy). */
.tbar .nsep, .tbar .nseg.off { font-weight: 600; letter-spacing: .01em; }
.win-title { letter-spacing: .01em; }
::selection { background: rgba(0,122,255,.22); }

/* ---- 4. FOCUS CLAVIER + CHAMPS ----------------------------------------- */
/* Le focus tactile reste discret ; au CLAVIER, l'anneau est net (craft :
   personne ne doit se perdre en tabulant). */
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.btn:focus-visible, .fchip:focus-visible, .pad button:focus-visible {
  outline-offset: 1px; }
.inp, .search input, .frm input, .frm select, .frm textarea, .txtarea,
.fnode input, .fnode select, .fnode textarea, .setrow input, .setrow select {
  transition: box-shadow .16s ease, border-color .16s ease,
              background-color .16s ease; }
.inp:focus, .search input:focus, .frm input:focus, .frm select:focus,
.frm textarea:focus, .txtarea:focus {
  box-shadow: 0 0 0 3.5px rgba(0,122,255,.16); }

/* Défilement horizontal (kanban, chemin, chips) : la molette/le doigt
   glissent, la barre reste discrète. */
.kanban { scrollbar-width: thin; scrollbar-color: rgba(120,120,128,.35) transparent; }
.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-thumb { background: var(--fill-2);
  border-radius: 4px; }
.kanban::-webkit-scrollbar-track { background: transparent; }

/* ---- 5. ACCESSIBILITÉ : trois signaux, trois réponses ------------------ */
/* Mouvement réduit : les glissements deviennent des fondus courts — le
   retour d'information reste, le déplacement vestibulaire part. */
@media (prefers-reduced-motion: reduce) {
  .screen { animation: fadein-rm .18s ease; }
  .sheet { animation: fadein-rm .18s ease; }
  .pin-hint.err { animation: none; }
  .app-ic .dot { animation: none; }
  .sw::after { transition: left .12s ease; }
  .btn, .fchip, .seg button, .irow, .kcard, .editrow .arr, .pad button,
  .scalepick button, .btn-aa, .btn-quit, .win-dot, .tbar .nseg {
    transition-duration: .01s; }
  .btn:active, .fchip:active, .seg button:active, .editrow .arr:active {
    transform: none; }
}
@keyframes fadein-rm { from { opacity: 0; } to { opacity: 1; } }
/* Transparence réduite : les matériaux deviennent givrés/opaques. */
@media (prefers-reduced-transparency: reduce) {
  .tbar { background: var(--bg); backdrop-filter: none;
    -webkit-backdrop-filter: none; }
  .sheet:not(.win), .sheet.win { background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .win-bar { background: var(--card); backdrop-filter: none;
    -webkit-backdrop-filter: none; }
  #toast, .notif-banner { background: #1c1c1e; backdrop-filter: none;
    -webkit-backdrop-filter: none; }
}
/* Contraste renforcé : fonds pleins + bordures franches. */
@media (prefers-contrast: more) {
  .card, .stat, .ilist, .kcard { box-shadow: none;
    border: 1px solid rgba(60,60,67,.45); }
  .chip { border: 1px solid currentColor; }
  .tbar { background: var(--bg); }
  .inp, .search input { border: 1px solid rgba(60,60,67,.5); }
}

/* ===== v299 : relooking complet (skill apple-design, passe 2) ============
   TOUJOURS de l'affichage pur : surcharges en fin de cascade, aucun
   sélecteur retiré, zéro JS/HTML — toutes les fonctions restent. Cette
   passe va au bout du skill : un vrai SYSTÈME (jetons d'élévation et de
   courbes), les icônes de l'accueil en « squircle » avec ombre COLORÉE et
   reflet (le langage des icônes iOS), les séparateurs de liste en retrait,
   les matériaux sur les boutons, la « prise en main » du kanban, et les
   états hover pour le desktop. */

/* ---- 0. JETONS : déplacés en tête de fichier (v349, un seul :root) ------ */

/* ---- 1. ACCUEIL : des icônes qui ont l'air d'icônes --------------------- */
/* Squircle (le % suit la taille, toutes tailles d'écran confondues), reflet
   de lumière en haut, assombrissement léger en bas : la tuile devient un
   objet. L'ombre reprend la TEINTE du dégradé — c'est elle qui fait iOS. */
.app-ic .ic { border-radius: 27%;
  transition: transform .3s var(--e-out), box-shadow .3s var(--e-out); }
.app-ic .ic::before { content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28),
              rgba(255,255,255,.04) 42%, rgba(0,0,0,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32); }
.app-ic .ic.g-green,  .app-ic .ic.ic-heures { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(30,158,70,.34); }
.app-ic .ic.g-yellow  { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(224,168,0,.32); }
.app-ic .ic.g-blue,   .app-ic .ic.ic-cmd { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(10,95,208,.34); }
.app-ic .ic.g-orange, .app-ic .ic.ic-stock { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(224,112,10,.34); }
.app-ic .ic.g-purple, .app-ic .ic.ic-admin { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(123,47,174,.34); }
.app-ic .ic.g-red    { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(213,39,30,.32); }
.app-ic .ic.g-teal   { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(31,151,204,.34); }
.app-ic .ic.g-pink   { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(201,24,74,.34); }
.app-ic .ic.g-indigo { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(54,52,163,.36); }
.app-ic .ic.g-gray   { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(91,91,96,.32); }
.app-ic .ic.g-mint   { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(0,154,146,.34); }
.app-ic .ic.g-brown  { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 26px rgba(122,98,68,.34); }
.app-ic .lb { letter-spacing: -.01em; }
.home-cat { border-bottom: 0; }        /* la respiration suffit, pas le trait */

/* ---- 2. LISTES : séparateurs EN RETRAIT (le trait commence au texte,
   pas au bord — la signature des listes iOS). ---------------------------- */
.irow { border-bottom-color: transparent; position: relative; }
.irow::after { content: ""; position: absolute; left: 18px; right: 0;
  bottom: 0; height: .5px; background: var(--sep); }
.irow:last-child::after { display: none; }
.day-h { text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }

/* ---- 3. CONTRÔLES : la matière jusque dans les boutons ------------------ */
/* Primaire : un soupçon de lumière en haut + ombre teintée — un bouton qui
   a du relief appelle le doigt. Les gris restent des « fills » plats iOS. */
.btn.primary { background-image: linear-gradient(180deg, #2f92ff, #007aff 62%);
  box-shadow: 0 1px 2.5px rgba(0,122,255,.38), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-punch { box-shadow: 0 10px 26px rgba(52,199,89,.38),
  inset 0 1px 0 rgba(255,255,255,.28); }
.btn-punch.out { box-shadow: 0 10px 26px rgba(255,59,48,.34),
  inset 0 1px 0 rgba(255,255,255,.24); }
.chip { border-radius: 999px; padding: 3.5px 11px; }
.seg { border-radius: 13px; }
.seg button.on { box-shadow: var(--hairline), 0 1.5px 5px rgba(0,0,0,.13); }
.sw { box-shadow: inset 0 0 0 .5px rgba(60,60,67,.10); }
.pad button { box-shadow: var(--hairline); }
.fchip.on { box-shadow: 0 2px 8px rgba(28,28,30,.28); }
.alert { box-shadow: var(--hairline), var(--ombre-1); }
.editrow { box-shadow: var(--hairline), 0 1px 3px rgba(0,0,0,.04); }
#toast { border-radius: 20px; }
.sheet .grab { background: rgba(120,120,128,.42); background-clip: content-box; }
.sheet .actions .btn { border-radius: 16px; }
.stat b { font-size: 27px; }
.od-amount { font-variant-numeric: tabular-nums; }

/* ---- 4. KANBAN : la carte se SOULÈVE, la source reste en place ---------- */
/* Pendant un drag HTML5, le navigateur promène un « fantôme » : la carte
   d'origine reste dans la colonne, estompée et légèrement enfoncée — on
   voit d'où elle part ET où elle va. La zone d'accueil s'éclaire. */
.kcard { border-radius: 14px; }
.kcard.dragging { opacity: .38; transform: scale(.97); box-shadow: none; }
.kcards.dragover { outline: 2px dashed var(--blue); outline-offset: 3px;
  background: rgba(0,122,255,.07); transition: background .15s ease; }
.kcol { background: var(--fill-3); box-shadow: var(--hairline); }
.kcol-h { text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em;
  color: var(--txt2); }

/* ---- 5. DESKTOP : le survol répond aussi (uniquement vrai pointeur) ----- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--fill-2); }
  .btn.primary:hover { filter: brightness(1.05); }
  .irow:hover { background: var(--fill-3); }
  .kcard:hover { transform: translateY(-1.5px); box-shadow: var(--ombre-2); }
  .app-ic:hover .ic { transform: translateY(-3px) scale(1.02); }
  .fchip:hover { background-color: color-mix(in srgb, var(--card) 88%, #000 4%); }
  .fchip.on:hover { background-color: var(--on-bg); }
  .acc:hover { transform: translateY(-2px); }
  .win-dot:hover { filter: brightness(1.08); }
  .comp.clickable:hover { background: var(--fill-3); }
}

/* ---- 6. Les trois signaux d'accessibilité couvrent AUSSI cette passe ---- */
@media (prefers-reduced-motion: reduce) {
  .app-ic .ic, .kcard, .acc { transition-duration: .01s; }
}
@media (prefers-contrast: more) {
  .btn.primary { background-image: none; background: var(--blue); }
  .app-ic .ic::before { display: none; }
  .irow::after { height: 1px; background: rgba(60,60,67,.45); }
}

/* ===== v304 : module Calendrier =========================================
   Grille mensuelle + listes semaine/jour. Chaque événement porte la couleur
   de SON calendrier via la variable --cev (posée en style inline par le JS) ;
   les fonds pâles se calculent en color-mix pour rester lisibles dans les
   deux thèmes. Hérite des matériaux/ombres des passes v298-v299. */
.cal-grid-h { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--txt2); text-align: center;
  margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { background: var(--card); border-radius: 10px; min-height: 86px;
  padding: 4px; box-shadow: var(--ombre-1, 0 1px 2px rgba(0,0,0,.06));
  border: .5px solid var(--sep); cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cal-cell.hors { opacity: .45; }
.cal-cell.auj { border-color: var(--blue); border-width: 1.5px; }
.cal-cell.auj .cal-num { color: #fff; background: var(--blue); }
.cal-num { font-size: 12px; font-weight: 700; width: 22px; height: 22px;
  border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.cal-evt { display: block; width: 100%; text-align: left; border: 0;
  font: inherit; font-size: 11px; line-height: 1.25; padding: 2px 5px;
  border-radius: 6px; color: var(--txt); cursor: pointer;
  background: color-mix(in srgb, var(--cev, #0a84ff) 20%, transparent);
  border-left: 3px solid var(--cev, #0a84ff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt b { font-weight: 600; }
.cal-plus { font-size: 11px; color: var(--txt2); padding-left: 5px; }
.cal-auj-h span:first-child { color: var(--blue); }
.cal-ligne { position: relative; }
.cal-barre { width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--cev, #0a84ff); margin-right: 10px; flex: none; }
.cal-chip .cal-dot, .cal-dot { width: 10px; height: 10px; border-radius: 5px;
  background: var(--cev, #0a84ff); display: inline-block; margin-right: 6px;
  flex: none; }
.cal-chip:not(.on) { opacity: .5; }
.cal-chip:not(.on) .cal-dot { background: var(--txt2); }
.cal-coul { width: 30px; height: 30px; border-radius: 15px; border: 2px solid
  transparent; background: var(--cev); cursor: pointer; }
.cal-coul.on { border-color: var(--txt); box-shadow: 0 0 0 2px var(--card); }
@media (max-width: 700px) {
  .cal-cell { min-height: 64px; border-radius: 8px; }
  .cal-evt { font-size: 10px; padding: 1px 3px; }
  .cal-evt b { display: none; }        /* l'heure vit dans la vue Jour */
}
@media (prefers-contrast: more) {
  .cal-evt { background: var(--card); }
  .cal-cell, .cal-evt { border-color: var(--txt2); }
}

/* ============================== v319 ====================================
   FENÊTRES AU DOIGT (demande de Joan du 08/09/2026 : « les petits boutons
   pour fermer et réduire sont trop petits sur tablette »). Les trois
   pastilles fermer / réduire / agrandir font 12 px — dessinées pour la
   souris, quasi imposables au doigt. Sur écran TACTILE (pointer: coarse) :
   - pastilles à 30 px, pictogramme TOUJOURS visible (pas de survol au
     doigt — sans lui, trois ronds muets) ;
   - zone d'appui étendue à ~44 px (recommandation tactile) par un ::after
     invisible : c'est la CIBLE qui grossit, pas le dessin ;
   - poignées de redimensionnement élargies (bords 10 → 18 px, coins
     16 → 28 px).
   La souris/trackpad (pointer: fine) garde l'allure macOS d'origine. */
@media (pointer: coarse) {
  .win-lights { gap: 12px; }
  .win-dot { width: 30px; height: 30px; position: relative; }
  .win-dot span { opacity: 1; font-size: 14px; }
  .win-dot::after { content: ""; position: absolute; inset: -7px;
    border-radius: 50%; }
  /* le titre s'écarte des pastilles agrandies (3 × 30 px + espaces) */
  .win-title { left: 148px; right: 148px; }
  .sheet.win.winmin .win-title { left: 148px; }
  .win-rs-n, .win-rs-s { height: 18px; }
  .win-rs-e, .win-rs-w { width: 18px; }
  .win-rs-ne, .win-rs-sw, .win-rs-nw, .win-rs-se { width: 28px; height: 28px; }
  /* v349 : même principe pour TOUS les contrôles compacts — outils de la barre
     du haut (30 px), mini-boutons et pastille de cochage des Tâches, boutons
     de l'accueil : le dessin ne change pas, la cible passe à ~44 px par un
     ::after invisible (les rangées ont ≥ 6 px d'écart : pas de chevauchement). */
  .tbar .tb-outils .btn, .tk-mini, .tk-check, .tkv-ghost, .btn-aa, .editrow .arr,
  .tk-tag button { position: relative; }
  .tbar .tb-outils .btn::after, .tk-mini::after, .tk-check::after, .tkv-ghost::after,
  .btn-aa::after, .editrow .arr::after, .tk-tag button::after {
    content: ""; position: absolute; inset: -7px; }
  .btn, .fchip, .seg button { min-height: calc(42px / var(--ui-scale, 1)); }
  .sheet-close { width: calc(40px / var(--ui-scale, 1)); height: calc(40px / var(--ui-scale, 1)); }
}

/* ============================== v321 ====================================
   Écran UNIQUE des réglages du module Import (screenImportReglages).
   Hors des feuilles étroites, label + input coulaient en LIGNE (aucune
   règle ne les empilait — c'était la largeur de la feuille qui le
   faisait) : ici, de vrais champs de formulaire, lisibles sur tablette
   comme sur grand écran. */
.regl-import label { display: block; font-size: 13px; font-weight: 600;
  color: var(--txt2); margin: 12px 2px 5px; }
.regl-import input[type=text], .regl-import input[type=number],
.regl-import select { width: 100%; max-width: 560px; display: block;
  border: 0; background: var(--fill); border-radius: 10px;
  padding: 11px 13px; font-size: 15px; outline: none; }
.regl-import .card { max-width: 880px; }
.regl-import details > summary { cursor: pointer; padding: 6px 0; }

/* ===== v327 — feuille commande refaite : compacte et lisible partout ===== */
/* Lignes adresse / téléphone : texte copiable + chips d'action à droite. */
.od-lig { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.od-lig .grow { overflow-wrap: anywhere; }
/* Suivi : statut / monteur / contrôleur / coût en GRILLE — 2 colonnes dès
   qu'il y a la place, une seule sur téléphone. */
.od-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .od-grid { grid-template-columns: 1fr 1fr; } }
.od-grid label { display: block; font-size: 13px; color: var(--txt2); font-weight: 600; }
.od-grid select, .od-grid input { display: block; width: 100%; margin-top: 4px; border: 0;
  background: var(--fill); border-radius: 10px; padding: 10px; outline: none; font: inherit; }
/* Remarques : bien VISIBLES (même encadré ambre que sur le bon de commande
   imprimé v324) — c'est ce que l'atelier doit voir en premier. */
.od-notes { margin-top: 12px; background: rgba(255, 170, 0, .10);
  border: 1.5px solid rgba(255, 170, 0, .45); border-radius: 12px; padding: 10px; }
.od-notes .txtarea { background: transparent; min-height: 64px; }
/* Aperçu intégré du bon de commande (iframe PDF). */
.odbc-frame { width: 100%; height: 56vh; border: 1px solid rgba(120, 120, 128, .25);
  border-radius: 12px; background: #fff; display: block; }
@media (max-width: 640px) { .odbc-frame { height: 44vh; } }

/* ===== v328 — outils de l'écran DANS la barre du haut, sur UNE ligne ===== */
/* Tout est SCOPÉ sur .tb-pleine (posée par tbar(titre, extra, "tb-pleine")) :
   la règle historique fige le spacer à 84px et centre le titre via h1
   { flex: 1 } — des surcharges globales changeraient la mise en page des
   ~30 autres écrans. La tbar garde sa hauteur standard : les outils ne
   passent JAMAIS à la ligne — s'ils manquent de place (téléphone), ils
   défilent horizontalement. */
.tbar.tb-pleine h1 { flex: none; }
.tbar.tb-pleine .spacer { width: auto; flex: 1; display: flex;
  justify-content: flex-end; min-width: 0; }
.tbar .tb-outils { display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; }
.tbar .tb-outils::-webkit-scrollbar { display: none; }
/* Boutons et champ à la MÊME hauteur que les segments de la tbar : padding
   vertical réduit (7px) ET min-height ramené de 40 à 30px (la règle
   d'accessibilité globale « .btn { min-height: 40px } » gonflerait la barre
   de 9px — ici les cibles restent comparables aux segments du fil d'Ariane). */
.tbar .tb-outils .btn { flex: none; padding: 7px 11px; font-size: 14px;
  min-height: 30px; }
.tbar .tb-outils input[type="search"] { flex: 0 1 230px; min-width: 96px;
  border: 0; background: var(--fill); border-radius: 10px;
  padding: 7px 12px; font: inherit; font-size: 14px; outline: none; }
/* v329 : séparateur vertical entre le groupe « chercher/afficher » (recherche,
   filtres, tri, vue) et le groupe « agir » (BC, impression, scan, carte). */
.tbar .tb-outils .tb-sep { flex: none; width: 1px; height: 22px;
  background: rgba(120, 120, 128, .35); margin: 0 5px; border-radius: .5px; }

/* ===== v330 ============================================================== */
/* Remarques : l'encadré ambre ne s'allume que s'il y a du texte — vide, il
   redevient un champ neutre (le glow permanent criait pour rien). La bascule
   vivante est faite par sheetOrder (classe .vide sur #odNotesBox). */
.od-notes.vide { background: var(--fill-3);
  border-color: var(--fill-2); }
/* Téléphone : défiler pour atteindre 🖨/📮 rendait les actions invisibles —
   les outils passent sur DEUX lignes, et c'est le séparateur v329 qui devient
   le saut de ligne : ligne 1 chercher/afficher, ligne 2 agir. */
@media (max-width: 640px) {
  .tbar.tb-pleine { flex-wrap: wrap; }
  .tbar.tb-pleine .spacer { flex: 1 1 100%; }
  .tbar.tb-pleine .tb-outils { flex-wrap: wrap; overflow-x: visible;
    white-space: normal; width: 100%; row-gap: 6px; }
  .tbar.tb-pleine .tb-outils .tb-sep { flex: 1 1 100%; width: auto; height: 0;
    margin: 0; background: transparent; }
  .tbar.tb-pleine .tb-outils input[type="search"] { flex: 1 1 120px; }
  /* v349 : une barre qui ne porte QUE l'action principale (Tâches, Réparations,
     Calendrier, Workflows) la range à droite, là où Commandes met la sienne. */
  .tbar.tb-pleine .tb-outils:has(> :only-child) { justify-content: flex-end; }
}

/* ===== v332 — double authentification ==================================== */
/* Case « se souvenir de cet appareil » sur l'écran du second facteur : elle
   vit sous le pavé, doit rester lisible sur fond sombre comme clair. */
.tf-trust { display: flex; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--txt2); font-size: 15px; user-select: none; }
.tf-trust input { width: 20px; height: 20px; accent-color: var(--blue); }
/* QR d'enrôlement : le SVG vient du serveur (aucun CDN — la CSP l'interdit).
   Fond blanc IMPOSÉ : un QR sombre sur sombre ne se scanne pas. */
#tfQr svg { width: min(240px, 62vw); height: auto; background: #fff;
  border-radius: 12px; padding: 8px; }
/* Codes de secours : chasse fixe et interlettrage large — ils se recopient à
   la main, souvent depuis une photo ou une feuille imprimée. */
#tfCodes { font-variant-ligatures: none; }


/* ===== v348 — issue #98 : kanban Réparations, états vide/erreur ============
   Le kanban Réparations portait ses styles en ligne et vivait dans un
   .content plafonné à 1000 px : 8 colonnes de 230 px débordaient. Il est
   maintenant dans .content.wide (pleine largeur ≥1024, règle v194) et, sur
   téléphone (≤640), montre UNE étape à la fois choisie par chips. Les cartes
   sont des boutons clavier : l'anneau de focus global (v298) s'applique. */
.rp-kanban { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start;
  padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.rp-col { min-width: 230px; max-width: 250px; flex: 0 0 auto;
  background: var(--fill-3); border-radius: 14px; padding: 10px; }
.rp-col-t { font-weight: 700; margin-bottom: 8px; }
.rp-card { margin: 0 0 8px; cursor: pointer; }
.rp-card:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.rp-etapes { margin: 0 0 8px; }
.rp-etapes .chip { flex: 0 0 auto; }
@media (max-width: 640px) {
  .rp-kanban { display: block; overflow: visible; }
  .rp-col { min-width: 0; max-width: none; }
}
/* États partagés : vide (informatif) et erreur (avec « Réessayer »). */
.etat-vide { text-align: center; color: var(--txt2); padding: 34px 12px; font-size: 16px; }
.etat-vide .t2 { margin-top: 6px; font-size: 14px; }
.etat-erreur { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: rgba(255,59,48,.10); border: 1px solid rgba(255,59,48,.35);
  border-radius: 14px; padding: 12px 16px; margin: 0 0 10px; color: var(--txt); }
.etat-erreur .grow { min-width: 0; }


/* ===== v349 — cohérence visuelle et ergonomique (skill apple-design, passe 3)
   Les RÈGLES SOURCES ont été corrigées en place (jetons en tête de fichier,
   thème sombre, remplissages nommés, --txt2 lisible, niveaux d'action).
   Cette section ne porte que les composants NOUVEAUX de la passe : chrome
   des feuilles mobiles, cibles tactiles étendues, alertes résumées, menu de
   l'accueil, sections repliables des fiches. ============================ */

/* ---- 1. FEUILLE MOBILE : fermer et valider restent sous le pouce -------- */
/* Un bouton ✕ collé en haut à droite (il ne consomme aucune hauteur : la
   rangée fait 0 px, le bouton déborde dessus) et la rangée .actions collée
   en bas pendant le défilement, sur un matériau — Annuler/Enregistrer ne
   sont plus à 3 écrans de distance. Les fenêtres desktop (.win) ont déjà
   leur barre de titre : rien ne change pour elles. */
.sheet-top { position: sticky; top: -10px; z-index: 21; height: 0;
  display: flex; justify-content: flex-end; pointer-events: none; }
.sheet.win .sheet-top { display: none; }
.sheet-close { pointer-events: auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fill); color: var(--txt2); font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(4px); box-shadow: var(--hairline); position: relative;
  transition: transform .26s var(--e-out), background-color .2s ease; }
.sheet-close::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.sheet-close:active { transform: translateY(4px) scale(.92); transition-duration: .06s;
  background-color: var(--fill-2); }
.sheet:not(.win) > .actions { position: sticky; bottom: 0;
  margin: 22px -20px calc(-1 * (env(safe-area-inset-bottom) + 22px));
  padding: 10px 20px calc(env(safe-area-inset-bottom) + 12px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: .5px solid var(--sep); }
.sheet.full:not(.win) > .actions { padding-top: 10px; }
/* Sur un matériau sombre, l'arête claire du haut de feuille devient discrète. */
@media (prefers-color-scheme: dark) {
  .sheet:not(.win) { border-top-color: rgba(255,255,255,.14); }
  .seg button.on { box-shadow: var(--hairline), 0 1px 4px rgba(0,0,0,.4); }
  .kcard, .tk-list, .ilist, .card { box-shadow: var(--hairline), var(--ombre-1); }
  .wfbub { background: #262629; color: var(--txt); }
  .wfprev { background: #1d2a25; }
  #toast, .notif-banner { background: rgba(44,44,46,.97); }
}

/* ---- 2. CIBLES TACTILES : 44 px de zone d'appui, dessin inchangé -------- */
/* Les contrôles compacts (outils de la barre du haut à 30 px, mini-boutons
   de check-list, pastille de cochage, boutons de l'accueil) gardent leur
   taille visuelle ; au DOIGT (pointer: coarse) un ::after invisible porte
   la cible à ~44 px sans chevaucher les voisins (les rangées ont ≥ 6 px
   d'écart : la moitié du débord). */
/* (les règles vivent dans le bloc tactile de la v319, plus haut : une seule
   variante « pointer: coarse » dans le fichier) */

/* ---- 3. ALERTES RÉSUMÉES : problème · nombre · impact · action ---------- */
/* Une alerte se lit en une ligne (quoi, combien, conséquence) avec l'action
   à droite ; le diagnostic long vit dans un <details> replié — l'alerte
   reste visible, la technique reste disponible. */
.alerte { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  border-radius: var(--r-m); padding: 10px 12px; margin: 8px 0 0;
  background: rgba(255,149,0,.12); border: 1px solid rgba(255,149,0,.35); }
.alerte.rouge { background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.35); }
.alerte.vert { background: rgba(52,199,89,.12); border-color: rgba(52,199,89,.35); }
.alerte.gris { background: var(--fill-3); border-color: var(--sep); }
.alerte .al-corps { flex: 1 1 240px; min-width: 0; }
.alerte .al-titre { font-size: 15px; font-weight: 700; display: flex; gap: 8px;
  align-items: baseline; flex-wrap: wrap; }
.alerte .al-nb { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700;
  color: var(--txt); background: var(--card); border-radius: 999px; padding: 1px 9px;
  box-shadow: var(--hairline); }
.alerte .al-impact { font-size: 13.5px; color: var(--txt2); margin-top: 2px; line-height: 1.4; }
.alerte .al-action { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.alerte details { flex: 1 1 100%; font-size: 13px; color: var(--txt2); }
.alerte details > summary { cursor: pointer; font-weight: 600; color: var(--blue);
  list-style: none; padding: 4px 0; min-height: 30px; display: flex; align-items: center; }
.alerte details > summary::-webkit-details-marker { display: none; }
.alerte details > summary::before { content: "›"; display: inline-block; margin-right: 6px;
  transition: transform .2s var(--e-out); font-size: 16px; }
.alerte details[open] > summary::before { transform: rotate(90deg); }
.alerte .al-diag { padding: 4px 0 2px 16px; line-height: 1.45; }

/* ---- 4. COMPTEURS de l'accueil : volume ≠ alerte ------------------------- */
/* Rouge = quelque chose ATTEND une action (relances de commandes, CRM qui
   dort) ; bleu = simple volume (tâches ouvertes, paniers) — un chiffre
   rouge partout finit par ne plus rien dire. */
.app-ic .cnt.vol { background: var(--blue); }

/* ---- 5. ACCUEIL : en-tête qui respire ----------------------------------- */
/* Deux commandes visibles partout (chercher, menu ⋯) ; sur ordinateur les
   raccourcis Rafraîchir / Aa / Modifier / Quitter restent en clair. À 390 px
   ils vivent dans le menu — la salutation ne se tronque plus. */
.home-head .h-menu { display: none; }
.home-head .btn.icon { border-radius: 22px; background: var(--fill); font-size: 17px; }
@media (max-width: 640px) {
  .home-head .h-desk { display: none; }
  .home-head .h-menu { display: inline-flex; }
  .home-head .hi b { font-size: 19px; white-space: normal; overflow: visible;
    line-height: 1.15; }
}
.menu-liste .irow { width: 100%; text-align: left; min-height: 52px; }
.menu-liste .irow .t1 { font-weight: 600; }
.menu-liste .irow .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--fill);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }

/* ---- 6. FICHES : sections repliables (l'essentiel d'abord) --------------- */
details.tk-sec > summary, details.sec > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--txt2); }
details.tk-sec > summary::-webkit-details-marker, details.sec > summary::-webkit-details-marker { display: none; }
details.tk-sec > summary::before, details.sec > summary::before { content: "›"; display: inline-block;
  font-size: 18px; line-height: 1; transition: transform .2s var(--e-out); color: var(--txt3);
  width: 12px; text-align: center; }
details.tk-sec[open] > summary::before, details.sec[open] > summary::before { transform: rotate(90deg); }
details.tk-sec > summary .tk-n { margin-left: auto; }
details.tk-sec > summary:focus-visible, details.sec > summary:focus-visible {
  outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 8px; }

/* ---- 7. Les trois signaux d'accessibilité couvrent aussi cette passe ---- */
@media (prefers-reduced-motion: reduce) {
  .sheet-close, .alerte details > summary::before, details.tk-sec > summary::before,
  details.sec > summary::before { transition-duration: .01s; }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet:not(.win) > .actions { background: var(--bg); backdrop-filter: none;
    -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .alerte { border-width: 1.5px; }
  .sheet-close { border: 1px solid var(--txt2); }
  .btn.quiet { text-decoration: underline; }
}

/* ---------- v352 : barre de progression de la publication (écran Produits) ---------- */
.pub-barre { height: 8px; border-radius: 999px; background: var(--fill-2); overflow: hidden; margin-top: 8px; }
.pub-fait { height: 100%; border-radius: inherit; background: var(--blue); transition: width .4s var(--e-out); min-width: 2px; }
.pub-prog.fini .pub-fait { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .pub-fait { transition: none; } }

/* ===== v363 — PC Builder : hors feuille, libellés et champs s'empilent ===== */
.pcb label { display: block; font-size: 13px; font-weight: 600; color: var(--txt2); margin: 12px 2px 5px; }
.pcb input[type=text], .pcb input[type=number], .pcb input[type=search], .pcb select, .pcb textarea {
  width: 100%; max-width: 640px; display: block; box-sizing: border-box; border: 0;
  background: var(--fill); border-radius: 10px; padding: 11px 13px; font-size: 15px; outline: none; }
.pcb .row > input[type=text], .pcb .row > input[type=number] { display: inline-block; width: auto; }
.pcb .row > input.grow { flex: 1; min-width: 120px; }
.pcb .row > label { display: inline-block; margin: 0; font-weight: 400; color: var(--txt); }
.pcb .card { max-width: 880px; }
.pcb .pcb-slot .row { flex-wrap: wrap; }
.pcb .pcb-slot .chip { flex: none; }
.pcb .pcb-cat .pcb-liste input[type=search] { margin-bottom: 4px; }
.pcb .pcb-cat label.pcb-cand { font-weight: 400; color: var(--txt); }
.pcb .pcb-cat label.pcb-cand input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; }
/* v368 : vignette du produit (clic = aperçu ; clic droit / appui long sur la ligne aussi) */
.pcb .pcb-thumb { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 7px;
  background: #fff; border: 1px solid var(--hairline, #ddd); cursor: zoom-in; }
.pcb .pcb-thumb-vide { display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill, rgba(120,120,128,.12)); color: var(--txt3, #999); font-size: 15px; }
/* v372 : note interne d'un panier abandonné (ambre, comme les remarques de montage) */
.cart-note { color: #8a5a00; background: rgba(255,149,0,.12); border-radius: 8px; padding: 3px 8px; margin-top: 4px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.cart-note-card textarea { width: 100%; box-sizing: border-box; }
.pcb .pcb-voir { flex: none; }
/* v371 : Digitec et Alltron ne se mélangent plus — pastille et bloc à leur couleur */
.pcb .pcb-frn { font-size: 11px; flex: none; font-weight: 600; }
.pcb .pcb-frn-digitec { background: rgba(0,122,255,.12); color: var(--blue); }
.pcb .pcb-frn-alltron { background: rgba(255,149,0,.18); color: var(--warn); }
.pcb .pcb-frn-tete-digitec { background: rgba(0,122,255,.06); }
.pcb .pcb-frn-tete-alltron { background: rgba(255,149,0,.08); }
.pcb .pcb-filtres .seg button { min-height: 32px; }
.pcb .pcb-cat select { min-height: 34px; }
.pcb .pcb-man input[type=number] { flex: none; }
/* v413 : la règle `.pcb label { display: block }` gagnait sur `.row` — les
   lignes à cocher s'écoulaient comme du texte au lieu de s'aligner */
.pcb label.pcb-cand { display: flex; }
/* v413 : une carte par catégorie, REPLIÉE par défaut (produit retenu + options visibles) */
.pcb .pcb-cat { border: 1px solid var(--hairline, #ddd); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.pcb .pcb-cat.ouverte { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(0,122,255,.18); }
.pcb .pcb-retenu .pcb-thumb { width: 48px; height: 48px; }
.pcb .pcb-groupes { background: var(--fill-3, rgba(120,120,128,.06)); border-radius: 10px; padding: 8px; margin: 8px 0; }
.pcb .pcb-groupes .seg { flex-wrap: wrap; }
.pcb .pcb-opt-reglage input { max-width: 220px; }
.pcb .pcb-opt-chip { background: rgba(175,82,222,.14); color: #8e3cc0; font-weight: 600; }
.pcb .pcb-variantes { margin-top: 6px; }
.pcb .pcb-alarme { color: var(--red); background: rgba(255,59,48,.10); border-radius: 10px; padding: 6px 10px; }
/* v441 — marge et prix proposé, description comparée */
.pcb .pcb-prop-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pcb .pcb-desc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pcb .pcb-desc-frame { width: 100%; height: 320px; border: 1px solid var(--hairline, #ddd); border-radius: 10px; background: #fff; }
.pcb .pcb-desc-pre { white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--fill-3, rgba(120,120,128,.08)); border-radius: 10px; padding: 8px; max-height: 260px; overflow: auto; margin: 4px 0 0; }
.pcb .pcb-desc-ok { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline, #eee); }
@media (max-width: 640px) {
  .pcb .pcb-prop-grille { grid-template-columns: 1fr 1fr; }
  .pcb .pcb-desc-duo { grid-template-columns: 1fr; }
}
.pcb .pcb-variantes .pcb-var-def { font-weight: 600; }
@media (max-width: 640px) {
  /* téléphone : le titre du candidat prend sa propre ligne, prix et stock dessous */
  .pcb .pcb-cand { flex-wrap: wrap; }
  .pcb .pcb-cand .grow { flex-basis: calc(100% - 34px); }
  /* v413 : ligne à cocher = case, ✅, vignette et TITRE sur la 1re ligne ;
     fournisseur, prix, stock et 🔍 dessous, alignés sous le titre */
  .pcb label.pcb-cand { row-gap: 0; }
  .pcb label.pcb-cand > .grow { order: 1; flex: 1 1 calc(100% - 96px); }
  .pcb label.pcb-cand > .pcb-frn, .pcb label.pcb-cand > .t2, .pcb label.pcb-cand > .pcb-voir { order: 2; }
  .pcb label.pcb-cand > .pcb-frn { margin-left: 86px; }
  .pcb label.pcb-cand > .t2:last-of-type { min-width: 0 !important; }
}

/* ===== v373 — module Livraison ========================================== */
.liv-row.liv-on { box-shadow: inset 3px 0 0 var(--blue); }
.liv-seg { flex-shrink: 0; }
.liv-seg button[disabled] { opacity: .45; }
.liv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 4px; }
.liv-stats > div { background: var(--fill); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.liv-big { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.liv-stop { align-items: flex-start; gap: 10px; }
.liv-stop .liv-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--fill-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.liv-stop.liv-faite { opacity: .7; }
.liv-stop.liv-faite .liv-num { background: color-mix(in srgb, var(--ok) 20%, transparent); }
@media (max-width: 640px) {
  .liv-stats { grid-template-columns: 1fr 1fr; }
  .liv-stats > div:last-child { grid-column: 1 / -1; }
}

/* ===== v374 — couleur au choix de la note interne d'un panier ============ */
.cart-note.cn-rouge  { color: #9b1c1c; background: rgba(255,59,48,.13); }
.cart-note.cn-vert   { color: #1f6b2f; background: rgba(52,199,89,.16); }
.cart-note.cn-bleu   { color: #0b4f9c; background: rgba(0,122,255,.13); }
.cart-note.cn-violet { color: #5b2a9e; background: rgba(175,82,222,.15); }
.cart-note.cn-gris   { color: #4a4a4f; background: rgba(120,120,128,.18); }
.cart-note-card textarea.cn-ambre  { background: rgba(255,149,0,.10); }
.cart-note-card textarea.cn-rouge  { background: rgba(255,59,48,.10); }
.cart-note-card textarea.cn-vert   { background: rgba(52,199,89,.12); }
.cart-note-card textarea.cn-bleu   { background: rgba(0,122,255,.10); }
.cart-note-card textarea.cn-violet { background: rgba(175,82,222,.12); }
.cart-note-card textarea.cn-gris   { background: var(--fill); }
.cn-picks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cn-pick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.cn-pick.cn-ambre  { background: #ff9f0a; }
.cn-pick.cn-rouge  { background: #ff3b30; }
.cn-pick.cn-vert   { background: #34c759; }
.cn-pick.cn-bleu   { background: #007aff; }
.cn-pick.cn-violet { background: #af52de; }
.cn-pick.cn-gris   { background: #8e8e93; }
.cn-pick.on { border-color: var(--txt); transform: scale(1.12); }
.cn-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cart-note.cn-rouge  { color: #ff8a80; }
  :root:not([data-theme="light"]) .cart-note.cn-vert   { color: #7ee0a0; }
  :root:not([data-theme="light"]) .cart-note.cn-bleu   { color: #8ec5ff; }
  :root:not([data-theme="light"]) .cart-note.cn-violet { color: #d7a8ff; }
  :root:not([data-theme="light"]) .cart-note.cn-gris   { color: #c7c7cc; }
}

/* ===== v375 — recherche élargie des Commandes : motif de la trouvaille ==== */
.chip.cmd-motif { background: var(--tint); color: var(--blue); font-weight: 600; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ===== v381 — vue Trello des tâches d'une séance ===== */
.sc-trello .sc-kcol { min-width: 250px; }
.sc-kcard { cursor: pointer; border-left: 3px solid var(--c, var(--sep)); }
.sc-kcard.sc-done { opacity: .6; }
.sc-kcard.sc-done .t1 { text-decoration: line-through; }
.sc-kcard.sc-late { border-left-color: var(--red); }
.sc-kcard.dragging { opacity: .4; }
.sc-kcards.dragover, .kcards.dragover { outline: 2px dashed var(--blue); outline-offset: 2px; border-radius: 12px; }
.sc-kmove .btn { padding: 4px 8px; font-size: 12px; min-height: 30px; }
.sc-kvide { color: var(--txt2); padding: 10px 4px; }
@media (hover: none) { .sc-kcard { cursor: default; } }

/* ===== v382 — module Idées ===== */
.id-trello .id-kcol { min-width: 240px; }
.id-kcol.id-sortie { opacity: .85; }
.id-carte { cursor: pointer; border-left: 3px solid var(--c, var(--sep)); }
.id-carte.id-retard { border-left-color: var(--red); }
.id-carte.dragging { opacity: .4; }
.id-move .btn { padding: 4px 8px; font-size: 12px; min-height: 30px; }
.id-kvide { color: var(--txt2); padding: 10px 4px; }
.id-curseurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.id-curseur { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.id-curseur input[type=range] { width: 100%; }
.id-note { padding: 6px 0; border-top: 1px solid var(--sep); }
.id-note:first-child { border-top: 0; }
.id-note-etape { color: var(--blue); }
.id-note-systeme { color: var(--txt2); font-size: 13px; }
@media (max-width: 640px) { .id-curseurs { grid-template-columns: 1fr; } }
@media (hover: none) { .id-carte { cursor: default; } }

/* ===== v383 — colonnes Trello partout : infos éditables sur les cartes Séances ===== */
.sc-edit { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; border-radius: 8px; display: inline-flex; min-height: 0; min-width: 0; }
.sc-edit:hover { background: var(--fill, rgba(120,120,128,.12)); }
.sc-edit:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sc-prio { color: var(--c); border-color: var(--c); }
.sc-prio.sc-prio-n { opacity: .7; }
.id-kcol .kh .id-col-suppr { font-size: 12px; opacity: .5; }
.id-kcol .kh .id-col-suppr:hover { opacity: 1; }

/* ===== v432 — Vitrine « Configs PC » (configs-pc.js) ===== */
.cfg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cfg-carte { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: var(--card); border-radius: 16px; box-shadow: var(--hairline), var(--ombre-1, 0 1px 3px rgba(0,0,0,.08));
  color: var(--txt); font: inherit; cursor: pointer; }
.cfg-carte:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cfg-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; display: block; }
.cfg-photo-vide { display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--fill); }
.cfg-corps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.cfg-tete { display: flex; align-items: baseline; gap: 8px; }
.cfg-tete b { flex: 1; font-size: 17px; letter-spacing: -.01em; }
.cfg-prix { font-weight: 700; white-space: nowrap; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cfg-cle { font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-cle span { color: var(--txt2); margin-right: 6px; font-size: 12px; }
.cfg-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.cfg-hero-photo { width: 180px; height: 150px; flex: none; object-fit: contain; border-radius: 14px; background: #fff; }
.cfg-hero-photo.cfg-photo-vide { background: var(--fill); }
.cfg-hero a.btn { text-decoration: none; }
.cfg-hero-prix { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.cfg-ligne .t1 { white-space: normal; }
.cfg-option + .cfg-option { margin-top: 12px; }
.cfg-val { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sep, rgba(0,0,0,.08)); }
.cfg-val:last-child { border-bottom: 0; }
.cfg-sup { font-weight: 700; white-space: nowrap; color: var(--blue); }
@media (max-width: 640px) {
  .cfg-grille { grid-template-columns: 1fr; }
  .cfg-hero { flex-direction: column; align-items: stretch; }
  .cfg-hero-photo { width: 100%; height: 200px; }
}

/* ===== v434 — Réparations : fiche complète, cartes plus parlantes ===== */
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.rp-grid label { display: block; }
.rp-grid input, .rp-grid select { width: 100%; }
.rp-case { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rp-case input { width: 20px; height: 20px; }
.rp-c-haut { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.rp-num { font-weight: 700; font-size: 12.5px; color: var(--txt2); letter-spacing: .02em; }
.rp-age { margin-left: auto; font-size: 12px; color: var(--txt2); white-space: nowrap; }
.rp-panne { color: var(--txt); margin-top: 3px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rp-card.rp-urgent { box-shadow: inset 3px 0 0 var(--red), var(--hairline); }
.rp-tete-nom { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }
a.chip { text-decoration: none; }
.rp-apercu { width: 100%; height: 70vh; border: 0; border-radius: 12px; margin-top: 10px; background: #fff; }
@media (max-width: 640px) { .rp-grid { grid-template-columns: 1fr; } .rp-apercu { height: 60vh; } }

/* ===== v436 — Équipes ===== */
.cal-eq, .eq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.eq-carte { border-left: 4px solid var(--c); }
.eq-membres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eq-membres .fchip { min-height: 36px; }

/* ===== v438 — Mails (mails.js) : 3 colonnes sur PC, 2 sur tablette, 1 vue à la fois au téléphone ===== */
.ml .ml-grille { display: grid; grid-template-columns: 230px minmax(280px, 380px) minmax(0, 1fr); gap: 12px;
  align-items: start; }
.ml .ml-cote { padding: 6px; position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow: auto; }
.ml-boite, .ml-dossier { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--txt); font: inherit; border-radius: var(--r-s, 10px);
  padding: 8px 10px; min-height: 44px; cursor: pointer; }
.ml-boite .t2 { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-boite .grow, .ml-dossier .grow { min-width: 0; }
.ml-boite.on { background: var(--fill); }
.ml-dossier { padding-left: 26px; min-height: 38px; font-size: 14.5px; }
.ml-dossier.on { background: var(--tint, rgba(10,132,255,.12)); color: var(--blue); font-weight: 600; }
.ml-boite:hover, .ml-dossier:hover { background: var(--fill-2, var(--fill)); }
.ml-dossiers { margin: 2px 0 8px; }
.ml-pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ml-nb { font-size: 12px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 1px 7px; }
.ml-liste { min-width: 0; }
.ml-liste-tete { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 6px; }
.ml-selects { display: none; gap: 8px; margin-bottom: 6px; }
.ml-selects select { flex: 1; min-width: 0; }
.ml-filtres { align-items: center; gap: 8px; }
.ml-liste-corps { display: flex; flex-direction: column; gap: 2px; }
.ml-ligne { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; font: inherit;
  color: var(--txt); background: var(--card); border-radius: var(--r-s, 10px); padding: 10px 12px; cursor: pointer;
  box-shadow: 0 0 0 .5px var(--hairline) inset; }
.ml-ligne:hover { background: var(--fill-2, var(--fill)); }
.ml-ligne.on { box-shadow: 0 0 0 2px var(--blue) inset; }
.ml-l1 { display: flex; gap: 8px; align-items: baseline; }
.ml-qui { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-date { font-size: 12px; color: var(--txt2); flex: none; }
.ml-l2 { font-size: 14px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-l3 { display: flex; gap: 4px; flex-wrap: wrap; }
.ml-l3 .chip { font-size: 11px; padding: 1px 6px; }
.ml-ligne.nonlu .ml-qui, .ml-ligne.nonlu .ml-l2 { font-weight: 700; color: var(--txt); }
.ml-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: middle; }
.ml-plus { margin: 8px 0; }
.ml .ml-lire { min-width: 0; padding: 16px; min-height: 300px; }
.ml-retour { display: none; margin-bottom: 8px; }
.ml-sujet { margin: 0 0 8px; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.ml-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; overflow-wrap: anywhere; }
.ml-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.ml-liens, .ml-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ml-lien { display: inline-flex; align-items: center; gap: 4px; }
.ml-lien-btn, .ml-lien-x { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 2px; }
.ml-lien-x { opacity: .7; min-width: 24px; }
.ml-bandeau { background: var(--fill); border-radius: var(--r-s, 10px); padding: 6px 10px; margin-bottom: 8px; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-pj { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 10px; }
.ml-pj-item { display: inline-flex; align-items: center; gap: 6px; background: var(--fill); border-radius: 8px; padding: 4px 8px; max-width: 100%; }
.ml-pj-item a { overflow-wrap: anywhere; }
.ml-corps { border-top: .5px solid var(--hairline); padding-top: 10px; }
.ml-iframe { width: 100%; min-height: 220px; border: 0; background: #fff; border-radius: 8px; display: block; }
.ml-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.ml-ecrire .ml-txt { min-height: 240px; font-family: inherit; }
.ml-res { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 50vh; overflow: auto; }
.ml-cmd-l[disabled] { opacity: .65; cursor: default; }
.ml-adm { border-left: 4px solid var(--c); }
.ml-acces { display: flex; flex-direction: column; gap: 4px; }
.ml-acces-l { align-items: center; gap: 8px; }
.ml-feuille .ml-retour { display: none; }
@media (max-width: 1100px) {
  .ml .ml-grille { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .ml .ml-cote { display: none; }
  .ml-selects { display: flex; }
}
@media (max-width: 640px) {
  .ml .ml-grille { grid-template-columns: minmax(0, 1fr); }
  .ml.lecture .ml-liste { display: none; }
  .ml:not(.lecture) .ml-lire { display: none; }
  .ml .ml-lire { padding: 12px; }
  .ml-retour { display: inline-flex; }
  .ml-sujet { font-size: 19px; }
}
.frm input[type="color"] { height: 44px; padding: 4px 6px; min-width: 80px; }
.ml-selects select { min-height: 40px; padding: 6px 10px; border-radius: var(--r-s, 10px); border: .5px solid var(--hairline);
  background: var(--card); color: var(--txt); font: inherit; font-size: 15px; }

/* ===== v439 — Signatures des mails (mails.js) : aperçu fidèle sur fond blanc, citation sous la signature ===== */
.ml-ck, .frm label.ml-ck { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 15px;
  text-transform: none; letter-spacing: 0; color: var(--txt); margin: 0; }
.ml-ck input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; }
.ml-sig-zone, .ml-cite-zone { border: .5px solid var(--hairline); border-radius: var(--r-s, 10px); padding: 8px 10px; background: var(--fill-3, transparent); }
.ml-sig-apercu { margin-top: 6px; border-radius: 8px; overflow: hidden; background: #fff; border: .5px solid var(--hairline); }
.ml-sig-apercu.off { opacity: .35; }
.ml-sig-apercu > .t2 { background: var(--card); padding: 8px 10px; }
.ml-sig-iframe { display: block; width: 100%; height: 190px; border: 0; background: #fff; }
.ml-cite-txt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--fill); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; color: var(--txt2); }
.ml-sig-logo { display: inline-flex; align-items: center; gap: 8px; }
.ml-res-ligne { display: grid !important; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto; margin-bottom: 6px; }
.frm .ml-res-ligne select, .frm .ml-res-ligne input { width: 100%; min-width: 0; }

/* ===== v440 — Mails : glisser-déposer vers un dossier, rédaction façon client mail ===== */
.ml-sugg:empty { display: none; }
.ml-ligne[draggable="true"] { cursor: grab; }
.ml-ligne.ml-glisse { opacity: .45; }
body.ml-glisse-actif .ml-dossier:not(.on) { box-shadow: 0 0 0 1px var(--hairline) inset; }
.ml-dossier.ml-depot { background: var(--blue) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--blue); }
.ml-dossier.ml-depot .ml-nb { background: #fff; color: var(--blue); }
/* rédaction : barre d'outils, en-têtes en lignes fines, page blanche = le mail tel qu'il partira */
.mc { display: flex; flex-direction: column; }
.mc-barre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 10px; }
.mc-envoyer { min-width: 118px; }
.mc-ck, .frm label.mc-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--txt);
  cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.mc-ck input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; }
.mc-tetes { background: var(--card); border-radius: 12px; box-shadow: 0 0 0 .5px var(--hairline) inset; overflow: hidden; }
.mc-l { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; margin: 0;
  border-bottom: 1px solid rgba(120,120,128,.2); cursor: text; }
.mc-l:last-child { border-bottom: 0; }
.mc-l[hidden] { display: none; }
.mc-l > span { width: 48px; flex: none; color: var(--txt2); font-size: 14px; }
.mc-l input, .mc-l select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px;
  color: var(--txt); padding: 10px 0; outline: none; box-shadow: none; border-radius: 0; min-height: 0; }
.mc-l:focus-within { background: var(--fill-3, transparent); }
.mc-objet { font-weight: 600; }
.mc-pj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-pj:empty { display: none; }
.mc-page { background: #fff; color: #222; border-radius: 12px; margin-top: 10px; padding: 16px 18px 18px;
  box-shadow: 0 0 0 .5px var(--hairline) inset, 0 1px 3px rgba(0,0,0,.06); }
.mc-texte { display: block; width: 100%; min-height: 180px; border: 0; outline: none; resize: none; background: transparent;
  color: #222; font: 14px/1.45 Arial, Helvetica, sans-serif; padding: 0; overflow: hidden; box-shadow: none !important; }
.mc-texte::placeholder { color: #9a9a9e; }
.mc-sig { position: relative; margin-top: 6px; }
.mc-sig[hidden] { display: none; }
.mc-sig-apercu .ml-sig-iframe { height: 180px; }
.mc-sig-apercu > .t2 { color: #8e8e93; padding: 4px 0; }
.mc-sig-mod { position: absolute; top: 0; right: 0; border: 0; background: rgba(0,0,0,.06); color: #0a6cdb; border-radius: 8px;
  padding: 5px 9px; font: 600 12.5px/1 -apple-system, system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; }
.mc-sig:hover .mc-sig-mod, .mc-sig-mod:focus-visible { opacity: 1; }
@media (hover: none) { .mc-sig-mod { opacity: 1; } }
.mc-cite { margin-top: 14px; color: #555; font: 13.5px/1.45 Arial, Helvetica, sans-serif; }
.mc-cite.off .mc-cite-txt, .mc-cite.off .mc-cite-tete > span { opacity: .35; text-decoration: line-through; }
.mc-cite-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.mc-cite-tete .mc-ck { color: #555; font-size: 13px; }
.mc-cite-txt { margin: 0; padding: 0 0 0 10px; border-left: 2px solid #cccccc; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 340px; overflow: auto; }
.mc-note { margin-top: 8px; }
.sheet.mc-depot { box-shadow: 0 0 0 3px var(--blue) !important; }
@media (max-width: 640px) {
  .mc-barre { position: sticky; top: 0; z-index: 3; background: var(--bg); margin: 0 -2px; padding: 4px 2px 8px; }
  .mc-page { padding: 14px; }
}

/* ===== v442 — Commandes fournisseur d'une commande (Digitec / Alltron) ===== */
.afr-carte { border-top: 1px solid var(--hairline); padding-top: 10px; }
.afr-frn { padding: 8px 10px; margin-top: 8px; border-radius: 10px; background: var(--fill-3, rgba(120,120,128,.06)); }
.afr-arts { margin: 6px 0 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.afr-arts li { line-height: 1.35; }