spb/trouve-ka Public

1/**2 * Trouve-KA — styles globaux (système « éditorial sharp » de Groupe KA)3 * Author: Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 *6 * Typo display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono7 * Signature : bordures encre + ombres décalées (néo-brutalisme raffiné)8 * Accent bleu pâle marine #b9cfee sur encre9 */1011@tailwind base;12@tailwind components;13@tailwind utilities;1415:root {16  --paper: #f5f3ee;17  --surface: #ffffff;18  --surface-2: #faf9f5;19  --ink: #141814;20  --ink-2: #4d5551;21  --ink-3: #8b928c;22  --line: rgba(20, 24, 20, 0.14);23  --line-strong: rgba(20, 24, 20, 0.85);24  --green: #1c5c41;25  --green-deep: #123f2e;26  --lime: #b9cfee;27  --lime-soft: #e6eef9;28  --amber: #e8a33d;29  --amber-soft: #fdf3e2;30  --danger: #b3423a;31  --danger-soft: #fbe9e7;3233  --r-card: 10px;34  --r-ctl: 6px;35  --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);36  --shadow-off: 6px 6px 0 var(--ink);37  --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);3839  --font-display: var(--font-space-grotesk), system-ui, sans-serif;40  --font-body: var(--font-inter), system-ui, sans-serif;41  --font-mono: var(--font-jetbrains), ui-monospace, monospace;42}4344@layer base {45  html {46    -webkit-text-size-adjust: 100%;47    scroll-behavior: smooth;48  }4950  body {51    background: var(--paper);52    color: var(--ink);53    font-family: var(--font-body);54    font-size: 15px;55    line-height: 1.55;56    -webkit-font-smoothing: antialiased;57  }5859  /* Grain de film pleine page — jamais de z-index sur body > * (position:60     relative seulement) pour ne pas casser les utilitaires z-* de Tailwind. */61  body::before {62    content: "";63    position: fixed;64    inset: 0;65    pointer-events: none;66    opacity: 0.35;67    z-index: 9999;68    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");69  }70  body > * {71    position: relative;72  }7374  h1,75  h2,76  h3,77  h4 {78    font-family: var(--font-display);79    letter-spacing: -0.03em;80  }8182  ::selection {83    background: var(--lime);84    color: var(--ink);85  }8687  :focus-visible {88    outline: 2px solid var(--green);89    outline-offset: 2px;90  }91}9293@layer components {94  /* ---------- Micro-typographie ---------- */9596  .kicker {97    display: inline-flex;98    align-items: center;99    gap: 10px;100    font-family: var(--font-mono);101    font-size: 11.5px;102    font-weight: 500;103    text-transform: uppercase;104    letter-spacing: 0.12em;105    color: var(--green);106  }107  .kicker::before {108    content: "";109    width: 22px;110    height: 2px;111    background: var(--green);112  }113114  .klabel {115    font-family: var(--font-mono);116    font-size: 10px;117    font-weight: 700;118    text-transform: uppercase;119    letter-spacing: 0.1em;120    color: var(--ink-3);121  }122123  .gk-display {124    font-family: var(--font-display);125  }126  .gk-mono {127    font-family: var(--font-mono);128  }129130  /* Traitements de titre signature */131  .outline-txt {132    color: transparent;133    -webkit-text-stroke: 2px var(--ink);134  }135  .hl {136    display: inline-block;137    background: var(--lime);138    border-radius: 8px;139    padding: 0 10px 2px;140    transform: rotate(-1deg);141  }142143  /* ---------- Cartes ---------- */144145  .gk-card {146    background: var(--surface);147    border: 1.5px solid var(--ink);148    border-radius: var(--r-card);149    box-shadow: var(--shadow-off-soft);150  }151  .gk-card-hover {152    transition:153      transform 0.18s ease,154      box-shadow 0.18s ease;155  }156  .gk-card-hover:hover {157    transform: translate(-3px, -3px);158    box-shadow: var(--shadow-off);159  }160161  /* ---------- Boutons ---------- */162163  .btn {164    display: inline-flex;165    align-items: center;166    justify-content: center;167    gap: 8px;168    min-height: 44px;169    padding: 10px 20px;170    border: 1.5px solid var(--ink);171    border-radius: var(--r-ctl);172    font-family: var(--font-display);173    font-size: 14px;174    font-weight: 700;175    cursor: pointer;176    text-decoration: none;177    transition:178      background 0.15s ease,179      transform 0.1s ease,180      box-shadow 0.1s ease;181  }182  .btn:active {183    transform: translate(2px, 2px);184    box-shadow: none !important;185  }186  .btn-primary {187    background: var(--ink);188    color: var(--lime);189    box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.25);190  }191  .btn-primary:hover {192    background: var(--green-deep);193  }194  .btn-ghost {195    background: transparent;196    color: var(--ink);197  }198  .btn-ghost:hover {199    background: var(--lime);200  }201  .btn-lime {202    background: var(--lime);203    color: var(--ink);204    box-shadow: 4px 4px 0 rgba(185, 207, 238, 0.25);205  }206  .btn-lime:hover {207    background: var(--lime-soft);208  }209210  /* ---------- Champs de formulaire ---------- */211212  .field {213    display: block;214    width: 100%;215    padding: 11px 14px;216    background: var(--surface);217    border: 1.5px solid var(--ink);218    border-radius: var(--r-ctl);219    font-family: var(--font-body);220    font-size: 14px;221    color: var(--ink);222    box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08);223    transition: box-shadow 0.15s ease;224  }225  .field::placeholder {226    color: var(--ink-3);227  }228  .field:focus {229    outline: 2px solid var(--green);230    outline-offset: 1px;231    box-shadow: 3px 3px 0 rgba(28, 92, 65, 0.25);232  }233234  /* ---------- Pilules de stats ---------- */235236  .stat-chip {237    display: inline-flex;238    align-items: center;239    gap: 8px;240    white-space: nowrap;241    padding: 8px 14px;242    background: var(--surface);243    border: 1.5px solid var(--ink);244    border-radius: 999px;245    font-family: var(--font-mono);246    font-size: 12px;247    font-weight: 700;248    box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12);249  }250251  .pulse-dot {252    position: relative;253    width: 8px;254    height: 8px;255    border-radius: 999px;256    background: var(--green);257    flex: none;258  }259  .pulse-dot::after {260    content: "";261    position: absolute;262    inset: -4px;263    border-radius: 999px;264    border: 2px solid var(--lime);265    animation: pulse 2.4s ease-out infinite;266  }267268  /* ---------- Tableau éditorial ---------- */269270  .src-wrap {271    border: 1.5px solid var(--ink);272    border-radius: var(--r-card);273    box-shadow: var(--shadow-off-soft);274    overflow-x: auto;275    background: var(--surface);276  }277  .src-table {278    width: 100%;279    border-collapse: collapse;280    font-size: 13.5px;281  }282  .src-table th {283    font-family: var(--font-mono);284    font-size: 10px;285    font-weight: 700;286    text-transform: uppercase;287    letter-spacing: 0.1em;288    text-align: left;289    color: var(--ink-3);290    background: var(--surface-2);291    padding: 10px 14px;292    border-bottom: 1.5px solid var(--ink);293  }294  .src-table td {295    padding: 12px 14px;296    border-bottom: 1px solid var(--line);297    vertical-align: top;298  }299  .src-table tr:last-child td {300    border-bottom: none;301  }302  .src-table tbody tr:hover {303    background: var(--surface-2);304  }305306  /* ---------- Animations d'entrée ---------- */307308  .rise {309    opacity: 0;310    animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;311  }312}313314@keyframes pulse {315  0% {316    transform: scale(0.5);317    opacity: 1;318  }319  70%,320  100% {321    transform: scale(1.4);322    opacity: 0;323  }324}325326@keyframes rise {327  from {328    opacity: 0;329    transform: translateY(12px);330  }331  to {332    opacity: 1;333    transform: translateY(0);334  }335}336337/* ---------- Accessibilité ---------- */338339@media (prefers-reduced-motion: reduce) {340  .pulse-dot::after {341    animation: none;342  }343  .rise {344    animation: none;345    opacity: 1;346  }347  *,348  *::before,349  *::after {350    transition-duration: 0.01ms !important;351    animation-duration: 0.01ms !important;352  }353  html {354    scroll-behavior: auto;355  }356}357