/* Identité Balise : couleurs, logo et éléments partagés (application + mini-audit). */
:root {
  --bg: #F3F2EF;
  --bg-2: #ECEAE5;
  --surface: rgba(255, 255, 255, .66);
  --surface-solid: #FBFAF8;
  --ink: #222121;
  --ink-2: #55524F;
  --ink-3: #6B6864;
  --ink-4: #8E8A85;
  --line: #DAD7D2;
  --line-2: #E6E3DE;
  --mauve: #7A6470;
  --mauve-2: #8F7A86;
  --mauve-soft: #BDAFB6;
  --rose: #EADCE1;
  --lavender: #DCDCEC;
  --sage: #E2E6D4;
  --crit: #9B4136;
  --crit-bg: #F2DEDA;
  --warn: #8A5D17;
  --warn-bg: #F2E6D0;
  --ok: #4D6A3B;
  --ok-bg: #DFE8D5;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(34, 33, 33, .04), 0 8px 28px -12px rgba(34, 33, 33, .14);
  --shadow-lg: 0 2px 6px rgba(34, 33, 33, .05), 0 24px 60px -20px rgba(34, 33, 33, .28);
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .25, 1);
}

/* Logo « balise » : le point du i est une bouée qui émet un signal. */
.wm { --beacon: var(--mauve); white-space: nowrap; font-weight: 600; letter-spacing: -.07em; }
.wm-i { position: relative; }
.wm-dot {
  --s: max(.145em, 5.5px);
  position: absolute; left: .13em; top: calc(.377em - var(--s));
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border-radius: 50%; background: var(--beacon);
  transition: scale .45s cubic-bezier(.2, .9, .25, 1.2);
}
.wm-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: max(1.2px, .014em) solid var(--beacon); opacity: 0; pointer-events: none;
}
a:hover .wm-dot { scale: 1.18; }
@media (prefers-reduced-motion: no-preference) {
  .wm-dot { animation: wm-bob 5s ease-in-out infinite; }
  .wm-dot::after { animation: wm-signal 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
}
@keyframes wm-signal { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.7); opacity: 0; } }
@keyframes wm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.022em; } }

.label {
  font: 500 11.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0;
}

.btn-pill {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 6px 0 22px;
  border-radius: 999px; background: var(--ink); color: var(--bg); border: 0; cursor: pointer;
  font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s;
}
.btn-pill .arrow {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); color: var(--ink); font-size: 16px; transition: transform .3s var(--ease);
}
.btn-pill:hover { background: #000; box-shadow: var(--shadow); }
.btn-pill:hover .arrow { transform: translateX(2px) rotate(-12deg); }
.btn-pill:active { transform: scale(.98); }
.btn-pill.light { background: var(--bg); color: var(--ink); }
.btn-pill.light .arrow { background: var(--ink); color: var(--bg); }