/* ============================================================================ tokens.css — Design system du calculateur ---------------------------------------------------------------------------- Les 8 variables pilotées par le panel admin (--bg, --card, --border, --text, --input-bg, --placeholder, --btn, --btn-text) sont injectées en inline style sur par assets/js/core.js -> applyTheme(). Tout le reste du design system est DÉRIVÉ de ces valeurs via color-mix(), ce qui garantit un rendu cohérent que le client choisisse un thème clair ou un thème sombre, sans jamais avoir à reconfigurer quoi que ce soit. ============================================================================ */ :root{ /* ---- Palette pilotable (valeurs de repli si le JS n'a pas encore tourné) -- Doit rester synchronisée avec CONFIG_DEFAULT.theme dans assets/js/core.js, sinon on voit la couleur changer au chargement. */ --bg:#faf8ff; --card:#ffffff; --border:#e4dcfb; --text:#221145; --input-bg:#ffffff; --placeholder:#8b84a8; --btn:#6d3fe0; --btn-text:#ffffff; /* ---- Identité OFA Web ------------------------------------------------- Ces trois-là ne sont PAS pilotables : elles portent la marque, pas le thème du client. Le violet clair sert de partenaire de dégradé au bouton, le rose ponctue (étiquettes, filets), et les deux encres composent les aplats sombres — barre de prix, en-têtes — qui donnent à l'écran son point d'ancrage. C'est ce contraste franc entre un fond très clair et une masse sombre saturée qui fait qu'une interface paraît d'aujourd'hui : sans lui, tout flotte au même niveau, quelle que soit la finesse du reste. */ --marque-violet:#6d3fe0; --marque-violet-clair:#8b5cf6; --marque-rose:#fb7aff; --marque-encre:#221145; --marque-prune:#3b0f4f; /* ---- Couleurs dérivées ------------------------------------------------- */ --accent: var(--btn); --accent-contrast: var(--btn-text); --accent-08: color-mix(in oklab, var(--accent) 8%, transparent); --accent-14: color-mix(in oklab, var(--accent) 14%, transparent); --accent-24: color-mix(in oklab, var(--accent) 24%, transparent); --accent-40: color-mix(in oklab, var(--accent) 40%, transparent); --accent-strong: color-mix(in oklab, var(--accent) 86%, var(--text)); --accent-soft-bg: color-mix(in oklab, var(--accent) 10%, var(--card)); /* Texte secondaire : toujours lisible, quel que soit le thème */ --muted: color-mix(in oklab, var(--text) 58%, var(--card)); --muted-strong: color-mix(in oklab, var(--text) 74%, var(--card)); /* 58 % : en dessous, les indications et unités sous les champs tombaient à 2,4:1, sous le seuil WCAG AA. La conformité RGAA est un argument de vente : ces textes sont informatifs, pas décoratifs. */ --faint: color-mix(in oklab, var(--text) 58%, var(--card)); /* Surfaces : légères variations autour de --card */ --surface: var(--card); --surface-raised: color-mix(in oklab, var(--text) 3%, var(--card)); --surface-sunken: color-mix(in oklab, var(--text) 6%, var(--card)); --surface-hover: color-mix(in oklab, var(--text) 8%, var(--card)); /* Les bords se dérivent du TEXTE, plus de --border. -------------------------------------------------------------------- Ils en dérivaient, et --border-soft DILUAIT encore cette teinte à 55 %. Sur la palette d'origine, le résultat tombait à 1,15:1 sur la carte : mesuré, pas ressenti. Aucune boîte n'avait de contour, aucun champ ne se détachait de la carte, aucune carte ne se détachait de la page — tout l'écran devenait un seul aplat, ce qui donne cette impression de design fatigué qu'aucune décoration ne rattrape. La cause est structurelle : le client choisit une TEINTE dans le panneau, pas un contraste. Lui laisser fixer la force du contour, c'est lui laisser faire disparaître les contours de son propre formulaire sans le savoir. On prend donc la force du texte — qui, lui, est forcément lisible sur la carte — et la teinte suit naturellement, --text étant déjà coloré par le thème. 18 % donne 1,47:1 : un bord qui existe sans cerner. 34 % donne 2,2:1 : de quoi marquer un survol ou un champ actif. */ --border-soft: color-mix(in oklab, var(--text) 18%, var(--card)); --border-strong: color-mix(in oklab, var(--text) 34%, var(--card)); /* ---- Couleurs sémantiques --------------------------------------------- */ --ok:#16a34a; --ok-bg: color-mix(in oklab, #16a34a 12%, var(--card)); --warn:#f59e0b; --warn-bg: color-mix(in oklab, #f59e0b 14%, var(--card)); --danger:#ef4444; --danger-bg: color-mix(in oklab, #ef4444 12%, var(--card)); --premium:#f5b301; --premium-ink:#1a1400; /* ---- Typographie (pilotée par l'admin) --------------------------------- */ --font-body-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body-size: 16px; --font-title-family: var(--font-body-family); --font-title-size: 18px; --font-btn-family: var(--font-body-family); --font-btn-size: 14px; /* Échelle typographique fluide (indépendante des réglages admin) */ --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: clamp(1.25rem, 1rem + 1vw, 1.6rem); --fs-display: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); /* ---- Espacements ------------------------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; /* ---- Rayons ------------------------------------------------------------ Élargis : des angles plus francs allègent une interface qui empile beaucoup de cadres (carte > panneau > champ > pastille). */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; /* ---- Ombres ------------------------------------------------------------ */ /* Plus larges et plus douces : l'ombre porte la séparation, la bordure n'a plus à la marquer aussi fort. */ --shadow-xs: 0 1px 3px color-mix(in oklab, var(--text) 9%, transparent); --shadow-sm: 0 10px 30px -6px color-mix(in oklab, var(--text) 16%, transparent); --shadow-md: 0 16px 44px -12px color-mix(in oklab, var(--text) 22%, transparent); --shadow-lg: 0 32px 80px -24px color-mix(in oklab, var(--text) 26%, transparent); --shadow-glow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); --shadow-pop: 0 10px 24px -6px color-mix(in oklab, var(--accent) 42%, transparent); /* ---- Dégradés ---------------------------------------------------------- Le dégradé du bouton part de l'accent du client, éclairci de son propre côté : un déménageur en turquoise obtient un dégradé turquoise, pas le violet d'OFA Web. La marque habille le module, elle ne s'impose pas dans le formulaire d'un client. */ --degrade-accent: linear-gradient(135deg, color-mix(in oklab, var(--accent) 88%, white) 0%, var(--accent) 100%); /* 88 %, et pas moins : le texte blanc doit tenir 4,5:1 sur le point le PLUS CLAIR du dégradé, pas seulement sur sa fin. Mesuré sur #6d3fe0 : 72 % de l'accent tombe à 3,34:1 — un bouton principal illisible pour qui lit mal. 88 % donne 4,7:1 en gardant un dégradé perceptible. */ /* L'aplat sombre suit l'ENCRE du client, pas la marque : un déménageur en turquoise obtient un bleu-nuit turquoise, pas le prune d'OFA Web. Avec la palette d'origine, le calcul retombe très près du #221145 → #3b0f4f de la maquette — la marque sert de valeur par défaut, jamais d'imposition. */ --degrade-sombre: linear-gradient(160deg, color-mix(in oklab, var(--text) 94%, black) 0%, color-mix(in oklab, var(--text) 58%, var(--accent)) 100%); --sur-sombre:#ffffff; --sur-sombre-doux: color-mix(in oklab, white 76%, var(--accent)); /* ---- Courbes d'animation ----------------------------------------------- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); /* rebond satisfaisant */ --ease-smooth: cubic-bezier(.4,0,.2,1); /* Raccourcies : une interface réactive paraît plus moderne qu'une interface qui traîne. Au-delà de ~200 ms, une réponse à un clic se ressent. */ --dur-fast: 110ms; --dur-med: 210ms; --dur-slow: 420ms; /* ---- Layout ------------------------------------------------------------ */ --shell-max: 1240px; --rail-w: 320px; /* ---- Icônes utilisées en masque CSS (pseudo-éléments) ------------------ Le reste des icônes est rendu en SVG inline par partials/icons.php ; ces deux-là servent dans des ::before, où l'on ne peut pas insérer de balise. Tracés Lucide (ISC). */ --icon-map-pin: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E'); --icon-alert: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E'); } /* Le mode embed est plus compact : pas de chrome applicatif */ body.embed{ --shell-max: 1100px; } /* Respect des préférences système : on coupe tout mouvement superflu */ @media (prefers-reduced-motion: reduce){ :root{ --dur-fast:0ms; --dur-med:0ms; --dur-slow:0ms; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }