:root { /* ═══ Jetons de THEME ═══ Valeurs par defaut = theme SOMBRE historique. Surchargees plus bas par html[data-theme="clair" | "sepia" | ...]. Le picker (Reglages > Mon profil) pose data-theme sur . L'ACCENT est un axe a part (surcharge par utilisateur, cf base.html). Ces definitions utilisent des formats compacts (#1F1D1D majuscule, rgba(255,255,255,.08) sans espaces) pour ne PAS etre attrapees par les remplacements globaux du corps de la feuille. Doc : docs/architecture/user_theme.md. */ --bg: #141313; --panel: #1F1D1D; /* surface carte/panneau par defaut */ --surface-2: #262121; /* surfaces surelevees : menu, popovers, panneaux FAB */ --surface-inset: #171313; /* creux : champs, puits, listes internes */ --topbar-bg: rgba(20,19,19,.9); /* barre du haut (translucide) */ --overlay: rgba(0,0,0,.38); /* voile des modales / menu */ --text: #F4ECE7; --text-strong: #FFFFFF; --muted: #B6AAA3; --muted-2: #8A8079; /* texte tertiaire, encore plus discret */ --line: rgba(255,255,255,.08); /* filet de bordure */ --line-2: rgba(255,255,255,.14);/* bordure plus marquee */ --hover: rgba(255,255,255,.06); /* fond de survol subtil */ --hover-2: rgba(255,255,255,.04);/* fond sureleve tres subtil */ --shadow: 0 20px 40px rgba(0, 0, 0, 0.28); --on-accent: #171110; /* texte pose SUR une couleur d'accent (constant) */ --native-scheme: dark; /* color-scheme des widgets natifs (icone du picker date/heure) */ /* Alias historiques utilises par certains templates (settings_home...) : pointent sur les jetons de theme -> se mettent a jour tout seuls a chaque changement de theme (la substitution var() se resout a l'usage, avec le --line/--muted du theme). */ --border: var(--line); --text-muted: var(--muted); --inset: var(--surface-inset); /* ═══ Accent (axe INDEPENDANT du theme, surcharge par utilisateur) ═══ */ --accent: #df8f78; --accent-strong: #f2b36a; --accent-soft: rgba(223, 143, 120, 0.16); /* ═══ Invariants ═══ */ --ink-blue: #8aa8bf; /* Couleur de MARQUE du mot-symbole EvoMarket (le « Evo » bicolore, 31/07) : le cyan des couches du logo. Volontairement INDEPENDANTE de --accent (qui est choisi par chaque utilisateur) : une marque ne change pas de couleur selon l'utilisateur. Surchargee plus bas sur les themes CLAIRS (clair, sepia, aurore), ou ce cyan baverait sur le blanc -> cyan plus profond. */ --brand-mark: #22D3EE; /* Rouge/vert semantiques « vifs » (decision Philippe vague 3, 15/07) : UNIQUES couleurs succes/danger de l'app — plus de --red/--green locaux par page. Les fonds teintes doivent rester doux (color-mix / alpha). */ --success: #3dbd7d; --warning: #ffd27f; --danger: #ff5b52; /* Liseré de la bulle Prix du picking (report #404 choix C, puis report #410 : Achille trouvait le lime « presque fluo » moche -> vert emeraude). Sert a CERCLER une valeur qui doit sauter aux yeux. Jeton de SIGNAL, pas une couleur de texte. Surcharge plus bas sur les themes CLAIRS (clair, sepia, aurore) ou un vert trop clair baverait sur le blanc -> emeraude plus profond. */ --price-ring: #2fbf71; /* Liseré de la bulle NET du picking, onglet Caisse (demande Philippe 20/07) : BLEU pour ne pas confondre avec le vert du Prix. Meme logique que --price-ring : jeton de SIGNAL, surcharge sur les themes clairs. */ --net-ring: #4396e6; /* Pastille quantite x2/x3 du picking (demande Philippe 20/07) : JAUNE FLUO qui claque, dans l'encart de la carte (remplace l'ancien filigrane geant noye derriere les boutons). --qty-fluo-ink = texte pose dessus (constant : le fond reste jaune sur tous les themes). Surcharge themes clairs. */ --qty-fluo: #ffe135; --qty-fluo-ink: #241b03; --ink-teal: #5cc3ba; /* 6e couleur de menu : partagee par TOUS les autres onglets (demande Philippe 2026-07-08) */ --radius: 22px; /* Echelle de rayons officielle (vague 3) : 4 tailles, a utiliser pour tout nouveau composant au lieu de valeurs en dur. */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --mobile-overlay-stack-height: 0px; } /* ── Theme CLAIR ── fond clair, texte sombre, bordures noires translucides ── */ html[data-theme="clair"] { --bg: #eae4dd; --panel: #ffffff; --surface-2: #ffffff; --surface-inset: #f1ebe4; --topbar-bg: rgba(249,246,242,.9); --overlay: rgba(30,22,18,.28); --text: #2b2420; --text-strong: #17110f; --muted: #6f645d; --muted-2: #948a82; --line: rgba(0,0,0,.10); --line-2: rgba(0,0,0,.16); --hover: rgba(0,0,0,.05); --hover-2: rgba(0,0,0,.035); --shadow: 0 18px 40px rgba(60, 45, 30, 0.16); --native-scheme: light; --brand-mark: #0d8ea6; --price-ring: #1f9d57; --net-ring: #1e6fc4; --qty-fluo: #f5c400; } /* ── Theme SEPIA doux ── papier chaud ── */ html[data-theme="sepia"] { --bg: #e9dfcc; --panel: #fbf5ea; --surface-2: #fbf5ea; --surface-inset: #f1e8d6; --topbar-bg: rgba(251,245,234,.9); --overlay: rgba(50,38,20,.30); --text: #3a3025; --text-strong: #241d14; --muted: #7c6f5b; --muted-2: #9a8d78; --line: rgba(80,60,30,.14); --line-2: rgba(80,60,30,.22); --hover: rgba(80,60,30,.06); --hover-2: rgba(80,60,30,.04); --shadow: 0 18px 40px rgba(90, 70, 40, 0.16); --native-scheme: light; --brand-mark: #0d8ea6; --price-ring: #1c8f50; --net-ring: #1a66b5; --qty-fluo: #f5c400; } /* ── Theme NUIT BLEUE ── sombre bleute ── */ html[data-theme="nuit-bleue"] { --bg: #101623; --panel: #1a2233; --surface-2: #212c40; --surface-inset: #131b2b; --topbar-bg: rgba(16,22,35,.9); --overlay: rgba(0,0,0,.45); --text: #e9eef8; --text-strong: #ffffff; --muted: #9aa8c0; --muted-2: #74839c; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.15); --hover: rgba(255,255,255,.06); --hover-2: rgba(255,255,255,.04); --shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } /* ── Theme GRIS ARDOISE ── sombre neutre ── */ html[data-theme="ardoise"] { --bg: #16181c; --panel: #212429; --surface-2: #282c32; --surface-inset: #191c20; --topbar-bg: rgba(22,24,28,.9); --overlay: rgba(0,0,0,.42); --text: #eceef1; --text-strong: #ffffff; --muted: #a1a7b0; --muted-2: #7b818b; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --hover: rgba(255,255,255,.06); --hover-2: rgba(255,255,255,.04); --shadow: 0 20px 40px rgba(0, 0, 0, 0.32); } /* ── Theme NUIT VIOLETTE ── sombre violet ── */ html[data-theme="nuit-violette"] { --bg: #17131f; --panel: #221b2e; --surface-2: #2b2340; --surface-inset: #1a1526; --topbar-bg: rgba(23,19,31,.9); --overlay: rgba(0,0,0,.45); --text: #ece7f5; --text-strong: #ffffff; --muted: #a99ec0; --muted-2: #7f7599; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.15); --hover: rgba(255,255,255,.06); --hover-2: rgba(255,255,255,.04); --shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } /* ── Theme FORET ── sombre vert ── */ html[data-theme="foret"] { --bg: #121a15; --panel: #1a251d; --surface-2: #223028; --surface-inset: #14201a; --topbar-bg: rgba(18,26,21,.9); --overlay: rgba(0,0,0,.42); --text: #e7f0e9; --text-strong: #ffffff; --muted: #9db3a5; --muted-2: #71877a; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --hover: rgba(255,255,255,.06); --hover-2: rgba(255,255,255,.04); --shadow: 0 20px 40px rgba(0, 0, 0, 0.34); } /* ── Theme AURORE ── clair rose poudre ── */ html[data-theme="aurore"] { --bg: #f3e7e6; --panel: #ffffff; --surface-2: #ffffff; --surface-inset: #f7ecec; --topbar-bg: rgba(250,244,244,.9); --overlay: rgba(40,20,26,.26); --text: #2e2226; --text-strong: #1c1013; --muted: #77626a; --muted-2: #9c8890; --line: rgba(60,0,20,.10); --line-2: rgba(60,0,20,.16); --hover: rgba(60,0,20,.05); --hover-2: rgba(60,0,20,.035); --shadow: 0 18px 40px rgba(80, 40, 55, 0.16); --native-scheme: light; --brand-mark: #0d8ea6; --price-ring: #1f9d57; --net-ring: #1e6fc4; --qty-fluo: #f5c400; } /* ── Theme CONTRASTE ── noir profond, contraste eleve (accessibilite) ── */ html[data-theme="contraste"] { --bg: #000000; --panel: #0d0d0d; --surface-2: #161616; --surface-inset: #0a0a0a; --topbar-bg: rgba(0,0,0,.92); --overlay: rgba(0,0,0,.6); --text: #ffffff; --text-strong: #ffffff; --muted: #c8c8c8; --muted-2: #9a9a9a; --line: rgba(255,255,255,.18); --line-2: rgba(255,255,255,.30); --hover: rgba(255,255,255,.10); --hover-2: rgba(255,255,255,.06); --shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* Champs date/heure : l'icone native du picker (webkit) suit le theme via --native-scheme, sinon elle reste sombre -> invisible sur champ sombre. */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { color-scheme: var(--native-scheme); } * { box-sizing: border-box; } /* ── event ripple ── */ .event-ripple { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0.45; animation: ripple-expand 1.4s ease-out forwards; } @keyframes ripple-expand { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.45; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } html { min-height: 100%; background: var(--bg); overflow-x: hidden; overscroll-behavior-y: auto; /* decalage-menu-0708 : reserve EN PERMANENCE la gouttiere de l'ascenseur vertical. Sinon, ouvrir le menu en grand ecran verrouille le scroll (body.menu-open-mobile -> overflow:hidden), l'ascenseur (~15px) disparait, la page s'elargit d'autant et le contenu pleine largeur (l'accueil .hm surtout) se recadre vers la DROITE ; comme overflow-x est masque, le bord droit est rogne = infos perdues. Avec la gouttiere reservee, verrouiller le scroll ne change plus la largeur -> zero decalage, partout. */ scrollbar-gutter: stable; /* Note: scroll-padding-bottom retire volontairement. Sur iOS, il provoquait un re-scroll du caret a chaque touche dans un textarea jusqu'a ce que le champ soit tout en haut. Android/PC non affectes. */ } html.menu-open-mobile, body.menu-open-mobile { overscroll-behavior-y: none; } body { margin: 0; min-height: 100vh; overflow-x: hidden; overscroll-behavior-y: auto; -webkit-text-size-adjust: 100%; /* Degrade anime = jetons du theme (pas de hex sombre fige) : subtil scintillement dans la famille du fond, sombre en theme sombre ET clair en theme clair. Avant : #1a1412/#201714 en dur -> bande sombre au centre de la page en clair. */ background: linear-gradient(160deg, var(--bg) 0%, var(--surface-inset) 30%, var(--surface-2) 50%, var(--surface-inset) 70%, var(--bg) 100%); background-size: 300% 300%; background-attachment: fixed; animation: bg-shift 16s ease-in-out infinite; color: var(--text); /* Police unique EMBARQUEE (decision Philippe vague 3, 15/07) : Inter self-host (fonte variable, @font-face plus bas) -> rendu identique sur tous les appareils. Avant : Bahnschrift, qui n'existe que sur Windows (Mac/mobile retombaient sur une autre police sans qu'on l'ait choisi). */ font-family: "Inter", "Segoe UI", system-ui, sans-serif; } /* Inter — self-host, fonte variable 100→900 (latin + latin-ext pour les accents). Fichiers commites dans static/fonts/, zero dependance CDN. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; } @keyframes bg-shift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @media (max-width: 768px) { body { animation-duration: 8s; } } body.menu-open-mobile { overflow: hidden; } body.menu-open-mobile .app-shell { overflow: hidden; } body.mobile-side-drawer-open { overflow: hidden; } body.mobile-side-drawer-open .app-shell { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } /* Liste deroulante NATIVE : fond opaque sombre + texte clair PARTOUT. L'app est en theme sombre ; sans ca, le popup d'options d'un