/* * 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: #c2185b; --pm-accent-bright: #ff2e8f; --pm-accent-ink: #17140f; --pm-accent-rgb: 194, 24, 91; --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: #ff6bad; --pm-accent-bright: #ff2e8f; --pm-accent-ink: #17140f; --pm-accent-rgb: 255, 107, 173; --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; --pm-font-logo: "Titan One", "Bricolage Grotesque", "Segoe UI", sans-serif; } 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; } /* Échelle compacte alignée sur siray.ai (16px de base, comme ici, mais titres fixes plutôt que fluides et composants ~14px) — les tailles par défaut de Bootstrap grossissent avec la largeur d'écran (calc(...+vw)) et donnent des titres disproportionnés sur grand écran. Encore resserrée (Phase 16) : Seb a trouvé la Phase 15 encore trop grande — un cran de plus partout (texte courant compris, via body) plutôt que sur les seuls titres. */ body { font-size: 0.9375rem; } h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.3rem; } h3, .h3 { font-size: 1.125rem; } h4, .h4 { font-size: 1rem; } h5, .h5 { font-size: 0.9375rem; } h6, .h6 { font-size: 0.8125rem; } :root { --bs-btn-font-size: 0.8125rem; } .form-control, .form-select, .form-label, .form-check-label { font-size: 0.8125rem; } code, .pm-mono { font-family: var(--pm-font-mono); } /* Liens : pas de soulignement (identifiables par la couleur accent seule, cohérent avec le design épuré) — sauf ceux qui portent déjà une classe Bootstrap dédiée (.btn, .nav-link, .dropdown-item...), qui gèrent leur propre décoration. */ a { text-decoration: none; } a:hover { text-decoration: none; } /* 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); } /* Chrome Android a un bug de compositing connu ou position:sticky se detache au scroll des qu'un backdrop-filter est applique dynamiquement sur l'element sticky lui-meme (Seb, rapporte 2026-09-05 : la top bar reste fixe sur laptop mais pas sur mobile Chrome). Purement decoratif, donc on le desactive sous le breakpoint sm et on retombe sur un fond plus opaque à la place. */ @media (max-width: 575.98px) { .navbar.pm-navbar--scrolled { background-color: var(--pm-paper); backdrop-filter: none; -webkit-backdrop-filter: none; } } .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); padding-bottom: env(safe-area-inset-bottom, 0); } /* Liens du footer volontairement discrets (Seb, 2026-09-05) : une teinte proche du fond plutot que la couleur de lien habituelle (--pm-accent), pour qu'ils se fondent presque dans la page tant qu'on ne les survole pas. */ .footer a { color: color-mix(in srgb, var(--pm-paper) 55%, var(--pm-ink) 45%); text-decoration: none; } .footer a:hover { color: var(--pm-ink); text-decoration: underline; } /* Marge de respiration supplémentaire en bas des formulaires sur mobile portrait — évite qu'un bouton de soumission en fin de page (ex. "Lancer la génération") ne se retrouve collé au footer ou recouvert par la barre d'outils de certains navigateurs mobiles. */ @media (max-width: 767.98px) { main { padding-bottom: 2rem; } } /* 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; } /* Bouton profil (voir Pages/Shared/_Layout.cshtml) — regroupe email + solde + déconnexion, remplace les deux
  • distincts de la Phase 15 (Seb : trop de place prise dans la top bar). */ .pm-avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--pm-border); border-radius: 999px; background: transparent; color: var(--pm-ink); cursor: pointer; } .pm-avatar-btn:hover { border-color: var(--pm-accent); color: var(--pm-accent); } .pm-avatar-btn svg { width: 1.2rem; height: 1.2rem; } /* Masque le caret par défaut de Bootstrap (.dropdown-toggle::after) pour garder l'icône seule. */ .pm-avatar-btn.dropdown-toggle::after { display: none; } .pm-avatar-menu { min-width: 14rem; } /* Sélecteur de langue (voir Pages/Shared/_LanguageSwitcher.cshtml) — meme gabarit rond que .pm-theme-toggle/.pm-avatar-btn juste a cote dans la top bar, pour un alignement visuel coherent. Un dropdown Bootstrap (pas un ne peut pas avoir un rendu different ferme/ouvert pour la meme