spb/groupe-ka Public

1/*2 * Auteur : Simon-Pierre Boucher — contact@spboucher.ai3 *4 * Groupe KA — système de design « éditorial sharp »5 * (identité partagée avec Lou-Ka, Vrai-Prix et ValoPlex)6 * Typo display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono7 * Signature : bordures encre + ombres décalées (néo-brutalisme raffiné)8 * Accent électrique lime #d9f26b sur encre verte profonde9 */1011@import "tailwindcss";1213:root {14  --paper: #f5f3ee;15  --surface: #ffffff;16  --surface-2: #faf9f5;17  --ink: #141814;18  --ink-2: #4d5551;19  --ink-3: #8b928c;20  --line: rgba(20, 24, 20, 0.14);21  --line-strong: rgba(20, 24, 20, 0.85);22  --green: #1c5c41;23  --green-deep: #123f2e;24  --lime: #d9f26b;25  --lime-soft: #f0f9d2;26  --amber: #e8a33d;27  --amber-soft: #fdf3e2;28  --danger: #b3423a;29  --danger-soft: #fbe9e7;3031  --r-card: 10px;32  --r-ctl: 6px;33  --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05);34  --shadow-off: 6px 6px 0 var(--ink);35  --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08);36}3738@theme inline {39  --color-paper: var(--paper);40  --color-surface: var(--surface);41  --color-surface-2: var(--surface-2);42  --color-ink: var(--ink);43  --color-ink-2: var(--ink-2);44  --color-ink-3: var(--ink-3);45  --color-green: var(--green);46  --color-green-deep: var(--green-deep);47  --color-lime: var(--lime);48  --color-lime-soft: var(--lime-soft);49  --color-amber: var(--amber);50  --color-amber-soft: var(--amber-soft);51  --color-danger: var(--danger);52  --font-display: var(--font-space-grotesk), system-ui, sans-serif;53  --font-body: var(--font-inter), system-ui, sans-serif;54  --font-mono: var(--font-jetbrains), ui-monospace, monospace;55}5657html {58  scroll-behavior: smooth;59}6061body {62  background: var(--paper);63  color: var(--ink);64  font-family: var(--font-body);65  font-size: 15px;66  line-height: 1.55;67  -webkit-font-smoothing: antialiased;68}6970/* Grain de film pleine page — jamais de z-index sur body > * (position: relative71   seulement) pour ne pas casser les utilitaires z-* de Tailwind. */72body::before {73  content: "";74  position: fixed;75  inset: 0;76  pointer-events: none;77  opacity: 0.35;78  z-index: 9999;79  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");80}81body > * {82  position: relative;83}8485h1,86h2,87h3,88h4 {89  font-family: var(--font-display);90  letter-spacing: -0.03em;91}9293::selection {94  background: var(--lime);95  color: var(--ink);96}9798:focus-visible {99  outline: 2px solid var(--green);100  outline-offset: 2px;101}102103/* ---------- Micro-typographie ---------- */104105.kicker {106  display: inline-flex;107  align-items: center;108  gap: 10px;109  font-family: var(--font-mono);110  font-size: 11.5px;111  font-weight: 500;112  text-transform: uppercase;113  letter-spacing: 0.12em;114  color: var(--green);115}116.kicker::before {117  content: "";118  width: 22px;119  height: 2px;120  background: var(--green);121}122123.klabel {124  font-family: var(--font-mono);125  font-size: 10px;126  font-weight: 700;127  text-transform: uppercase;128  letter-spacing: 0.1em;129  color: var(--ink-3);130}131132.gk-display {133  font-family: var(--font-display);134}135.gk-mono {136  font-family: var(--font-mono);137}138139/* Traitements de titre signature */140.outline-txt {141  color: transparent;142  -webkit-text-stroke: 2px var(--ink);143}144.hl {145  display: inline-block;146  background: var(--lime);147  border-radius: 8px;148  padding: 0 10px 2px;149  transform: rotate(-1deg);150}151152/* ---------- Cartes ---------- */153154.gk-card {155  background: var(--surface);156  border: 1.5px solid var(--ink);157  border-radius: var(--r-card);158  box-shadow: var(--shadow-off-soft);159}160.gk-card-hover {161  transition:162    transform 0.18s ease,163    box-shadow 0.18s ease;164}165.gk-card-hover:hover {166  transform: translate(-3px, -3px);167  box-shadow: var(--shadow-off);168}169170/* ---------- Boutons ---------- */171172.btn {173  display: inline-flex;174  align-items: center;175  justify-content: center;176  gap: 8px;177  min-height: 44px;178  padding: 10px 20px;179  border: 1.5px solid var(--ink);180  border-radius: var(--r-ctl);181  font-family: var(--font-display);182  font-size: 14px;183  font-weight: 700;184  cursor: pointer;185  text-decoration: none;186  transition:187    background 0.15s ease,188    transform 0.1s ease,189    box-shadow 0.1s ease;190}191.btn:active {192  transform: translate(2px, 2px);193  box-shadow: none !important;194}195.btn-primary {196  background: var(--ink);197  color: var(--lime);198  box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.25);199}200.btn-primary:hover {201  background: var(--green-deep);202}203.btn-ghost {204  background: transparent;205  color: var(--ink);206}207.btn-ghost:hover {208  background: var(--lime);209}210.btn-lime {211  background: var(--lime);212  color: var(--ink);213  box-shadow: 4px 4px 0 rgba(217, 242, 107, 0.25);214}215.btn-lime:hover {216  background: var(--lime-soft);217}218219/* Boutons OAuth (connexion) — couleurs officielles des marques,220   mais bordure encre + ombre dure pour rester dans le langage du site. */221.btn-google {222  background: #ffffff;223  color: #1f1f1f;224  box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.25);225}226.btn-google:hover {227  background: #f4f4f1;228}229.btn-apple {230  background: #000000;231  color: #ffffff;232  box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.25);233}234.btn-apple:hover {235  background: #1d1d1f;236}237238/* ---------- Champs de formulaire (KA ID) ---------- */239240.field {241  display: block;242  width: 100%;243  padding: 11px 14px;244  background: var(--surface);245  border: 1.5px solid var(--ink);246  border-radius: var(--r-ctl);247  font-family: var(--font-body);248  font-size: 14px;249  color: var(--ink);250  box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08);251  transition: box-shadow 0.15s ease;252}253.field::placeholder {254  color: var(--ink-3);255}256.field:focus {257  outline: 2px solid var(--green);258  outline-offset: 1px;259  box-shadow: 3px 3px 0 rgba(28, 92, 65, 0.25);260}261262/* ---------- Carte de membre Groupe KA (même gabarit que Lou·Ka) ---------- */263264.mc {265  position: relative;266  max-width: 520px;267  overflow: hidden;268  margin-top: 28px;269  background: var(--ink);270  color: var(--paper);271  border: 2px solid var(--ink);272  border-radius: 16px;273  padding: 24px 26px 0;274  box-shadow: 10px 10px 0 rgba(20, 24, 20, 0.18);275}276.mc-watermark {277  position: absolute;278  right: -18px;279  top: -34px;280  pointer-events: none;281  font-family: var(--font-display);282  font-weight: 700;283  font-size: 170px;284  letter-spacing: -0.06em;285  color: rgba(217, 242, 107, 0.07);286  transform: rotate(-8deg);287  line-height: 1;288}289.mc-head {290  display: flex;291  align-items: baseline;292  justify-content: space-between;293  gap: 12px;294  flex-wrap: wrap;295}296.mc-brand {297  font-family: var(--font-display);298  font-weight: 700;299  font-size: 24px;300  letter-spacing: -0.04em;301}302.mc-ka {303  background: var(--lime);304  color: var(--ink);305  padding: 1px 6px 3px;306  border-radius: 5px;307  margin-left: 3px;308  display: inline-block;309  transform: rotate(-2deg);310}311.mc-label {312  font-family: var(--font-mono);313  font-size: 10px;314  text-transform: uppercase;315  letter-spacing: 0.16em;316  color: rgba(245, 243, 238, 0.55);317}318.mc-id-row {319  margin: 26px 0 22px;320  display: flex;321  align-items: center;322  justify-content: space-between;323  gap: 16px;324}325.mc-id-block {326  display: flex;327  flex-direction: column;328  gap: 4px;329  min-width: 0;330}331.mc-qr {332  width: 78px;333  height: 78px;334  flex: none;335  border-radius: 10px;336  border: 2px solid var(--lime);337  background: #ffffff;338  padding: 5px;339}340.mc-id-label {341  font-family: var(--font-mono);342  font-size: 10px;343  text-transform: uppercase;344  letter-spacing: 0.2em;345  color: rgba(217, 242, 107, 0.65);346}347.mc-id {348  font-family: var(--font-mono);349  font-weight: 700;350  color: var(--lime);351  font-size: clamp(22px, 6vw, 34px);352  letter-spacing: 0.14em;353  text-shadow: 0 0 24px rgba(217, 242, 107, 0.35);354}355.mc-foot {356  display: flex;357  align-items: flex-end;358  justify-content: space-between;359  gap: 14px;360  padding-bottom: 18px;361}362.mc-holder {363  display: flex;364  flex-direction: column;365  gap: 2px;366  min-width: 0;367}368.mc-holder-name {369  font-weight: 600;370  font-size: 15px;371  overflow: hidden;372  text-overflow: ellipsis;373  white-space: nowrap;374}375.mc-holder-role {376  display: inline-block;377  align-self: flex-start;378  margin: 3px 0 2px;379  padding: 2px 8px 3px;380  border-radius: 5px;381  background: var(--lime);382  color: var(--ink);383  font-family: var(--font-mono);384  font-size: 9.5px;385  font-weight: 700;386  letter-spacing: 0.12em;387  transform: rotate(-1deg);388}389.mc-holder-since {390  font-family: var(--font-mono);391  font-size: 10.5px;392  color: rgba(245, 243, 238, 0.5);393  letter-spacing: 0.06em;394}395.mc-avatar {396  width: 52px;397  height: 52px;398  border-radius: 999px;399  border: 2px solid var(--lime);400  flex: none;401  object-fit: cover;402}403.mc-avatar-empty {404  display: flex;405  align-items: center;406  justify-content: center;407  background: var(--lime);408  color: var(--ink);409  font-family: var(--font-display);410  font-weight: 700;411  font-size: 22px;412}413.mc-strip {414  display: flex;415  gap: 5px;416  margin: 0 -26px;417  padding: 9px 18px;418  background: rgba(217, 242, 107, 0.1);419  border-top: 1px solid rgba(217, 242, 107, 0.25);420  overflow: hidden;421}422.mc-strip i {423  display: block;424  width: 3px;425  border-radius: 1px;426  background: var(--lime);427  opacity: 0.7;428}429.mc-strip i:nth-child(3n) {430  height: 14px;431  opacity: 0.35;432}433.mc-strip i:nth-child(3n + 1) {434  height: 9px;435}436.mc-strip i:nth-child(3n + 2) {437  height: 17px;438  opacity: 0.9;439}440441/* ---------- Carte physique imprimable (CR80 : 85,6 × 54 mm) ---------- */442443.pcard {444  position: relative;445  width: 85.6mm;446  height: 54mm;447  overflow: hidden;448  border-radius: 3.18mm; /* rayon normalisé ISO/IEC 7810 */449  outline: 0.3mm dashed rgba(20, 24, 20, 0.4); /* repère de découpe */450  outline-offset: 1mm;451  flex: none;452  -webkit-print-color-adjust: exact;453  print-color-adjust: exact;454}455.pcard-front {456  background: var(--ink);457  color: var(--paper);458  padding: 4.5mm 5mm;459  display: flex;460  flex-direction: column;461}462.pcard-watermark {463  position: absolute;464  right: -4mm;465  top: -8mm;466  pointer-events: none;467  font-family: var(--font-display);468  font-weight: 700;469  font-size: 34mm;470  letter-spacing: -0.06em;471  color: rgba(217, 242, 107, 0.08);472  transform: rotate(-8deg);473  line-height: 1;474}475.pcard-head {476  display: flex;477  align-items: baseline;478  justify-content: space-between;479  gap: 3mm;480}481.pcard-brand {482  font-family: var(--font-display);483  font-weight: 700;484  font-size: 5mm;485  letter-spacing: -0.03em;486}487.pcard-ka {488  display: inline-block;489  background: var(--lime);490  color: var(--ink);491  padding: 0 1.4mm 0.4mm;492  border-radius: 1.2mm;493  transform: rotate(-2deg);494}495.pcard-label {496  font-family: var(--font-mono);497  font-size: 1.9mm;498  letter-spacing: 0.16em;499  color: rgba(245, 243, 238, 0.55);500}501.pcard-id {502  margin-top: 5mm;503  display: flex;504  flex-direction: column;505  gap: 0.8mm;506}507.pcard-id-label {508  font-family: var(--font-mono);509  font-size: 1.9mm;510  letter-spacing: 0.2em;511  color: rgba(217, 242, 107, 0.65);512}513.pcard-id-value {514  font-family: var(--font-mono);515  font-weight: 700;516  font-size: 6.4mm;517  letter-spacing: 0.12em;518  color: var(--lime);519}520.pcard-foot {521  margin-top: auto;522  display: flex;523  align-items: flex-end;524  justify-content: space-between;525  gap: 3mm;526}527.pcard-holder {528  display: flex;529  flex-direction: column;530  gap: 0.7mm;531  min-width: 0;532}533.pcard-name {534  font-weight: 600;535  font-size: 3.4mm;536  white-space: nowrap;537  overflow: hidden;538  text-overflow: ellipsis;539}540.pcard-role {541  align-self: flex-start;542  padding: 0.4mm 1.6mm 0.6mm;543  border-radius: 1mm;544  background: var(--lime);545  color: var(--ink);546  font-family: var(--font-mono);547  font-weight: 700;548  font-size: 1.9mm;549  letter-spacing: 0.1em;550  transform: rotate(-1deg);551}552.pcard-since {553  font-family: var(--font-mono);554  font-size: 1.9mm;555  letter-spacing: 0.08em;556  color: rgba(245, 243, 238, 0.5);557}558.pcard-avatar {559  width: 11mm;560  height: 11mm;561  border-radius: 999px;562  border: 0.5mm solid var(--lime);563  object-fit: cover;564  flex: none;565}566.pcard-avatar-empty {567  display: flex;568  align-items: center;569  justify-content: center;570  background: var(--lime);571  color: var(--ink);572  font-family: var(--font-display);573  font-weight: 700;574  font-size: 5mm;575}576.pcard-back {577  background: #ffffff;578  border: 0.4mm solid var(--ink);579  display: flex;580  align-items: center;581  gap: 4mm;582  padding: 4.5mm 5mm;583}584.pcard-back-left {585  flex: none;586}587.pcard-qr {588  width: 30mm;589  height: 30mm;590  display: block;591}592.pcard-back-right {593  display: flex;594  flex-direction: column;595  gap: 1.6mm;596  min-width: 0;597}598.pcard-back-title {599  font-family: var(--font-display);600  font-weight: 700;601  font-size: 3.4mm;602  line-height: 1.15;603  text-transform: uppercase;604  letter-spacing: -0.01em;605}606.pcard-back-url {607  font-family: var(--font-mono);608  font-size: 2.2mm;609  color: var(--green);610  word-break: break-all;611}612.pcard-nfc {613  display: inline-flex;614  align-items: center;615  gap: 1.5mm;616  align-self: flex-start;617  padding: 1mm 2mm;618  border: 0.3mm dashed var(--ink);619  border-radius: 1.5mm;620  font-family: var(--font-mono);621  font-size: 1.9mm;622  letter-spacing: 0.06em;623  color: var(--ink-2);624}625.pcard-nfc-ico {626  font-weight: 700;627  color: var(--green);628  letter-spacing: -0.05em;629}630.pcard-back-foot {631  font-family: var(--font-mono);632  font-size: 1.7mm;633  line-height: 1.5;634  color: var(--ink-3);635}636637@media print {638  .no-print,639  header,640  .ticker,641  footer,642  body::before {643    display: none !important;644  }645  body {646    background: #ffffff;647  }648  .print-page {649    max-width: none;650    padding: 0;651  }652  .print-cards {653    margin: 0;654    gap: 10mm;655  }656  .pcard {657    box-shadow: none;658  }659  @page {660    margin: 12mm;661  }662}663664/* ---------- Pilules de stats ---------- */665666.stat-chip {667  display: inline-flex;668  align-items: center;669  gap: 8px;670  white-space: nowrap;671  padding: 8px 14px;672  background: var(--surface);673  border: 1.5px solid var(--ink);674  border-radius: 999px;675  font-family: var(--font-mono);676  font-size: 12px;677  font-weight: 700;678  box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12);679}680681.pulse-dot {682  position: relative;683  width: 8px;684  height: 8px;685  border-radius: 999px;686  background: var(--green);687  flex: none;688}689.pulse-dot::after {690  content: "";691  position: absolute;692  inset: -4px;693  border-radius: 999px;694  border: 2px solid var(--lime);695  animation: pulse 2.4s ease-out infinite;696}697@keyframes pulse {698  0% {699    transform: scale(0.5);700    opacity: 1;701  }702  70%,703  100% {704    transform: scale(1.4);705    opacity: 0;706  }707}708709/* ---------- Ticker ---------- */710711.ticker {712  overflow: hidden;713  background: var(--ink);714  border-bottom: 1.5px solid var(--ink);715}716.ticker-inner {717  display: inline-flex;718  white-space: nowrap;719  padding: 8px 0;720  font-family: var(--font-mono);721  font-size: 11.5px;722  font-weight: 500;723  text-transform: uppercase;724  letter-spacing: 0.1em;725  color: var(--lime);726  animation: ticker 44s linear infinite;727}728.ticker-item::after {729  content: "◆";730  margin: 0 18px;731  opacity: 0.55;732  font-size: 8px;733  vertical-align: 2px;734}735@keyframes ticker {736  from {737    transform: translateX(0);738  }739  to {740    transform: translateX(-50%);741  }742}743744/* ---------- Tableau éditorial ---------- */745746.src-wrap {747  border: 1.5px solid var(--ink);748  border-radius: var(--r-card);749  box-shadow: var(--shadow-off-soft);750  overflow-x: auto;751  background: var(--surface);752}753.src-table {754  width: 100%;755  border-collapse: collapse;756  font-size: 13.5px;757}758.src-table th {759  font-family: var(--font-mono);760  font-size: 10px;761  font-weight: 700;762  text-transform: uppercase;763  letter-spacing: 0.1em;764  text-align: left;765  color: var(--ink-3);766  background: var(--surface-2);767  padding: 10px 14px;768  border-bottom: 1.5px solid var(--ink);769}770.src-table td {771  padding: 12px 14px;772  border-bottom: 1px solid var(--line);773  vertical-align: top;774}775.src-table tr:last-child td {776  border-bottom: none;777}778.src-table tbody tr:hover {779  background: var(--surface-2);780}781782/* ---------- Figure d'agrégation ---------- */783784.fig-flow {785  stroke-dasharray: 7 7;786  animation: figflow 1.1s linear infinite;787}788@keyframes figflow {789  to {790    stroke-dashoffset: -14;791  }792}793794.bar-grow {795  transform-origin: left center;796  animation: growx 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;797}798@keyframes growx {799  from {800    transform: scaleX(0);801  }802  to {803    transform: scaleX(1);804  }805}806807/* ---------- Animations d'entrée ---------- */808809.rise {810  opacity: 0;811  animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;812}813@keyframes rise {814  from {815    opacity: 0;816    transform: translateY(12px);817  }818  to {819    opacity: 1;820    transform: translateY(0);821  }822}823824/* ---------- Accessibilité ---------- */825826@media (prefers-reduced-motion: reduce) {827  .ticker-inner,828  .pulse-dot::after,829  .fig-flow {830    animation: none;831  }832  .rise {833    animation: none;834    opacity: 1;835  }836  *,837  *::before,838  *::after {839    transition-duration: 0.01ms !important;840    animation-duration: 0.01ms !important;841  }842  html {843    scroll-behavior: auto;844  }845}846