/* * Design system Pimp Motion (refonte graphique, Phase 13). * Inspiration : epure/minimal (site figma.com) - beaucoup d'espace, un seul accent, pas de * fioritures. Theme clair par defaut, theme sombre via [data-bs-theme="dark"] (voir theme.js, * qui pose cet attribut sur avant le premier paint pour eviter le flash). * * Deux teintes d'accent, pas une seule, pour rester accessible : * - --pm-accent-bright : usage decoratif (logo, focus ring, fond de bouton) ou le contraste * texte n'entre pas en jeu directement. * - --pm-accent : usage texte (liens, .text-primary) - contraste ~4.7:1 sur le fond de page, * contre ~3.2:1 pour le vif seul (echoue WCAG AA texte normal). Chaque theme a sa propre * valeur car un accent lisible sur fond clair ne l'est pas forcement sur fond sombre. * Le texte pose sur --pm-accent-bright (boutons pleins, ex. .btn-primary) utilise toujours * --pm-accent-ink, une encre sombre fixe (pas --pm-ink, qui elle s'inverse selon le theme). */ :root, [data-bs-theme="light"] { --pm-ink: #111110; --pm-paper: #faf9f6; --pm-surface: #ffffff; --pm-muted: #726c62; --pm-border: rgba(17, 17, 16, 0.12); --pm-accent: #d93b1f; --pm-accent-bright: #ff4d2e; --pm-accent-ink: #17140f; --pm-accent-rgb: 217, 59, 31; --pm-paper-rgb: 250, 249, 246; color-scheme: light; --bs-body-bg: var(--pm-paper); --bs-body-color: var(--pm-ink); --bs-border-color: var(--pm-border); --bs-border-color-translucent: var(--pm-border); --bs-link-color: var(--pm-accent); --bs-link-hover-color: var(--pm-accent-bright); --bs-secondary-color: var(--pm-muted); --bs-emphasis-color: var(--pm-ink); --bs-tertiary-bg: #f1efe9; --bs-secondary-bg: #ece9e2; --bs-primary: var(--pm-accent); --bs-primary-rgb: var(--pm-accent-rgb); --bs-nav-pills-link-active-bg: var(--pm-accent-bright); --bs-nav-pills-link-active-color: var(--pm-accent-ink); } [data-bs-theme="dark"] { --pm-ink: #f5f2ec; --pm-paper: #0b0b0a; --pm-surface: #171614; --pm-muted: #9a9184; --pm-border: rgba(245, 242, 236, 0.14); --pm-accent: #ff6a45; --pm-accent-bright: #ff4d2e; --pm-accent-ink: #17140f; --pm-accent-rgb: 255, 106, 69; --pm-paper-rgb: 11, 11, 10; color-scheme: dark; --bs-body-bg: var(--pm-paper); --bs-body-color: var(--pm-ink); --bs-border-color: var(--pm-border); --bs-border-color-translucent: var(--pm-border); --bs-link-color: var(--pm-accent); --bs-link-hover-color: var(--pm-accent-bright); --bs-secondary-color: var(--pm-muted); --bs-emphasis-color: var(--pm-ink); --bs-tertiary-bg: #1f1d1a; --bs-secondary-bg: #232019; --bs-primary: var(--pm-accent); --bs-primary-rgb: var(--pm-accent-rgb); --bs-nav-pills-link-active-bg: var(--pm-accent-bright); --bs-nav-pills-link-active-color: var(--pm-accent-ink); } /* Typographie */ :root { --pm-font-display: "Bricolage Grotesque", "Segoe UI", sans-serif; --pm-font-body: "Inter", "Segoe UI", sans-serif; --pm-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; } body { font-family: var(--pm-font-body); } h1, h2, h3, h4, h5, h6, .pm-display { font-family: var(--pm-font-display); letter-spacing: -0.01em; } code, .pm-mono { font-family: var(--pm-font-mono); } /* Composants Bootstrap non pilotes par --bs-primary (couleurs codees en dur dans le CSS compile) : reecrits explicitement au lieu de recompiler tout Bootstrap depuis les sources Sass, hors de portee sans tooling Node sur cette machine. */ .btn-primary { --bs-btn-color: var(--pm-accent-ink); --bs-btn-bg: var(--pm-accent-bright); --bs-btn-border-color: var(--pm-accent-bright); --bs-btn-hover-color: var(--pm-accent-ink); --bs-btn-hover-bg: var(--pm-accent); --bs-btn-hover-border-color: var(--pm-accent); --bs-btn-active-color: var(--pm-accent-ink); --bs-btn-active-bg: var(--pm-accent); --bs-btn-active-border-color: var(--pm-accent); --bs-btn-disabled-color: var(--pm-accent-ink); --bs-btn-disabled-bg: var(--pm-accent-bright); --bs-btn-disabled-border-color: var(--pm-accent-bright); } .btn-outline-primary { --bs-btn-color: var(--pm-accent); --bs-btn-border-color: var(--pm-accent); --bs-btn-hover-color: var(--pm-accent-ink); --bs-btn-hover-bg: var(--pm-accent-bright); --bs-btn-hover-border-color: var(--pm-accent-bright); --bs-btn-active-color: var(--pm-accent-ink); --bs-btn-active-bg: var(--pm-accent-bright); --bs-btn-active-border-color: var(--pm-accent-bright); } .form-check-input:checked { background-color: var(--pm-accent); border-color: var(--pm-accent); } .form-check-input:focus, .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--pm-accent-bright); box-shadow: 0 0 0 0.2rem rgba(var(--pm-accent-rgb), 0.35); } /* Règle générale : pas de halo (box-shadow/outline) sur les boutons au clic souris ou une fois actifs — seul le focus clavier (:focus-visible, ciblé juste au-dessus) garde un anneau visible, pour ne pas casser l'accessibilité au clavier. */ .btn:focus:not(:focus-visible), .btn:active:not(:focus-visible), .navbar-toggler:focus:not(:focus-visible), .pm-theme-toggle:focus:not(:focus-visible) { box-shadow: none; outline: none; } /* Chrome applicatif */ .navbar { background-color: var(--pm-paper); border-bottom: 1px solid var(--pm-border); transition: background-color 0.25s ease, box-shadow 0.25s ease; } /* Effet de transparence au scroll (voir site.js) : fond translucide + flou derriere le contenu qui defile sous la top bar, une fois qu'on a quitte le tout-haut de page. */ .navbar.pm-navbar--scrolled { background-color: rgba(var(--pm-paper-rgb), 0.72); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 1px 0 var(--pm-border); } .navbar .nav-link { color: var(--pm-ink); } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--pm-accent); } .footer { border-top: 1px solid var(--pm-border); color: var(--pm-muted); } /* Bascule clair/sombre (voir theme.js) */ .pm-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--pm-border); border-radius: 999px; background: transparent; color: var(--pm-ink); cursor: pointer; } .pm-theme-toggle:hover { border-color: var(--pm-accent); color: var(--pm-accent); } .pm-theme-toggle svg { width: 1.1rem; height: 1.1rem; } [data-bs-theme="dark"] .pm-theme-toggle .pm-icon-sun, [data-bs-theme="light"] .pm-theme-toggle .pm-icon-moon { display: none; } /* Sélecteur de langue (voir Pages/Shared/_LanguageSwitcher.cshtml) */ .pm-lang-switcher { display: inline-flex; } .pm-lang-select { font-family: var(--pm-font-body); font-size: 0.85rem; color: var(--pm-ink); background: transparent; border: 1px solid var(--pm-border); border-radius: 999px; padding: 0.3rem 1.75rem 0.3rem 0.75rem; cursor: pointer; } .pm-lang-select:hover { border-color: var(--pm-accent); } /* Logo (voir Pages/Shared/_Logo.cshtml) */ .pm-logo { height: 1.75rem; width: auto; display: block; } /* Formulaire de génération (voir Pages/Generate.cshtml) */ .pm-prompt-textarea { min-height: 9rem; resize: vertical; } .pm-prompt-history { max-width: 420px; } .pm-prompt-history .dropdown-item { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; line-height: 1.35; } .pm-prompt-history li + li { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--pm-border); } .form-range { accent-color: var(--pm-accent-bright); }