/* ════════════════════════════════════════════════
PUCACE — CSS mobile-first — version propre
Taille cible : écran 390px (iPhone 14)
════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
DESIGN TOKENS — 3-layer system (Phase 4.A 2026)
──────────────────────────────────────────────
Layer 1 Primitives (raw OKLCH palette)
└─ used internally only, never par les composants directement
Layer 2 Semantic (intent-based : --color-text-primary, --color-surface,
--color-accent, --color-success, etc.) → dark mode override ICI
Layer 3 Component + Legacy aliases (--txt, --surf, --acc, --grn, --red,
--blue, --amber, --pur — 1:1 avec les valeurs précédentes pour
backward compat totale ; aucun composant existant n'est cassé)
OKLCH choisi car perceptuellement uniforme : color-mix(in oklch, …)
produit des hover/disabled/soft prévisibles. Baseline-Widely-Available
2026 (Safari 15.4+, Chrome 111+).
═══════════════════════════════════════════════ */
:root{
/* Polices (2026-09-11, direction Apple) : la police du SYSTÈME — SF Pro sur iPhone
et Mac, Roboto sur Android. --font-num porte les grandeurs (kg, CHF, arrêts) en
SF Pro Rounded là où il existe : la signature du produit, comme Santé ou Forme. */
--font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
--font-num:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;
/* Layout */
--nav:60px;--pad:12px;
/* Radii (spec Paper & Ink) — --rad:14 et --radsm:10 conservés pour compat existante */
--rad:14px;--radsm:10px;
--rad-lg:14px; /* alias --rad */
/* Spacing 4/8/12/16/24 */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
/* Motion */
--t-fast:120ms;--t-base:200ms;--ease:cubic-bezier(.4,0,.2,1);
/* Type scale (spec Paper & Ink) */
/* Weights */
/* ──────────────────────────────────────────────
Layer 1 — Primitives (raw OKLCH palette)
────────────────────────────────────────────── */
/* Orange (PUCACE accent — hue 49-56°) */
/* Neutral grays (light mode — slight cool tint hue 270°) */
/* Cool dark blue-grays (dark mode — hue 250-264°) */
/* Green (success — hue 145-152°) */
/* Red (danger — hue 25-30°) */
/* Blue (info / twint — hue 240-260°) */
/* Amber (warning — hue 56-66°) */
/* Purple (pickup tag — hue 285-295°) */
}
/* ──────────────────────────────────────────────
Layer 2 — Semantic (intent-based)
Layer 3 — Legacy aliases (1:1 backward compat)
──────────────────────────────────────────────
body.light et body.dark redéfinissent UNIQUEMENT la sémantique.
Les alias legacy (--txt, --surf, --acc, etc.) restent strictement
identiques aux valeurs précédentes pour zéro régression visuelle.
Les valeurs rgba(…) historiques (borders/softs avec alpha tintée)
sont conservées telles quelles : color-mix(transparent N%) ne donne
pas le même rendu qu'un rgba teinté car la teinte alpha mix avec le
fond et change selon le contexte. Préserver la fidélité prime ici.
────────────────────────────────────────────── */
body.light{
/* === « Paper & Ink » — palette du design system PUCACE ===================
Le gris « stone » d'origine (teinte neutre froide) est remplace par le
PAPIER CHAUD et l'ENCRE BRUNE. Un seul point d'entree : ces 5 lignes
alimentent les 1185 usages de var(--) de la feuille. Aucun JavaScript
n'est touche — les 91 gestes de l'app restent identiques.
Source : design system PUCACE, tokens/colors.css. */
--acc:#C45C18; --acc-tint:#F6E8DC; --acc-deep:#A24D14; --acc-glow:rgba(196,92,24,0.18);
--bg:#FAF7F2; --surf:#FFFFFF; --surf2:#F3ECE1; --surf3:#EDE4D5;
--bdr:#E4DCCF; --bdr2:#D3C8B6;
--txt:#241E17; --txt2:#5C5347; --txt3:#8B8073;
/* Tuiles d'action — « Paper & Ink » n'a QU'UN accent. Les cinq teintes
d'origine (vert / bleu / violet / ambre / rose) faisaient cinq marques dans
un ecran. Elles deviennent du papier et de l'encre ; ce qui distingue une
action, c'est son emoji et son mot, pas sa couleur. Seules les quatre
semantiques metier (encaisse / Twint / impaye / alerte) gardent une couleur,
parce qu'elles portent une information d'argent. */
--call-bg:#F3ECE1; --call-bdr:#D3C8B6; --call-ico:#5C5347;
--pho-bg:#F3ECE1; --pho-bdr:#D3C8B6; --pho-lbl:#241E17;
/* Semantiques METIER — les seules couleurs qui restent, parce qu'elles
portent une information d'argent ou de risque :
vert = encaisse bleu = Twint rouge = impaye/annule
ocre = alerte (production necessaire, peremption qui presse)
Les teintes Tailwind d'origine (indigo, purple, slate) n'avaient pas de
sens metier : elles deviennent du papier. */
--green:#3F7D4E; --green-bg:#EAF3EC; --green-bdr:#B7D6BF; --green-deep:#24502F;
--amber:#A6771A; --amber-bg:#F7EFDC; --amber-bdr:#DCC48A; --amber-deep:#6B4C10;
--slate-bg:#F3ECE1; --slate-bdr:#D3C8B6; --slate-deep:#241E17;
--rose:#B23A2E; --rose-bg:#F8E9E7; --rose-bdr:#E0AFA9; --rose-deep:#72231B;
--indigo:#2F5FB0; --indigo-bg:#E8EEF8; --indigo-bdr:#AFC4E4; --indigo-deep:#1E3D72;
--purple:#8B8073; --purple-bg:#F3ECE1; --purple-bdr:#D3C8B6; --purple-deep:#241E17;
color-scheme: light;
/* === Legacy aliases (compat composants pré-mockup) — pointent vers tokens mockup === */
--shadow:0 1px 6px rgba(30,50,100,.08);
--shadow-card:0 1px 2px rgba(0,0,0,0.04),0 4px 8px rgba(0,0,0,0.04);
--shadow-pop:0 12px 36px rgba(30,50,100,.14),0 2px 8px rgba(30,50,100,.08);
--shadow-toast:0 4px 16px rgba(30,50,100,.18);
--accd: var(--acc-tint);
--grn: var(--green);
--grnd: var(--green-bg);
--red: var(--rose);
--redd: var(--rose-bg);
--blue: var(--call-ico);
--blued: var(--call-bg);
--pur: var(--purple);
--purd: var(--purple-bg);
--amberd:var(--amber-bg);
--inpbg: var(--surf);
--fg-3:var(--txt3);
--btn-primary-text: #FFFFFF;
}
body.dark{
/* === « Paper & Ink » sombre — encre de nuit ============================
Le bleu-gris d'origine (#080E1A, teinte 264) devient une encre CHAUDE :
le sombre doit etre la meme matiere que le clair, pas une autre marque. */
--acc:#E8862E; --acc-tint:#2C2115; --acc-deep:#F0A04E; --acc-glow:rgba(232,134,46,0.25);
--bg:#14110E; --surf:#201B15; --surf2:#1C1813; --surf3:#241E17;
--bdr:#322B22; --bdr2:#423A2E;
--txt:#ECE4D8; --txt2:#B9AD9C; --txt3:#8A7F70;
/* Memes tuiles en encre de nuit — meme regle : une seule marque. */
--call-bg:#1C1813; --call-bdr:#423A2E; --call-ico:#B9AD9C;
--pho-bg:#1C1813; --pho-bdr:#423A2E; --pho-lbl:#ECE4D8;
/* Memes semantiques en encre de nuit (tokens/colors.css, bloc sombre). */
--green:#7BC48C; --green-bg:#1B2A1F; --green-bdr:#2F5238; --green-deep:#A8DDB5;
--amber:#E0B458; --amber-bg:#2A2213; --amber-bdr:#4E3F1E; --amber-deep:#F0D08E;
--slate-bg:#1C1813; --slate-bdr:#423A2E; --slate-deep:#ECE4D8;
--rose:#E88B7E; --rose-bg:#2E1A17; --rose-bdr:#5A2E28; --rose-deep:#F3B5AC;
--indigo:#8FB2E8; --indigo-bg:#172234; --indigo-bdr:#2C4463; --indigo-deep:#BBD0F0;
--purple:#8A7F70; --purple-bg:#1C1813; --purple-bdr:#423A2E; --purple-deep:#ECE4D8;
color-scheme: dark;
/* === Legacy aliases dark === */
--shadow:0 1px 8px rgba(0,0,0,.4);
--shadow-card:0 1px 2px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.3);
--shadow-pop:0 12px 36px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35);
--shadow-toast:0 4px 20px rgba(0,0,0,.5);
--accd: var(--acc-tint);
--grn: var(--green);
--grnd: var(--green-bg);
--red: var(--rose);
--redd: var(--rose-bg);
--blue: var(--call-ico);
--blued: var(--call-bg);
--pur: var(--purple);
--purd: var(--purple-bg);
--amberd:var(--amber-bg);
--inpbg: var(--surf);
--fg-3:var(--txt3);
--btn-primary-text: #FFFFFF;
}
/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
html{touch-action:manipulation}
/* Phase 4.B — overscroll-behavior:contain disables iOS pull-to-refresh on the
PWA shell. scrollbar-gutter:stable kills layout shift quand la scrollbar
apparaît (desktop / Android). */
body{font-family:var(--font-text);background:var(--bg);color:var(--txt);display:flex;flex-direction:column;font-size:15px;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased;overscroll-behavior:contain;scrollbar-gutter:stable}
/* ── Icônes Lucide (Phase 4.C) ──
Usage :
Taille : 1em (suit font-size du parent). Couleur : currentColor.
Variantes : .ico-sm (.85em) · .ico-lg (1.25em) · .ico-xl (1.5em). */
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex-shrink:0;display:inline-block}
.ico-sm{width:.85em;height:.85em}
.ico-lg{width:1.25em;height:1.25em}
.ico-xl{width:1.5em;height:1.5em}
/* ── Layout principal ── */
header{flex-shrink:0;height:calc(52px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) var(--pad) 0;background:var(--surf);border-bottom:1px solid var(--bdr);box-shadow:var(--shadow-card);position:relative;z-index:10}
.logo{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--txt);letter-spacing:-.025em}
.hdr-r{display:flex;align-items:center;gap:8px}
.wbadge{font-size:.62rem;font-weight:500;color:var(--txt2);background:var(--surf2);border:1px solid var(--bdr);padding:3px 8px;border-radius:20px;font-style:italic;text-transform:none;letter-spacing:0}
.wbadge b{color:var(--txt);font-weight:600}
.hdr-alert{background:var(--redd);color:var(--red);border:1px solid rgba(192,57,43,.2);border-radius:20px;padding:3px 10px;font-size:.65rem;font-weight:500;cursor:pointer}
.hdr-menu-wrap{position:relative}
.hdr-menu-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--bdr2);background:var(--surf2);cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;color:var(--txt2);font-family:inherit}
.hdr-menu-btn:active{transform:scale(.9)}
.hdr-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--surf);border:1px solid var(--bdr2);border-radius:14px;padding:8px;box-shadow:var(--shadow-pop);z-index:30}
/* 68px : l’en-tête (52px) et la marge du menu ; en paysage, le menu défile au lieu de sortir de l’écran. */
.hdr-menu.on{display:block;max-height:calc(var(--vvh,100dvh) - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--env-height,0px));overflow-y:auto}
.hdr-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border:none;background:none;border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--txt);font-family:inherit}
.hdr-menu-item:active{background:var(--surf2)}
.hdr-menu-danger{color:var(--red)}
.rpill{font-size:.6rem;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase;margin:0 auto 8px}
.rp-a{background:var(--accd);color:var(--acc);border:1px solid rgba(139,69,19,.2)}
.rp-l{background:var(--grnd);color:var(--grn);border:1px solid rgba(46,122,70,.2)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.inner{padding:var(--pad) var(--pad) calc(var(--nav) + 16px + env(safe-area-inset-bottom))}
/* ── Bottom nav ── */
.bnav{height:calc(var(--nav) + env(safe-area-inset-bottom,0px));flex-shrink:0;background:var(--surf);border-top:1px solid var(--bdr);display:grid;padding-bottom:env(safe-area-inset-bottom,0px)}
.ni{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative;transition:transform var(--t-fast) var(--ease)}
.ni:active{transform:scale(.94)}
.ni-ico{font-size:1.2rem;transition:transform var(--t-base) var(--ease);position:relative}
.ni-lbl{font-size:.58rem;font-weight:500;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;transition:color var(--t-base) var(--ease)}
.ni.on .ni-lbl{color:var(--txt);font-weight:600}
.ni.on .ni-ico{transform:translateY(-2px)}
.ni::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:24px;height:2.5px;background:var(--acc);border-radius:0 0 3px 3px;transition:transform var(--t-base) var(--ease);transform-origin:center}
.ni.on::after{transform:translateX(-50%) scaleX(1)}
/* ── Sections ── */
.sec{display:none}
.sec.on{display:block;animation:fu .26s var(--ease)}
@keyframes fu{from{opacity:0}to{opacity:1}}
.sechead{margin-bottom:12px;display:flex;align-items:flex-start;justify-content:space-between}
.sh h2{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.025em;color:var(--txt);line-height:1.05;text-wrap:balance}
.sh p{font-style:italic;font-size:.72rem;color:var(--txt2);margin-top:4px}
/* ── Cards ── */
.card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rad);padding:var(--pad);margin-bottom:10px;box-shadow:var(--shadow-card)}
.ctitle{font-family:var(--font-display);font-size:.85rem;font-weight:500;font-style:italic;color:var(--txt2);margin-bottom:10px;letter-spacing:.005em;text-wrap:balance}
/* ── KPI grid ── */
.kg{display:grid;gap:8px;margin-bottom:10px}
.k2{grid-template-columns:1fr 1fr}
.kpi{background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--radsm);padding:12px 11px;position:relative}
.kl{font-size:.58rem;color:var(--txt3);font-weight:500;text-transform:uppercase;letter-spacing:.09em;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--bdr)}
.kv{font-family:var(--font-display);font-size:1.35rem;font-weight:500;line-height:1;letter-spacing:-.025em}
.ks{font-size:.58rem;color:var(--txt3);margin-top:3px;font-style:italic}
.cy{color:var(--acc)}.cg{color:var(--grn)}.cr{color:var(--red)}.cw{color:var(--txt)}
/* ── Lot semaine ── */
/* .lot-week-box retiré en Phase E — doublon avec KPI Coûts */
/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:4px;font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;border-width:1.5px;white-space:nowrap}
.bg{background:var(--grnd);color:var(--grn);border:1px solid rgba(56,196,114,.2)}
.by{background:var(--accd);color:var(--acc);border:1px solid rgba(139,69,19,.2)}
.br{background:var(--redd);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.bb{background:var(--blued);color:var(--blue);border:1px solid rgba(26,95,160,.18)}
.bp{background:var(--purd);color:var(--pur);border:1px solid rgba(94,62,154,.18)}
.b-cash{background:var(--grnd);color:var(--grn);border:1px solid rgba(56,196,114,.18)}
.b-twint{background:var(--blued);color:var(--blue);border:1px solid rgba(26,95,160,.2)}
.b-later{background:rgba(200,120,0,.1);color:var(--amber);border:1px solid rgba(200,120,0,.2)}
body.dark .b-later{color:var(--amber)}
/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:10px 14px;border-radius:var(--radsm);border:none;font-family:var(--font-text);font-size:.82rem;font-weight:600;cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);text-decoration:none;white-space:nowrap;min-height:40px}
.bf{width:100%;display:flex}
.btn.bacc.bf{max-width:400px;margin-left:auto;margin-right:auto;border-radius:12px;box-shadow:var(--shadow-card)}
.bacc{background:var(--acc);color:#fff}.bacc:active{transform:scale(.96)}
.bgrn{background:var(--grnd);color:var(--grn);border:1px solid rgba(56,196,114,.22)}.bgrn:active{filter:brightness(.9)}
.bred{background:var(--redd);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.bghost{background:transparent;color:var(--txt2);border:1px solid var(--bdr2)}.bghost:active{background:var(--surf2)}
.bblu{background:var(--blued);color:var(--blue);border:1px solid rgba(26,95,160,.18)}
.bsm{padding:6px 10px;font-size:.75rem;border-radius:8px;min-height:34px}
.al{display:inline-flex;align-items:center;gap:.22rem;padding:8px 12px;border-radius:8px;font-size:.72rem;font-weight:500;text-decoration:none;cursor:pointer;border:none;font-family:var(--font-text);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease);min-height:36px}
.al-m{background:var(--blued);color:var(--blue);border:1px solid rgba(26,95,160,.14)}
.al-w{background:rgba(37,211,102,.08);color:#25D366;border:1px solid rgba(37,211,102,.18)}
.al-c{background:var(--blued);color:var(--blue);border:1px solid rgba(26,95,160,.14)}
.al-d{background:var(--redd);color:var(--red);border:1px solid rgba(192,57,43,.15)}
.al-d.conf{background:var(--red);color:#fff;animation:pulse .3s ease}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* ── Formulaires ── */
.field{margin-bottom:10px}
.field label{display:block;font-size:.62rem;color:var(--txt2);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
/* CRIT-A-1 — font-size 1rem (16px) requis pour empêcher iOS Safari
de zoomer automatiquement au focus (cf. WCAG 1.4.4 + UX iOS). */
.inp{width:100%;background:var(--inpbg);border:1px solid var(--bdr2);border-radius:var(--radsm);padding:11px 12px;color:var(--txt);font-family:var(--font-text);font-size:1rem;outline:none;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);-webkit-appearance:none;appearance:none;min-height:44px}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accd)}
.sbox:focus-within .sico{opacity:.7}
.inp option{background:var(--surf2)}
textarea.inp{resize:none;min-height:auto}
.hint{font-size:.62rem;color:var(--txt3);margin-top:3px}
.frow{display:flex;gap:8px}.frow .field{flex:1}
.sbox{position:relative;margin-bottom:12px}
.sbox .inp{padding-left:2.2rem}
.sico{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.4;pointer-events:none}
.slbl{font-size:.62rem;color:var(--txt2);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
/* ── Misc ── */
.divider{height:1px;background:var(--bdr);margin:8px 0}
.row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:.82rem}
.row.tot{font-weight:500;font-size:.88rem;border-top:1px solid var(--bdr);padding-top:8px;margin-top:2px}
.empty-st{text-align:center;padding:32px var(--pad);color:var(--txt3)}
.empty-st .ei{font-size:2.2rem;margin-bottom:8px}
.empty-st p{font-size:.78rem}
/* ── Statistiques ── */
.stabs{display:flex;gap:6px;margin-bottom:10px}
.stab{flex:1;padding:9px;border-radius:8px;border:1px solid var(--bdr);background:var(--surf2);color:var(--txt2);font-family:var(--font-text);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-align:center}
.stab.sel{border-color:var(--acc);background:var(--accd);color:var(--acc)}
/* ── Livraisons — header jour ── */
.day-empty{font-size:.72rem;color:var(--txt3);padding:10px var(--pad);background:var(--surf2);border-radius:var(--radsm);border:1px dashed var(--bdr);text-align:center}
/* Bouton ⋮ contexte livraison */
/* .dlv-ctx retiré en Phase G — le bouton ⋮ passe dans la rangée
d'icon-buttons de .dlv-actions comme 7e slot « Plus ». */
/* ── Historique ── */
.htog{display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rad);cursor:pointer;margin-bottom:5px;box-shadow:var(--shadow-card)}
.hbody{max-height:0;overflow:hidden;transition:max-height .3s ease}.hbody.on{max-height:3000px}
.hi{background:var(--surf);border:1px solid var(--bdr);border-left:3px solid var(--grn);border-radius:var(--rad);padding:10px var(--pad);margin-bottom:9px}
.hi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.hi-name{font-weight:500;font-size:.85rem}
/* ── Menu contextuel ── */
.ctx-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--bdr2);background:transparent;color:var(--txt2);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;line-height:1}
.ctx-btn:active{background:var(--surf2)}
.ctx-red-conf{background:var(--red)!important;color:#fff!important;animation:ctx-pulse-conf 1s ease-in-out infinite}
@keyframes ctx-pulse-conf{0%,100%{opacity:1}50%{opacity:.78}}
/* ── Planification ── */
.daybtns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.daybtn{padding:8px 12px;border-radius:8px;border:1px solid var(--bdr);background:var(--surf2);color:var(--txt2);font-family:var(--font-text);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;min-height:38px}
.daybtn.sel{border-color:var(--acc);background:var(--accd);color:var(--acc)}
.qty-row{display:flex;align-items:center;justify-content:space-between;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--radsm);padding:10px 12px;margin-bottom:8px}
.qnm{font-weight:600;font-size:.85rem;flex:1}
.qaddr{font-size:.62rem;color:var(--txt3);margin-top:2px}
.qctrl{display:flex;align-items:center;gap:14px}
.qbtn{width:36px;height:36px;border-radius:50%;border:2px solid var(--bdr2);background:var(--surf3);color:var(--txt);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:500;font-family:var(--font-text)}
.qbtn:active{background:var(--acc);color:#fff;border-color:var(--acc)}
.qval{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--acc);min-width:36px;text-align:center}
/* ── Alpha tabs clients ── */
.alpha-btn{padding:5px 8px;border-radius:8px;border:1px solid var(--bdr);background:var(--surf2);color:var(--txt2);font-size:.72rem;font-weight:600;cursor:pointer;min-width:30px;text-align:center;min-height:34px}
.alpha-btn.sel{background:var(--acc);color:#fff;border-color:var(--acc)}
.alpha-btn.has{color:var(--txt)}
/* ── Itinéraire ── */
.itin-st{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rad);padding:10px var(--pad);margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow-card)}
.itin-n{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-weight:600;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.itin-b{flex:1}
.itin-nm{font-weight:500;font-size:.88rem}
.itin-ad{font-size:.68rem;color:var(--txt2);margin-top:2px}
.itin-mt{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
/* ── Login ── */
/* Session présumée en cours de vérification (classe posée dans , retirée par session.js). */
.session-restoring #loginsc{visibility:hidden}
.loginsc{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.lbox{width:100%;max-width:340px}
.trow{display:flex;gap:10px;margin-bottom:24px}
.topt{flex:1;padding:12px 8px;border-radius:12px;border:2px solid var(--bdr);background:var(--surf2);cursor:pointer;text-align:center}
.topt.sel{border-color:var(--acc);background:var(--accd)}
.toi{font-size:1.4rem;margin-bottom:3px}
.ton{font-size:.75rem;font-weight:500;color:var(--txt2)}
.topt.sel .ton{color:var(--acc)}
.lerr{font-size:.75rem;color:var(--red);margin-top:6px;display:none}
/* ── Modals ── */
.mover{display:none!important;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);align-items:flex-end;justify-content:center;animation:fadeover var(--t-base) var(--ease)}
.mover.on{display:flex!important}
/* Sans image de fin : le voile s’arrête sur SA teinte. L’ancienne fin (noir 72 %, flou) passait devant le voile PUCACE le temps de l’animation. */
@keyframes fadeover{from{background-color:rgba(0,0,0,0)}}
.modal{background:var(--surf);border:1px solid var(--bdr2);border-radius:14px 14px 0 0;padding:0 var(--pad) 36px;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;animation:su .28s var(--ease);box-shadow:var(--shadow-pop);scrollbar-width:none}
.modal::-webkit-scrollbar{display:none}
@keyframes su{from{transform:translateY(8%);opacity:0}to{transform:translateY(0);opacity:1}}
.mhandle{width:36px;height:4px;background:var(--bdr2);border-radius:2px;margin:10px auto 16px;opacity:.6}
.mtitle{font-family:var(--font-display);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin-bottom:14px;color:var(--txt);text-wrap:balance}
.mact{display:flex;gap:8px;margin-top:10px}.mact .btn{flex:1}
/* ── Phase 4.D — Native