/* ===== Thème MarketRaccoon — clair (crème) et sombre (encre) ===== Un seul jeu de tokens sémantiques pour toute l'application. Le thème s'applique via l'attribut data-theme sur ; le script anti-flash de base.html le pose avant le premier rendu. */ :root { /* Fait suivre les éléments natifs du navigateur : barres de défilement, menus déroulants, champs de formulaire. */ color-scheme: light; /* Palette de marque, commune aux deux thèmes */ --mr-ink: #1a1712; --mr-ink-soft: #221e18; --mr-cream: #f7f2e9; --mr-cream-card: #fffdf8; --mr-beige: #ece3d1; --mr-white: #ffffff; --mr-serif: 'Cormorant Garamond', Georgia, serif; --mr-sans: 'Inter', -apple-system, sans-serif; --mr-mono: 'JetBrains Mono', 'SF Mono', monospace; --mr-radius: 20px; --mr-radius-sm: 12px; --mr-ease: cubic-bezier(0.16, 1, 0.3, 1); /* LES DEUX SEULES LARGEURS DU PRODUIT. Avant, chaque feuille posait la sienne — 1180 ici, 1200 la — et sur un grand ecran rien ne s'alignait verticalement d'une page a l'autre. Une barre du haut qui va d'un bord a l'autre au-dessus d'un contenu arrete a 1180 donne trois colonnes qui ne tombent en face de rien. `--mr-conteneur` : la boite commune. La barre du haut, le hall et Trace s'y calent, donc le projet a gauche est EXACTEMENT au-dessus de l'arbre des pages, et le profil au-dessus du bord droit du texte. `--mr-lecture` : la limite du TEXTE, et elle est plus courte. Une ligne de 200 caracteres se lit mal — l'oeil perd le debut de la ligne suivante. Elle se compte en `ch` (largeur d'un « 0 ») et non en pixels : elle suit donc la taille de police de la personne. */ /* 1720 ET NON 1280. Sur un ecran de PC ordinaire (1920), 1280 laissait 320 px de vide de chaque cote — un tiers de l'ecran perdu, et une app de travail qui ressemble a un article de blog. A 1720 il reste 100 px de marge, assez pour que le cadre ne touche pas le bord. Ce que ca N'ELARGIT PAS : le texte, borne par `--mr-lecture`, et la grille des apps, que sa propre regle tient a 960 px centres. */ --mr-conteneur: 1720px; --mr-lecture: 74ch; /* Tokens sémantiques — THÈME CLAIR par défaut */ --mr-surface: #f2ede3; --mr-surface-card: #fffdf8; --mr-surface-hover: #ffffff; --mr-surface-sunken: #ebe5d9; --mr-text: #1a1712; --mr-text-strong: #000000; /* Assez foncé pour rester lisible sur crème (contraste ~6:1) */ --mr-text-muted: #57503f; --mr-border: rgba(26, 23, 18, 0.14); --mr-border-strong: rgba(26, 23, 18, 0.34); --mr-btn-bg: #1a1712; --mr-btn-text: #f7f2e9; --mr-btn-bg-hover: #000000; --mr-topbar-bg: #fffdf8; --mr-topbar-bg-scrolled: rgba(255, 253, 248, 0.88); --mr-topbar-text: #1a1712; --mr-topbar-text-dim: rgba(26, 23, 18, 0.74); --mr-topbar-hover: rgba(26, 23, 18, 0.06); --mr-topbar-active: rgba(26, 23, 18, 0.1); --mr-topbar-border: rgba(26, 23, 18, 0.1); --mr-accent-up: #2f7d4f; --mr-shadow: 0 24px 48px rgba(26, 23, 18, 0.09); /* COULEURS SEMANTIQUES — un etat, une couleur, dans tout le produit. Ajoutees pour le tableau des taches (25/08/2026) : un tableau sans couleur d'etat se lit comme une maquette, pas comme un produit. Chaque couleur a son « voile », le fond attenue de la pastille qui la porte. Desaturees expres : elles doivent tenir sur creme sans crier. */ --mr-gris: #6b6456; --mr-gris-voile: rgba(26, 23, 18, 0.07); /* Le gris des PETITS textes (dates, compteurs, initiales). `--mr-text-muted` est calibre pour du texte courant sur le fond de page ; pose sur un voile, en 11 px, il passait sous 4,5:1 en theme sombre. */ --mr-badge-texte: #57503f; --mr-bleu: #3d6a8f; --mr-bleu-voile: rgba(61, 106, 143, 0.12); --mr-violet: #715e93; --mr-violet-voile: rgba(113, 94, 147, 0.12); /* Orange et vert ASSOMBRIS le 25/08/2026. Mesures sur le voile compose sur le fond des cartes (#fffdf8) : l'orange donnait 4,04:1 et le vert 4,24:1 pour du texte de 11 px — sous les 4,5:1 exiges par WCAG AA. Les pastilles d'etat et les badges de priorite sont ecrits petit : c'est exactement la taille ou le contraste compte le plus. */ --mr-orange: #8a5222; --mr-orange-voile: rgba(164, 99, 42, 0.12); --mr-rouge: #a13c3c; --mr-rouge-voile: rgba(161, 60, 60, 0.12); --mr-vert: #266741; --mr-vert-voile: rgba(47, 125, 79, 0.12); /* Filigrane : cercles concentriques (clair) */ --mr-pattern-stroke: rgba(26, 23, 18, 0.06); } :root[data-theme="dark"] { color-scheme: dark; --mr-surface: #1a1712; --mr-surface-card: #221e18; --mr-surface-hover: #262119; --mr-surface-sunken: #151310; --mr-text: #f7f2e9; --mr-text-strong: #ffffff; --mr-text-muted: #8d867a; --mr-border: rgba(247, 242, 233, 0.1); --mr-border-strong: rgba(247, 242, 233, 0.28); --mr-btn-bg: #f7f2e9; --mr-btn-text: #1a1712; --mr-btn-bg-hover: #ffffff; --mr-topbar-bg: #1a1712; --mr-topbar-bg-scrolled: rgba(26, 23, 18, 0.88); --mr-topbar-text: #f7f2e9; --mr-topbar-text-dim: rgba(247, 242, 233, 0.7); --mr-topbar-hover: rgba(247, 242, 233, 0.07); --mr-topbar-active: rgba(247, 242, 233, 0.12); --mr-topbar-border: rgba(247, 242, 233, 0.1); --mr-accent-up: #9ac8a4; /* Les memes couleurs, eclaircies : sur fond encre, les valeurs du theme clair deviennent illisibles (contraste < 3:1). */ --mr-gris: #9a9284; --mr-gris-voile: rgba(247, 242, 233, 0.08); --mr-badge-texte: #b3ab9c; --mr-bleu: #8fb8d9; --mr-bleu-voile: rgba(143, 184, 217, 0.14); --mr-violet: #b3a3d4; --mr-violet-voile: rgba(179, 163, 212, 0.14); --mr-orange: #d9a06a; --mr-orange-voile: rgba(217, 160, 106, 0.14); --mr-rouge: #d98a8a; --mr-rouge-voile: rgba(217, 138, 138, 0.15); --mr-vert: #9ac8a4; --mr-vert-voile: rgba(154, 200, 164, 0.14); --mr-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); --mr-pattern-stroke: rgba(247, 242, 233, 0.08); } /* Le fond de page suit toujours le thème */ html, body { background: var(--mr-surface); color: var(--mr-text); } .app-content { background: var(--mr-surface); } /* ===== Bascule clair / sombre dans la topbar ===== */ .theme-toggle { position: relative; width: 46px; height: 26px; flex: none; border: 1px solid var(--mr-topbar-border); border-radius: 999px; background: var(--mr-topbar-hover); cursor: pointer; padding: 0; transition: background 0.25s ease, border-color 0.25s ease; } .theme-toggle:hover { border-color: var(--mr-topbar-text-dim); } .theme-toggle:focus-visible { outline: 2px solid var(--mr-topbar-text); outline-offset: 3px; } /* Le curseur qui glisse */ .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--mr-ink); display: flex; align-items: center; justify-content: center; transition: transform 0.32s var(--mr-ease), background 0.25s ease; } :root[data-theme="dark"] .theme-toggle-knob { transform: translateX(20px); background: var(--mr-cream); } .theme-toggle-knob svg { width: 12px; height: 12px; stroke: var(--mr-cream); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-theme="dark"] .theme-toggle-knob svg { stroke: var(--mr-ink); } .theme-toggle-knob .icon-sun { display: block; } .theme-toggle-knob .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle-knob .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle-knob .icon-moon { display: block; } @media (max-width: 768px) { .theme-toggle { width: 42px; height: 24px; } .theme-toggle-knob { width: 18px; height: 18px; } :root[data-theme="dark"] .theme-toggle-knob { transform: translateX(18px); } } /* ===== Transition douce d'une page à l'autre ===== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: mr-page-out 0.18s ease both; } ::view-transition-new(root) { animation: mr-page-in 0.32s var(--mr-ease) both; } @keyframes mr-page-out { to { opacity: 0; } } @keyframes mr-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Le changement de thème s'accompagne d'un fondu, pas d'un clignotement */ :root.theme-switching, :root.theme-switching body, :root.theme-switching .app-content { transition: background-color 0.28s ease, color 0.28s ease; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .theme-toggle-knob { transition: none; } }