:root {
    --bg: #FAFAF8;
    --bg-window: rgba(255, 255, 255, 0.72);
    --bg-window-solid: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: rgba(0, 0, 0, 0.04);

    --text: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #98989D;

    --hand: #2C5282;
    --hand-red: #B5263A;

    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
    --separator: rgba(0, 0, 0, 0.06);

    --accent: #007AFF;
    --green: #34C759;
    --orange: #FF9500;
    --purple: #AF52DE;

    --postit-yellow: #FFF8B8;
    --postit-pink: #FFD9E2;
    --postit-green: #D4F5DD;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-window: 0 24px 72px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-postit: 2px 4px 12px rgba(0, 0, 0, 0.12);
  }

  body[data-theme="dark"] {
    --bg: #19191B;
    --bg-window: rgba(28, 28, 30, 0.72);
    --bg-window-solid: #1C1C1E;
    --bg-elevated: #2C2C2E;
    --bg-hover: rgba(255, 255, 255, 0.06);

    --text: #F5F5F7;
    --text-secondary: #98989D;
    --text-tertiary: #636366;

    --hand: #7BA7E1;
    --hand-red: #FF6B7A;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --separator: rgba(255, 255, 255, 0.06);

    --postit-yellow: #B8AB52;
    --postit-pink: #B85A77;
    --postit-green: #5BAB72;

    --shadow-window: 0 24px 72px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  html {
    scroll-behavior: smooth;
    /* Scroll snap full-section : chaque scroll cale sur une section entière */
    scroll-snap-type: y mandatory;
    /* Le nav sticky flotte ~90px en haut. Sans offset, le snap colle le top
       de la section au top du viewport et le contenu se cache derrière la nav.
       90px = section démarre juste sous la nav, lisible. */
    scroll-padding-top: 90px;
  }
  /* Sur les petits écrans/tactile + viewports courts : desserrer le snap. */
  @media (max-width: 900px), (max-height: 800px), (pointer: coarse) {
    html { scroll-snap-type: y proximity; }
  }
  /* Chaque section (hero + .section + variantes) devient un "panneau" plein écran */
  section, footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  section { min-height: 100vh; }
  /* On centre verticalement le contenu pour que ça respire dans le viewport */
  section.section,
  section.hero,
  section.skills-section,
  section.stack-section,
  section.socials-section,
  section.personal-note-section,
  section.promo-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Quand le contenu d'une section est plus haut que le viewport, on autorise
     le scroll interne mais on garde le snap sur le NEXT (le user scrolle dans
     la section puis ressort vers la suivante) */
  section.is-tall { scroll-snap-align: none; }
  /* Petits écrans : on réduit le padding section pour ne pas écraser le contenu */
  @media (max-height: 800px) {
    .section { padding: 56px 0; }
  }
  /* Le scroll-snap doit aussi désactiver le scroll-behavior smooth natif pour
     éviter une double inertie disgracieuse (la snap-animation suffit) */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none; scroll-behavior: auto; }
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.4s, color 0.4s;
    position: relative;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse at top left, rgba(0, 122, 255, 0.04), transparent 50%),
      radial-gradient(ellipse at bottom right, rgba(255, 149, 0, 0.04), transparent 50%);
    pointer-events: none;
    z-index: -1;
  }

  .container { max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 24px; }

  /* ═══════ HAND (manuscrit signature) ═══════ */
  .hand {
    font-family: 'Caveat', cursive;
    font-weight: 500;
    color: var(--hand);
    font-size: 22px;
    line-height: 1.2;
  }
  .hand-big {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    color: var(--hand);
    font-size: 28px;
    line-height: 1.1;
  }
  .hand-red {
    font-family: 'Caveat', cursive;
    color: var(--hand-red);
    font-weight: 600;
  }

  /* Flèches dessinées en SVG */
  .arrow-svg {
    display: inline-block;
    vertical-align: middle;
    color: var(--hand);
  }

  /* ═══════ MENU BAR ═══════ */
  .menu-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-window);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    font-weight: 500;
  }
  .menu-bar .apple-icon { font-size: 14px; margin-right: 4px; }
  .menu-bar .menu-item {
    color: var(--text);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
  }
  .menu-bar .menu-item:hover { background: var(--bg-hover); }
  .menu-bar-right {
    margin-left: auto;
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .menu-bar .menu-clock { font-weight: 500; color: var(--text); }
  .sound-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text);
    transition: background 0.15s;
    line-height: 1;
  }
  .sound-toggle:hover { background: var(--bg-hover); }
  .sound-toggle.muted { opacity: 0.5; }
  .theme-pill {
    display: flex;
    background: var(--bg-hover);
    border-radius: 100px;
    padding: 2px;
    gap: 2px;
  }
  .theme-pill button {
    border: none;
    background: transparent;
    width: 24px; height: 22px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.2s;
  }
  .theme-pill button.active {
    background: var(--bg-window-solid);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }

  /* ═══════ NAV WINDOW (sticky top, 3 zones) ═══════ */
  .nav-wrapper {
    position: sticky;
    top: 12px;
    z-index: 100;
    padding: 12px 24px 0;
    margin: 0;
  }
  .nav-window {
    margin: 0 auto;
    max-width: 1280px;
    background: var(--bg-window);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-md);
  }
  .nav-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
  .nav-center { display: flex; align-items: center; justify-content: center; }
  .nav-right { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
  .nav-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
  }
  .nav-title { align-items: flex-start !important; }
  .nav-tagline-row { max-width: 340px; }
  @media (max-width: 1100px) {
    .nav-center { display: none; }
    .nav-window { grid-template-columns: 1fr auto; }
  }
  @media (max-width: 768px) {
    .nav-wrapper { padding: 8px 12px 0; top: 8px; }
    .nav-window { padding: 8px 12px; }
    .nav-tagline-row { display: none; }
  }
  /* Annotation manuscrite "← bah oui c'est moi" en marge */
  .nav-annotation {
    position: absolute;
    top: 50%;
    left: calc(100% - 800px);
    transform: translateY(-50%) rotate(-2deg);
    pointer-events: none;
  }
  .traffic-lights {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 16px;
  }
  .tl-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: filter 0.15s;
  }
  .tl-dot.red { background: #FF5F57; }
  .tl-dot.yellow { background: #FEBC2E; }
  .tl-dot.green { background: #28C840; }
  .tl-dot:hover { filter: brightness(1.1); }

  .nav-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    user-select: none;
    min-width: 0;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }
  .nav-name { letter-spacing: -0.01em; }
  .nav-title kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
  }
  .nav-tagline-row {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .tw-cursor {
    display: inline-block;
    margin-left: 1px;
    color: var(--accent);
    font-weight: 400;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @media (max-width: 768px) {
    .nav-tagline-row { display: none; }
  }

  .nav-links {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
  }
  .nav-links a {
    color: var(--text);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
  }
  .nav-links a:hover { background: var(--bg-hover); }
  /* CTA nav style macOS Sonoma — gradient bleu signature */
  .nav-cta {
    background: linear-gradient(180deg, #1A8AFF 0%, #006EE6 100%) !important;
    color: #FFFFFF !important;
    border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
    padding: 7px 13px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px rgba(0, 0, 0, 0.15),
      0 4px 14px rgba(0, 122, 255, 0.32) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s,
                filter 0.2s !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  }
  .nav-cta svg {
    flex-shrink: 0;
    opacity: 0.95;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
  }
  .nav-cta:hover {
    background: linear-gradient(180deg, #2A95FF 0%, #0078F0 100%) !important;
    filter: brightness(1.05);
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.18),
      0 8px 22px rgba(0, 122, 255, 0.4) !important;
  }
  .nav-cta:active {
    transform: translateY(0) !important;
    filter: brightness(0.96);
    transition: transform 0.08s, box-shadow 0.08s !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(0, 0, 0, 0.12),
      0 1px 1px rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(0, 122, 255, 0.25) !important;
  }

  /* ═══════ HERO ═══════ */
  .hero {
    padding: 80px 0 64px;
    text-align: center;
    position: relative;
  }

  /* Post-it scrapbook scotché — typo Shadows Into Light Two
     top: 112px → laisse passer le nav sticky (≈ 86px de haut, snap au top) */
  .hero-postit {
    position: absolute;
    top: 112px;
    left: 28px;
    background: #FFF6A8;
    background-image:
      linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 40%),
      linear-gradient(180deg, rgba(0,0,0,0.025) 0%, transparent 100%),
      radial-gradient(ellipse at 80% 110%, rgba(0,0,0,0.04), transparent 60%);
    padding: 24px 22px 20px;
    transform: rotate(-8deg);
    box-shadow:
      0 1px 1px rgba(0,0,0,0.1),
      0 8px 18px rgba(0,0,0,0.14),
      0 20px 40px rgba(0,0,0,0.1);
    max-width: 240px;
    font-family: 'Shadows Into Light Two', cursive;
    color: #1D1D1F;
    line-height: 1.35;
    z-index: 3;
    text-decoration: none;
    display: block;
    border-radius: 2px 5px 3px 4px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
  }
  .hero-postit::after {
    /* corner curl (papier qui se décolle) */
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 24px; height: 24px;
    background: linear-gradient(225deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.03) 40%, transparent 50%);
    border-radius: 0 0 14px 0;
    pointer-events: none;
  }
  .hero-postit:hover {
    transform: rotate(-3deg) translateY(-5px) scale(1.04);
    box-shadow:
      0 2px 2px rgba(0,0,0,0.12),
      0 16px 28px rgba(0,0,0,0.18),
      0 26px 50px rgba(0,0,0,0.12);
  }
  /* 3 morceaux de scotch */
  .postit-tape {
    position: absolute;
    background: rgba(255, 240, 90, 0.55);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    pointer-events: none;
  }
  .postit-tape-l {
    top: -10px; left: 6px;
    width: 56px; height: 19px;
    transform: rotate(-14deg);
  }
  .postit-tape-r {
    top: -10px; right: 4px;
    width: 50px; height: 18px;
    transform: rotate(10deg);
  }
  .postit-tape-mid {
    bottom: -8px; left: 50%;
    margin-left: -28px;
    width: 56px; height: 17px;
    transform: rotate(-4deg);
  }

  /* "c'est gratuit" — Caveat penché */
  .hero-postit strong {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 700;
    color: var(--hand-red);
    margin-bottom: 4px;
    transform: rotate(-3deg) translateX(2px);
    line-height: 0.95;
    letter-spacing: -0.01em;
  }

  /* Headline avec rature crayon */
  .postit-headline {
    display: block;
    font-family: 'Shadows Into Light Two', cursive;
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    color: #2A2A2A;
  }
  .postit-headline .strike {
    position: relative;
    color: #888;
    text-decoration: none;
    margin-right: 2px;
  }
  .postit-headline .strike::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    top: 56%;
    height: 2px;
    background: var(--hand);
    transform: rotate(-3deg);
    border-radius: 2px;
  }
  .postit-headline .hl {
    background: linear-gradient(180deg, transparent 55%, rgba(255, 217, 100, 0.9) 55%, rgba(255, 217, 100, 0.9) 92%, transparent 92%);
    padding: 0 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-weight: 400;
  }

  /* Meta — Caveat léger, ton manuscrit complice */
  .postit-meta {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 14px;
    letter-spacing: 0;
    color: #4A4A4A;
    line-height: 1.1;
    transform: rotate(-1deg);
  }

  /* CTA avec flèche dessinée à la main */
  .postit-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 700;
    color: var(--hand-red);
    transition: transform 0.3s;
    position: relative;
  }
  .postit-arrow {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: 2px;
    margin-bottom: -8px;
  }
  .hero-postit:hover .postit-arrow {
    transform: translate(4px, -2px) rotate(4deg) scale(1.1);
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .hero-eyebrow::before, .hero-eyebrow::after {
    content: "";
    width: 24px; height: 1px;
    background: var(--border-strong);
  }
  .eb-chunk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    padding: 2px 6px;
    border-radius: 6px;
    transform-origin: 100% 100%;
    transition:
      transform 0.55s cubic-bezier(0.34, 1.65, 0.5, 1),
      color 0.3s,
      background 0.3s;
    position: relative;
    will-change: transform;
  }
  .eb-chunk:hover {
    transform: rotate(-14deg) translate(-2px, -6px);
    color: var(--text);
    background: var(--bg-window-solid);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  .eb-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s;
    color: var(--text-tertiary);
  }
  .eb-chunk:hover .eb-arrow {
    transform: translate(3px, -4px) scale(1.35);
    color: var(--green);
  }
  .eb-sep {
    color: var(--text-tertiary);
    margin: 0 2px;
    user-select: none;
  }

  h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(44px, 6.5vw, 76px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  /* Annotation manuscrite à côté du H1 */
  .h1-side-note {
    position: absolute;
    top: -8px;
    right: -20px;
    transform: rotate(8deg);
    pointer-events: none;
  }
  /* Surlignage manuscrit derrière un mot */
  .underline-hand {
    position: relative;
    display: inline-block;
  }
  .underline-hand::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: -6px;
    right: -6px;
    height: 16px;
    background: var(--postit-yellow);
    z-index: -1;
    border-radius: 2px;
    transform: skew(-6deg) rotate(-1deg);
    opacity: 0.7;
  }
  /* Plus compact pour H2 */
  h2 .underline-hand::after {
    bottom: 2px;
    height: 12px;
    left: -4px;
    right: -4px;
  }

  /* "(non, pas avec ChatGPT)" en sous-ligne italique style note de bas */
  .hero-aside {
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 16px;
    transform: rotate(-1deg);
    display: inline-block;
  }

  .hero-sub {
    font-size: 20px;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.5;
  }

  .hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    position: relative;
  }
  /* "← celui-là si tu doutes" en manuscrit à côté du CTA secondaire */
  .cta-side-note {
    position: absolute;
    right: -180px;
    top: 50%;
    transform: translateY(-50%) rotate(-4deg);
    pointer-events: none;
    text-align: left;
  }

  .btn {
    padding: 14px 28px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    letter-spacing: -0.01em;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s, background 0.25s;
    will-change: transform;
  }
  /* PRIMARY — style post-it scotché crème, scotch rouge (inspiré du secondary) */
  .btn-primary {
    background: #FFFCEC;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    color: var(--text);
    border: 1px solid rgba(0,0,0,0.1);
    transform: rotate(1.4deg);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.06),
      0 8px 18px rgba(0,0,0,0.08),
      0 16px 30px rgba(0,0,0,0.06);
    font-weight: 700;
  }
  .btn-primary::before {
    /* Scotch BLEU accent (signature macOS) */
    content: "";
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%) rotate(4deg);
    width: 60px; height: 18px;
    background: rgba(0, 122, 255, 0.42);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-radius: 1px;
  }
  .btn-primary:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.02);
    box-shadow:
      0 4px 8px rgba(0,0,0,0.08),
      0 14px 28px rgba(0,0,0,0.12),
      0 24px 48px rgba(0,0,0,0.08);
  }
  .btn-primary:active {
    transform: rotate(1.4deg) translateY(1px);
    transition: transform 0.08s;
  }
  /* SECONDARY — style "sticker" avec scotch jaune en haut */
  .btn-secondary {
    background: #FFFFFF;
    color: var(--text);
    border: 1px solid rgba(0,0,0,0.08);
    transform: rotate(-1.2deg);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.05),
      0 6px 14px rgba(0,0,0,0.06);
  }
  .btn-secondary::before {
    content: "";
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 56px; height: 18px;
    background: rgba(255, 240, 90, 0.65);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    border-radius: 1px;
  }
  .btn-secondary:hover {
    transform: rotate(0deg) translateY(-3px);
    box-shadow:
      0 4px 8px rgba(0,0,0,0.06),
      0 12px 24px rgba(0,0,0,0.1);
  }
  .btn-arrow {
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    display: inline-block;
  }
  .btn-primary:hover .btn-arrow { transform: translateX(6px); }


  /* "scroll pour voir mes services ↓" en manuscrit sous CTAs */
  .scroll-hint {
    margin-top: 64px;
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 24px;
    font-weight: 500;
    transform: rotate(-2deg);
    display: inline-block;
    animation: scroll-bounce 2s ease-in-out infinite;
  }
  @keyframes scroll-bounce {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-6px); }
  }

  /* ═══════ ROCKET easter egg (top-right, équilibre avec post-it)
     top: 200px → bien dégagé du nav, centre vertical approx du post-it */
  .rocket-wrapper {
    position: absolute;
    top: 200px;
    right: 32px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 5;
  }
  .rocket {
    font-size: 32px;
    line-height: 1;
    transform: rotate(-25deg);
    transition: transform 1.4s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 1.4s ease-out;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  }
  .rocket-trail {
    position: absolute;
    top: 38px; left: 8px;
    font-size: 14px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.3s 0.2s;
    pointer-events: none;
    letter-spacing: 4px;
  }
  .rocket-tooltip {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    font-family: 'Caveat', cursive;
    color: var(--hand-red);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .rocket-wrapper:hover .rocket {
    transform: translate(120px, -480px) rotate(-10deg) scale(1.4);
    opacity: 0;
  }
  .rocket-wrapper:hover .rocket-trail { opacity: 0.9; }
  .rocket-wrapper:hover .rocket-tooltip { opacity: 0; }
  .rocket-wrapper.relaunching .rocket {
    transition: none;
    transform: rotate(-30deg);
    opacity: 1;
  }
  @media (max-width: 1100px) { .rocket-wrapper { display: none; } }

  /* ═══════ SECTIONS ═══════ */
  .section { padding: 96px 0 32px; position: relative; }

  .section-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
  }
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
  }
  .section-eyebrow::before { content: "// "; color: var(--text-tertiary); }
  .section-title {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    line-height: 1.1;
    position: relative;
    display: inline-block;
  }
  .section-sub {
    color: var(--text-secondary);
    font-size: 18px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* Marker manuscrit à côté du title (sans chevauchement) */
  .section-title-note {
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);
    transform: translateY(-50%) rotate(-5deg);
    pointer-events: none;
    white-space: nowrap;
  }
  @media (max-width: 1200px) {
    .section-title-note { display: none; }
  }

  /* ═══════ SERVICES (grille 2x2 symétrie pixel-perfect) ═══════ */
  .services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 28px;
    position: relative;
    perspective: 1200px;
    align-items: stretch;
  }
  @media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr; gap: 32px; max-width: 560px; margin: 0 auto; }
  }

  /* Card 2 (populaire) — couleur d'accent uniquement, PAS de translateY pour préserver symétrie */
  .card-popular {
    border-color: rgba(0, 122, 255, 0.25) !important;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.04),
      0 12px 28px rgba(0, 122, 255, 0.1),
      0 24px 56px rgba(0, 122, 255, 0.06) !important;
    position: relative;
  }
  .card-popular::before {
    /* halo bleu subtil de fond pour distinguer sans casser la symétrie */
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), transparent 60%);
    z-index: -1;
    pointer-events: none;
  }
  .card-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1A8AFF 0%, #006EE6 100%);
    color: white;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 4px 12px rgba(0, 122, 255, 0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.12);
    z-index: 4;
    white-space: nowrap;
  }

  /* Stamp rouge pour Card 4 (Formation) */
  .card-stamp.stamp-red {
    color: var(--hand-red);
    border-color: var(--hand-red);
    box-shadow: 2px 3px 8px rgba(181, 38, 58, 0.12);
    transform: rotate(6deg);
  }
  /* Stamp vert pour Card 1 (Audit ponctuel) */
  .card-stamp.stamp-green {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 2px 3px 8px rgba(52, 199, 89, 0.12);
    transform: rotate(-7deg);
  }

  /* Icônes différenciées par service */
  .icon-audit {
    background: linear-gradient(135deg, #34C759 0%, #00C5A0 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 6px 16px rgba(52, 199, 89, 0.28) !important;
  }
  .icon-pilot {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 6px 16px rgba(88, 86, 214, 0.3) !important;
  }
  .icon-write {
    background: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 6px 16px rgba(236, 72, 153, 0.28) !important;
  }

  /* Card structure — flex column pour symétrie pixel-perfect */
  .app-card {
    background: #FFFFFF;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(circle at 100% 0%, rgba(0, 122, 255, 0.03), transparent 50%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    padding: 32px 30px 28px;
    position: relative;
    overflow: visible;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.06),
      0 16px 48px rgba(0,0,0,0.04);
    transition:
      transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1),
      box-shadow 0.4s,
      border-color 0.3s;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 540px;
  }
  .app-card:hover {
    transform: translateY(-6px) rotateX(1.5deg);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.05),
      0 16px 40px rgba(0,0,0,0.1),
      0 30px 70px rgba(0, 122, 255, 0.08);
  }
  /* Force le bloc meta + price-sub à toujours coller en bas */
  .app-card > .app-meta {
    margin-top: auto;
  }

  /* Scotch de couleur en haut de chaque card (touche scrapbook) */
  .app-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 72px;
    height: 20px;
    background: rgba(255, 240, 90, 0.55);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-radius: 1px;
    z-index: 4;
    pointer-events: none;
    transform: translateX(-50%) rotate(-4deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  /* Variations de couleur/rotation par card pour effet "fait main"
     Sélecteurs adaptés au carrousel (data-idx 0..3 au lieu de nth-child) */
  .services-grid > .app-card:nth-child(1)::before,
  .carousel-slot[data-idx="0"] .app-card::before { transform: translateX(-50%) rotate(-7deg); background: rgba(52, 199, 89, 0.4); }
  .services-grid > .app-card:nth-child(2)::before,
  .carousel-slot[data-idx="1"] .app-card::before { transform: translateX(-50%) rotate(5deg); background: rgba(255, 240, 90, 0.55); }
  /* Card 3 (populaire) : scotch décalé à droite pour pas chevaucher le badge */
  .services-grid > .app-card:nth-child(3)::before,
  .carousel-slot[data-idx="2"] .app-card::before { left: auto; right: 32px; transform: rotate(-10deg); background: rgba(0, 122, 255, 0.4); }
  .services-grid > .app-card:nth-child(3):hover::before,
  .carousel-slot[data-idx="2"] .app-card:hover::before { transform: rotate(-3deg); }
  .services-grid > .app-card:nth-child(4)::before,
  .carousel-slot[data-idx="3"] .app-card::before { transform: translateX(-50%) rotate(8deg); background: rgba(181, 38, 58, 0.4); }
  .app-card:hover::before {
    transform: translateX(-50%) rotate(0deg);
  }

  /* Head : icône + mode label */
  .card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .app-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, #007AFF 0%, #AF52DE 100%);
    color: white;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 6px 16px rgba(0, 122, 255, 0.25);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
  }
  .app-card.alt .app-icon {
    background: linear-gradient(135deg, #FF9500 0%, #FF3B30 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 6px 16px rgba(255, 149, 0, 0.28);
  }
  .app-card:hover .app-icon { transform: scale(1.06) rotate(-4deg); }

  .card-mode {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
  }
  /* Eyebrow descriptif — "Pour qui veut..." */
  .card-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: 17px;
    font-weight: 600;
    color: var(--hand);
    line-height: 1.15;
    display: block;
    max-width: 200px;
  }
  .card-popular .card-eyebrow { color: var(--accent); }
  .app-card.alt .card-eyebrow { color: var(--hand-red); }

  /* Icône Card 2 (populaire) — vert-bleu pour différencier */
  .card-popular .app-icon {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 6px 16px rgba(88, 86, 214, 0.28);
  }
  /* Sub-text sous le prix (forfaits / paliers) */
  .card-price-sub {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
  }
  .card-price-sub strong {
    color: var(--text);
    font-weight: 700;
  }

  /* Title + sub */
  .app-card h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .card-sub {
    color: var(--text-secondary);
    font-size: 14.5px;
    margin-bottom: 18px;
    line-height: 1.5;
  }

  /* Bullets ✓ inclusions */
  .card-includes {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .card-includes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
  }
  .card-includes .check {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.12);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
  }

  /* Stamp "+rapide" / "+rentable" (touche scrapbook) */
  .card-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Caveat', cursive;
    color: var(--hand-red);
    font-size: 18px;
    font-weight: 700;
    background: rgba(255,255,255,0.95);
    padding: 4px 12px;
    border: 1.5px dashed var(--hand-red);
    border-radius: 4px;
    transform: rotate(6deg);
    line-height: 1;
    box-shadow: 2px 3px 8px rgba(181, 38, 58, 0.1);
    z-index: 3;
  }
  .card-stamp.stamp-blue {
    color: var(--hand);
    border-color: var(--hand);
    box-shadow: 2px 3px 8px rgba(44, 82, 130, 0.12);
    transform: rotate(-5deg);
  }

  /* Note manuscrite latérale — désactivée pour la grille 2x2 (pas la place) */
  .card-side-note { display: none; }

  /* Meta : prix + CTA */
  .app-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.06);
    gap: 12px;
    flex-wrap: wrap;
  }
  .app-price {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
  }
  .app-price-prefix {
    font-family: 'Caveat', cursive;
    font-size: 16px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-right: 2px;
    transform: translateY(-2px);
  }
  .price-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  .price-highlight::after {
    content: "";
    position: absolute;
    left: -3px; right: -3px;
    bottom: 1px;
    height: 10px;
    background: rgba(255, 217, 100, 0.85);
    z-index: -1;
    transform: skew(-8deg) rotate(-1.5deg);
    border-radius: 2px;
  }
  .app-price .dim {
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 14px;
  }

  /* CTA card — style macOS Sonoma bleu (cohérent avec "Réserve ton appel") */
  .app-link {
    background: linear-gradient(180deg, #1A8AFF 0%, #006EE6 100%);
    color: #FFFFFF;
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px rgba(0, 0, 0, 0.15),
      0 4px 14px rgba(0, 122, 255, 0.3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    transition:
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.2s,
      filter 0.2s;
  }
  .app-link .link-arrow {
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    display: inline-block;
  }
  .app-link:hover {
    background: linear-gradient(180deg, #2A95FF 0%, #0078F0 100%);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.18),
      0 8px 22px rgba(0, 122, 255, 0.4);
  }
  .app-link:hover .link-arrow { transform: translateX(4px); }
  .app-link:active {
    transform: translateY(0);
    filter: brightness(0.96);
    transition: transform 0.08s;
  }

  /* Process timeline TOUJOURS visible (chips horizontales) */
  .card-process-line {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(0, 122, 255, 0.04) 0%, rgba(0, 122, 255, 0.06) 100%);
    border: 1px solid rgba(0, 122, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .app-card.alt .card-process-line {
    background: linear-gradient(180deg, rgba(255, 149, 0, 0.04) 0%, rgba(255, 149, 0, 0.06) 100%);
    border-color: rgba(255, 149, 0, 0.14);
  }
  .card-process-line li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
  }
  .proc-num {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 4px rgba(0, 122, 255, 0.2);
  }
  .app-card.alt .proc-num {
    background: var(--orange);
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 4px rgba(255, 149, 0, 0.25);
  }
  .proc-lbl {
    letter-spacing: -0.01em;
  }
  .proc-sep {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
  }

  /* Annotation manuscrite "deux options !" en haut-droite du H2, flèche courbe non-tangente */
  .services-handnote {
    position: absolute;
    top: -32px;
    right: -8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    pointer-events: none;
    z-index: 3;
  }
  .services-handnote-text {
    font-family: 'Caveat', cursive;
    font-size: 44px;
    font-weight: 700;
    color: var(--hand-red);
    transform: rotate(-6deg);
    line-height: 0.95;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
    margin-bottom: -6px;
  }
  .services-handnote-arrow {
    margin-top: 0;
    margin-right: 12px;
  }
  @media (max-width: 1200px) {
    .services-handnote { display: none; }
  }

  /* Scroll reveal animation */
  @keyframes cardRise {
    from { opacity: 0; transform: translateY(28px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
  }
  .app-card.reveal {
    animation: cardRise 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) both;
  }
  .app-card.alt.reveal { animation-delay: 0.12s; }

  /* Encart audit ponctuel sous le "ou" géant */
  .services-bonus {
    margin: 40px auto 0;
    max-width: 720px;
    background: #FFF8B8;
    background-image:
      linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 40%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transform: rotate(-0.6deg);
    box-shadow:
      0 1px 1px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s;
  }
  .services-bonus:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.06),
      0 14px 32px rgba(0,0,0,0.1);
  }
  .bonus-tape {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 80px; height: 18px;
    background: rgba(255, 240, 90, 0.7);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-radius: 1px;
    pointer-events: none;
  }
  .bonus-content {
    flex: 1;
    min-width: 0;
  }
  .bonus-label {
    font-family: 'Caveat', cursive;
    font-size: 20px;
    font-weight: 600;
    color: var(--hand-red);
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .bonus-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    color: #1D1D1F;
  }
  .bonus-title strong {
    font-weight: 700;
    background: linear-gradient(180deg, transparent 55%, rgba(255, 217, 100, 0.85) 55%, rgba(255, 217, 100, 0.85) 92%, transparent 92%);
    padding: 0 4px;
  }
  .bonus-sub {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.45;
  }
  .bonus-cta {
    background: linear-gradient(180deg, #1A8AFF 0%, #006EE6 100%);
    color: #FFFFFF;
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 1px 2px rgba(0, 0, 0, 0.15),
      0 4px 14px rgba(0, 122, 255, 0.32);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    transition:
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.2s,
      filter 0.2s;
    white-space: nowrap;
  }
  .bonus-cta:hover {
    background: linear-gradient(180deg, #2A95FF 0%, #0078F0 100%);
    transform: translateY(-1px);
  }
  .bonus-cta .link-arrow {
    display: inline-block;
    transition: transform 0.3s;
  }
  .bonus-cta:hover .link-arrow { transform: translateX(4px); }
  @media (max-width: 700px) {
    .services-bonus { flex-direction: column; text-align: center; gap: 14px; }
  }

  /* ═══════ STATS ═══════ */
  .stats-section { padding: 64px 0; position: relative; }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
  }
  @media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* "↑ updated this morning" note manuscrite */
  .stats-update-note {
    position: absolute;
    top: -32px;
    right: 12px;
    transform: rotate(-4deg);
    pointer-events: none;
  }
  .stat-tile {
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s;
    cursor: pointer;
  }
  .stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .stat-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.5);
  }
  .stat-dot.blue { background: var(--accent); }
  .stat-dot.purple { background: var(--purple); }
  .stat-dot.orange { background: var(--orange); }
  .stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }
  .stat-change {
    color: var(--green);
    font-size: 12px;
    font-weight: 500;
  }
  .stat-sparkline {
    margin-top: 8px;
    width: 100%;
    height: 28px;
    color: var(--green);
  }
  .stat-sparkline path { stroke-width: 1.6; fill: none; stroke: currentColor; }
  .stat-sparkline .area { fill: currentColor; opacity: 0.1; stroke: none; }
  .stats-kw-hand {
    position: absolute;
    bottom: -36px;
    left: 12px;
    transform: rotate(-3deg);
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 22px;
    font-weight: 600;
    pointer-events: none;
  }

  /* ═══════ CODE PROMO ═══════ */
  .promo-section { padding: 64px 0; position: relative; }
  .promo-wrapper { position: relative; max-width: 620px; margin: 0 auto; }

  /* Annotation "pst ! c'est limité" */
  .promo-note {
    position: absolute;
    top: -32px;
    right: -16px;
    transform: rotate(4deg);
    pointer-events: none;
    z-index: 2;
  }

  .promo-banner {
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
  }
  .promo-banner:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.05);
  }
  .promo-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .promo-banner:hover .promo-cta { transform: translateX(3px); }
  .promo-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--orange), #FF3B30);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(255, 149, 0, 0.25);
  }
  .promo-body { flex: 1; }
  .promo-eyebrow {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .promo-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    white-space: nowrap;
  }
  @media (max-width: 640px) {
    .promo-title { white-space: normal; }
  }
  .promo-desc {
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .promo-code-pill {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .promo-code-pill::after {
    content: "⌘C";
    font-size: 10px;
    color: var(--text-tertiary);
    background: var(--bg-hover);
    padding: 1px 4px;
    border-radius: 3px;
  }
  .promo-code-pill:hover {
    background: var(--bg-elevated);
    transform: scale(1.02);
  }

  /* ═══════ AVANT DE PARTIR — réseaux + promo VICTOR (scrapbook) ═══════ */
  .socials-section {
    padding: 100px 0 12px;
    position: relative;
    justify-content: flex-start !important;
  }
  .socials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .social-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 14px;
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
    position: relative;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 4px 12px rgba(0,0,0,0.04);
  }
  .social-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 14px 32px rgba(0,0,0,0.12);
  }
  .social-linkedin:hover { border-color: rgba(10, 102, 194, 0.30); }
  .social-youtube:hover { border-color: rgba(255, 0, 0, 0.25); }
  /* Card Wisewand en GROS POST-IT signature */
  .social-promo {
    background: linear-gradient(165deg, #FFF8B8 0%, #FFEB66 100%);
    border: 1px solid rgba(181, 122, 0, 0.28);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 10px 26px rgba(181, 122, 0, 0.22),
      inset 0 0.5px 0 rgba(255,255,255,0.45);
    transform: rotate(-1.8deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
  }
  .social-promo:hover {
    transform: rotate(0deg) translateY(-5px);
    border-color: rgba(181, 122, 0, 0.45);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.08),
      0 18px 36px rgba(181, 122, 0, 0.28),
      inset 0 0.5px 0 rgba(255,255,255,0.50);
  }
  /* Logo Wisewand allégé sur fond jaune (pas de squircle blanc lourd) */
  .social-promo .social-icon-wrap.icon-wisewand {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 42px; height: 42px;
  }
  .social-promo .social-icon-wrap.icon-wisewand img {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.10),
      0 3px 8px rgba(0,0,0,0.10);
  }
  /* Status pill : adapté au fond jaune */
  .social-promo .social-status-pill.promo-status-pill {
    background: rgba(255,255,255,0.60);
    border-color: rgba(181, 38, 58, 0.35);
    color: var(--hand-red);
    backdrop-filter: blur(4px);
  }
  /* Texte couleurs adaptées sur fond jaune */
  .social-promo .social-handle { color: rgba(0,0,0,0.50); }
  .social-promo .social-desc { color: rgba(0,0,0,0.68); }
  .social-promo .social-desc strong { color: var(--hand-red); }
  body[data-theme="dark"] .social-promo {
    background: linear-gradient(165deg, #F5DC52 0%, #E5C53A 100%);
    border-color: rgba(0,0,0,0.30);
  }
  body[data-theme="dark"] .social-promo .social-handle { color: rgba(0,0,0,0.60); }
  body[data-theme="dark"] .social-promo .social-desc { color: rgba(0,0,0,0.78); }
  body[data-theme="dark"] .social-promo .social-desc strong { color: #8B0F22; }
  body[data-theme="dark"] .social-promo .social-name.promo-code { color: #8B0F22; }
  /* Post-it "à moi seulement" sur fond jaune : passer en rose plus contrasté */
  .social-promo .social-postit-red {
    background: #FFFFFF;
    color: var(--hand-red);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  }

  .social-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.10),
      0 4px 10px rgba(0,0,0,0.10),
      inset 0 0.5px 0 rgba(255,255,255,0.18);
  }
  .social-linkedin .social-icon-wrap { background: #0A66C2; color: white; }
  .social-youtube .social-icon-wrap { background: #FF0000; color: white; }
  .social-icon-wrap.icon-wisewand {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .social-icon-wrap.icon-wisewand img {
    width: 84%;
    height: 84%;
    border-radius: 8px;
    object-fit: contain;
    display: block;
  }
  .social-icon { width: 60%; height: 60%; display: block; }

  .social-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(52, 199, 89, 0.13);
    color: #1E8A3E;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid rgba(52, 199, 89, 0.25);
    line-height: 1.3;
    width: fit-content;
    margin-top: 2px;
  }
  .social-status-pill.social-status-soon {
    background: rgba(255, 149, 0, 0.13);
    color: #B36800;
    border-color: rgba(255, 149, 0, 0.28);
  }
  .social-status-pill.promo-status-pill {
    background: rgba(181, 38, 58, 0.13);
    color: var(--hand-red);
    border-color: rgba(181, 38, 58, 0.28);
  }
  body[data-theme="dark"] .social-status-pill { color: #5BD874; }
  body[data-theme="dark"] .social-status-pill.social-status-soon { color: #FFB84D; }
  body[data-theme="dark"] .social-status-pill.promo-status-pill { color: #FF8C9C; }
  .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.5);
  }
  .status-dot.dot-amber { background: #FF9500; box-shadow: 0 0 6px rgba(255, 149, 0, 0.5); }
  .status-dot.dot-red { background: var(--hand-red); box-shadow: 0 0 6px rgba(181, 38, 58, 0.5); }

  .social-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 2px;
  }
  .social-name.promo-code {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--hand-red);
    line-height: 1;
    margin-top: 4px;
  }
  body[data-theme="dark"] .social-name.promo-code { color: #8B0F22; }
  /* Handle wisewand.ai en manuscrit Caveat sur post-it */
  .social-promo .social-handle {
    font-family: 'Caveat', cursive;
    font-size: 17px;
    color: rgba(0,0,0,0.55);
    font-weight: 600;
    line-height: 1.1;
    transform: rotate(-1deg);
    transform-origin: left center;
  }
  body[data-theme="dark"] .social-promo .social-handle { color: rgba(0,0,0,0.65); }
  .social-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.2;
  }
  .social-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    flex: 1;
  }
  .social-desc strong {
    color: var(--text);
    font-weight: 700;
  }
  .social-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-accent, var(--accent));
    letter-spacing: -0.01em;
  }
  .social-linkedin .social-cta { color: #0A66C2; }
  .social-youtube .social-cta { color: #C00000; }
  .social-promo .social-cta { color: var(--hand-red); }
  body[data-theme="dark"] .social-linkedin .social-cta { color: #5DAEFF; }
  body[data-theme="dark"] .social-youtube .social-cta { color: #FF7373; }
  body[data-theme="dark"] .social-promo .social-cta { color: #FF8C9C; }
  .social-cta-arrow {
    transition: transform 0.25s ease;
    display: inline-block;
  }
  .social-card:hover .social-cta-arrow { transform: translateX(4px); }

  /* Scrapbook touches */
  .scrap-tape {
    position: absolute;
    width: 64px;
    height: 16px;
    background: rgba(255, 248, 184, 0.65);
    border-left: 1px dashed rgba(0,0,0,0.05);
    border-right: 1px dashed rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    pointer-events: none;
    z-index: 1;
  }
  .scrap-tape-tl { top: -7px; left: -10px; transform: rotate(-22deg); }
  .scrap-tape-tr { top: -7px; right: -10px; transform: rotate(22deg); }
  .social-postit {
    position: absolute;
    top: -14px;
    right: 16px;
    padding: 4px 10px;
    background: var(--postit-yellow);
    color: var(--hand-blue);
    font-family: 'Caveat', cursive;
    font-size: 17px;
    font-weight: 700;
    border-radius: 6px;
    transform: rotate(5deg);
    box-shadow: var(--shadow-postit);
    z-index: 5;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.05);
  }
  .social-postit em {
    color: var(--hand-red);
    font-style: normal;
    font-weight: 700;
  }
  .social-postit-mine { transform: rotate(-4deg); right: auto; left: 60px; }
  .social-postit-red {
    background: var(--postit-pink, #FFD9E2);
    color: var(--hand-red);
    transform: rotate(6deg);
  }

  /* VICTOR promo card content */
  .promo-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
  }
  .promo-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--hand-red);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .promo-card-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
  }
  .promo-card-discount {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: var(--hand-red);
    font-weight: 700;
    transform: rotate(-6deg);
    display: inline-block;
  }
  .promo-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    flex: 1;
  }

  /* Manifesto intégré sous les cards */
  .socials-note {
    max-width: 720px;
    margin: 26px auto 0;
    padding: 20px 28px 18px;
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 6px 18px rgba(0,0,0,0.06);
  }
  .socials-note::before {
    content: '"';
    position: absolute;
    top: -6px;
    left: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 60px;
    color: var(--hand);
    opacity: 0.35;
    line-height: 1;
    font-weight: 800;
  }
  .socials-note-body {
    font-family: 'Caveat', cursive;
    font-size: 19px;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .socials-note-body em {
    color: var(--hand-red);
    font-style: italic;
    font-weight: 600;
  }
  .socials-note-sig {
    text-align: right;
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 18px;
  }

  /* Footnote */
  .socials-footnote {
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--hand-blue);
    margin: 18px auto 0;
    transform: rotate(-1deg);
    line-height: 1.1;
    max-width: 1100px;
  }
  .socials-footnote em {
    color: var(--hand-red);
    font-style: normal;
    font-weight: 700;
  }
  .socials-footnote-arrow {
    color: var(--hand-red);
    margin-right: 6px;
    display: inline-block;
    transform: rotate(8deg) translateY(2px);
  }

  @media (max-width: 900px) {
    .socials-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .socials-grid { grid-template-columns: 1fr; }
    .social-postit { display: none; }
    .scrap-tape { display: none; }
  }

  /* ═══════ SKILLS (About This Victor + code) ═══════ */
  .skills-section { padding: 104px 0 16px; position: relative; justify-content: flex-start !important; }
  .skills-window {
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-window);
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
  }
  .skills-window-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-window);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .skills-window-title {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    font-family: 'JetBrains Mono', monospace;
  }
  .skills-window-title .dim { color: var(--text-tertiary); font-weight: 400; }
  .skills-window-body {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
  }
  .skills-specs {
    padding: 18px 24px 16px;
    border-right: 1px solid var(--separator);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }
  .avatar-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }
  .skills-avatar {
    width: 70px; height: 70px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-md);
    overflow: visible;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
  }
  .skills-avatar:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .skills-avatar:hover ~ .avatar-sticker,
  .avatar-wrap:hover .avatar-sticker {
    transform: rotate(8deg) translate(2px, -2px);
  }
  .avatar-sticker {
    position: absolute;
    top: -4px;
    left: 80px;
    width: 110px;
    font-family: 'Caveat', cursive;
    font-size: 16px;
    color: var(--hand-blue);
    line-height: 1.15;
    transform: rotate(4deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    text-align: left;
  }
  .avatar-sticker em {
    color: var(--hand-red);
    font-style: normal;
    font-weight: 700;
  }
  .avatar-sticker-arrow {
    display: inline-block;
    color: var(--hand-red);
    font-size: 18px;
    margin-right: 3px;
    transform: translateY(2px);
  }
  .avatar-sticker-text {
    display: inline;
  }
  @media (max-width: 768px) {
    .avatar-sticker { display: none; }
  }
  .skills-avatar .avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
  }
  .avatar-letters {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-family: 'Inter', sans-serif;
  }
  .avatar-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--green);
    border: 3px solid var(--bg-window-solid);
    box-shadow: 0 0 12px rgba(52, 199, 89, 0.5);
    z-index: 2;
  }
  .skills-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
  }
  .skills-role {
    color: var(--text-secondary);
    font-size: 12.5px;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .role-em-dash {
    color: var(--hand-red);
    font-weight: 600;
    margin: 0 2px;
  }
  .skills-tags {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .profile-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    border: 1px solid transparent;
    line-height: 1.2;
  }
  .profile-tag.tag-blue {
    background: rgba(0, 122, 255, 0.10);
    color: #0066CC;
    border-color: rgba(0, 122, 255, 0.25);
  }
  .profile-tag.tag-amber {
    background: rgba(255, 149, 0, 0.12);
    color: #B36800;
    border-color: rgba(255, 149, 0, 0.28);
  }
  body[data-theme="dark"] .profile-tag.tag-blue { background: rgba(0,122,255,0.18); color: #6FB3FF; border-color: rgba(0,122,255,0.35); }
  body[data-theme="dark"] .profile-tag.tag-amber { background: rgba(255,149,0,0.18); color: #FFB84D; border-color: rgba(255,149,0,0.35); }
  .chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    margin-right: 4px;
    letter-spacing: 0.4px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .chip-purple {
    background: rgba(175, 82, 222, 0.13);
    color: #8E36C8;
    border: 1px solid rgba(175, 82, 222, 0.22);
  }
  .chip-orange {
    background: rgba(255, 149, 0, 0.13);
    color: #C06800;
    border: 1px solid rgba(255, 149, 0, 0.22);
  }
  body[data-theme="dark"] .chip-purple { color: #D7A4FF; border-color: rgba(175,82,222,0.38); }
  body[data-theme="dark"] .chip-orange { color: #FFC373; border-color: rgba(255,149,0,0.38); }
  .big-num {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--accent);
    margin-right: 3px;
    display: inline-flex;
    align-items: baseline;
  }
  .big-num-prefix {
    color: var(--accent);
    margin-right: 1px;
  }
  .chip-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-right: 4px;
    line-height: 1.2;
  }
  .chip-flag .flag {
    font-size: 13px;
    line-height: 1;
  }
  body[data-theme="dark"] .chip-flag {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(52, 199, 89, 0.13);
    color: #1E8A3E;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid rgba(52, 199, 89, 0.28);
    line-height: 1.4;
  }
  body[data-theme="dark"] .status-pill { color: #5BD874; }

  /* CTA post-it rouge — Calendly */
  .profile-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #FFE9E5, #FFD3CD);
    color: #B5263A;
    border: 1px solid rgba(181, 38, 58, 0.25);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow:
      0 1px 2px rgba(181, 38, 58, 0.10),
      0 6px 14px rgba(181, 38, 58, 0.12);
    transform: rotate(-1.5deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .profile-cta:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 1px 2px rgba(181, 38, 58, 0.10),
      0 14px 24px rgba(181, 38, 58, 0.20);
  }
  .profile-cta-icon { font-size: 14px; line-height: 1; }
  .profile-cta-arrow {
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease;
  }
  .profile-cta:hover .profile-cta-arrow { transform: translateX(3px); }
  body[data-theme="dark"] .profile-cta {
    background: linear-gradient(135deg, rgba(181,38,58,0.20), rgba(181,38,58,0.12));
    color: #FF8C9C;
    border-color: rgba(255,140,156,0.30);
  }

  /* Stagger fade-in animation (déclenchée au scroll-enter via JS) */
  .stagger-fx {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .stagger-fx.stagger-in {
    opacity: 1;
    transform: translateY(0);
  }
  .skills-list {
    width: 100%;
    text-align: left;
    border-top: 1px solid var(--separator);
    margin-bottom: 8px;
  }
  .skills-list > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--separator);
    font-size: 12.5px;
    min-height: 28px;
    align-items: center;
  }
  .skills-list dt {
    color: var(--text-secondary);
    font-weight: 500;
  }
  .skills-list dd {
    color: var(--text);
    font-weight: 500;
  }
  .skills-handnote {
    font-family: 'Caveat', cursive;
    font-size: 17px;
    color: var(--hand-blue);
    transform: rotate(-2deg);
    line-height: 1;
    margin-top: 4px;
  }
  .skills-handnote em {
    color: var(--hand-red);
    font-style: normal;
  }
  .skills-code {
    background: #0E1116;
    display: flex;
    flex-direction: column;
  }
  body[data-theme="dark"] .skills-code { background: #0A0C10; }
  .code-tab-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .code-tab {
    padding: 9px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: #161B22;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .code-tab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 6px rgba(255, 149, 0, 0.5);
  }
  .code-tab-meta {
    margin-left: auto;
    padding-right: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
  }
  .code-block {
    padding: 16px 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #E6EDF3;
    flex: 1;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    min-height: 0;
  }
  .code-comment { color: #8B949E; font-style: italic; }
  .code-keyword { color: #FF7B72; }
  .code-class { color: #D2A8FF; }
  .code-string { color: #A5D6FF; }
  .code-prop { color: #79C0FF; }
  .code-num { color: #79C0FF; }
  .code-block .tw-cursor {
    display: inline-block;
    width: 8px;
    background: #E6EDF3;
    margin-left: 1px;
    animation: blink 1s steps(1) infinite;
    color: transparent;
  }

  @media (max-width: 768px) {
    .skills-window-body { grid-template-columns: 1fr; }
    .skills-specs { border-right: none; border-bottom: 1px solid var(--separator); }
    .skills-list > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
    .skills-list dt { font-size: 12px; }
    .code-block { font-size: 12px; padding: 18px 20px; }
  }

  /* ═══════ SCRAPBOOK (post-it, scotch, manuscrit) ═══════ */
  .scrapbook-postit {
    position: absolute;
    background: var(--postit-yellow);
    padding: 14px 16px 16px;
    box-shadow: var(--shadow-postit);
    max-width: 200px;
    font-family: 'Kalam', cursive;
    font-size: 14px;
    color: #1D1D1F;
    line-height: 1.4;
    z-index: 3;
    cursor: default;
  }
  .scrapbook-postit.yellow { background: var(--postit-yellow); }
  .scrapbook-postit.pink { background: var(--postit-pink); }
  .scrapbook-postit.green { background: var(--postit-green); }
  .scrapbook-postit strong {
    display: block;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #B5263A;
  }
  .scrapbook-postit .small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
  }

  .scrapbook-tape::before {
    content: "";
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-2.5deg);
    width: 84px; height: 22px;
    background: rgba(255, 244, 100, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    z-index: 4;
    border-radius: 1px;
  }

  .transition-note {
    text-align: center;
    margin: -16px auto 24px;
    font-family: 'Caveat', cursive;
    font-weight: 600;
    color: var(--hand);
    font-size: 26px;
    transform: rotate(-1.5deg);
    display: block;
    line-height: 1.1;
  }
  .transition-note .red { color: var(--hand-red); }

  @media (max-width: 768px) {
    .scrapbook-postit { display: none; }
    .scrapbook-tape::before { width: 60px; height: 18px; }
    .transition-note { font-size: 20px; }
  }

  /* ═══════ MON STACK ═══════ */
  .stack-section { padding: 56px 0; position: relative; }
  .stack-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  .stack-tile {
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
    position: relative;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .stack-tile:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.05),
      0 14px 28px rgba(0,0,0,0.10);
    border-color: var(--border-strong);
  }
  .stack-tile-arrow {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 15px;
    color: var(--text-tertiary);
    transition: all 0.25s;
    font-weight: 600;
  }
  .stack-tile:hover .stack-tile-arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
  }
  /* Claude Code = featured (gradient orange Anthropic, sans span2) */
  .stack-tile.featured {
    background: linear-gradient(160deg, var(--bg-window-solid) 0%, rgba(217, 119, 87, 0.07) 100%);
    border: 1px solid rgba(217, 119, 87, 0.22);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.05),
      0 10px 22px rgba(217, 119, 87, 0.10);
  }
  body[data-theme="dark"] .stack-tile.featured {
    background: linear-gradient(160deg, var(--bg-window-solid) 0%, rgba(217, 119, 87, 0.16) 100%);
  }
  /* Badges */
  .stack-badge {
    position: absolute;
    top: -14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 600;
    background: var(--bg-window-solid);
    color: var(--hand-red);
    transform: rotate(4deg);
    box-shadow: var(--shadow-postit);
    border: 1px solid var(--border);
    white-space: nowrap;
    line-height: 1;
  }
  .stack-badge.promo-badge {
    background: var(--postit-yellow);
    color: #1D1D1F;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 5px 8px 4px;
    border-radius: 5px;
    transform: rotate(-3deg);
    line-height: 1.15;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .stack-badge.promo-badge .badge-sub {
    display: block;
    font-size: 9px;
    opacity: 0.65;
    font-weight: 600;
  }
  /* Icon container — squircle macOS Big Sur */
  .stack-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.06),
      0 4px 10px rgba(0,0,0,0.10),
      inset 0 0.5px 0 rgba(255,255,255,0.20);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  .stack-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
  }
  /* Brand tints per tile */
  .stack-icon.icon-wisewand {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .stack-icon.icon-wisewand img { width: 84%; height: 84%; border-radius: 8px; }
  .stack-icon.icon-claude { background: #D97757; }
  .stack-icon.icon-claude img { filter: brightness(0) invert(1); width: 58%; height: 58%; }
  .stack-icon.icon-haloscan {
    background: transparent;
    box-shadow:
      0 1px 1px rgba(0,0,0,0.06),
      0 4px 10px rgba(52, 168, 88, 0.22);
  }
  .stack-icon.icon-haloscan img { width: 100%; height: 100%; }
  .stack-icon.icon-gsc { background: linear-gradient(135deg, #4285F4 0%, #34A853 100%); }
  .stack-icon.icon-gsc img { filter: brightness(0) invert(1); width: 58%; height: 58%; }
  .stack-icon.icon-wp { background: #21759B; }
  .stack-icon.icon-wp img { filter: brightness(0) invert(1); width: 62%; height: 62%; }
  /* Titre + para */
  .stack-tile h3 {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .stack-tile p {
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .stack-tile p strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  /* Touches scrapbook */
  .scrapbook-tape {
    position: absolute;
    top: -8px;
    left: -10px;
    transform: rotate(-32deg);
    width: 60px;
    height: 16px;
    background: rgba(255, 248, 184, 0.62);
    border-left: 1px dashed rgba(0,0,0,0.05);
    border-right: 1px dashed rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .scrapbook-tape:hover {
    transform: rotate(-32deg) scale(1.08);
    background: rgba(255, 240, 130, 0.85);
  }
  .stack-handnote {
    position: absolute;
    bottom: -6px;
    right: 16px;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--hand-blue);
    transform: rotate(-3deg);
    pointer-events: none;
    background: var(--bg-window-solid);
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1.2;
  }
  .stack-title-note {
    position: absolute;
    top: -8px;
    right: -160px;
    transform: rotate(-4deg);
    pointer-events: none;
  }
  /* Footnote scrapbook sous la grille — trust signal */
  .stack-footnote {
    max-width: 1200px;
    margin: 22px auto 0;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 20px;
    color: var(--hand-blue);
    transform: rotate(-1deg);
    line-height: 1;
    pointer-events: none;
  }
  .stack-footnote .stack-footnote-arrow {
    display: inline-block;
    margin-right: 8px;
    color: var(--hand-red);
    transform: rotate(8deg) translateY(2px);
    display: inline-block;
  }
  .stack-footnote em {
    color: var(--hand-red);
    font-style: normal;
  }
  @media (max-width: 768px) {
    .stack-footnote { font-size: 17px; margin-top: 16px; padding: 0 16px; }
  }
  @media (max-width: 1100px) {
    .stack-grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
  }
  @media (max-width: 768px) {
    .stack-grid { grid-template-columns: repeat(2, 1fr); max-width: 520px; gap: 14px; }
    .stack-title-note { display: none; }
    .scrapbook-tape { display: none; }
    .stack-handnote { display: none; }
  }
  @media (max-width: 480px) {
    .stack-grid { grid-template-columns: 1fr; max-width: 320px; }
  }

  /* ═══════ NOTE PERSO en milieu de page (style Tobias) ═══════ */
  .personal-note-section { padding: 64px 0; }
  .personal-note {
    max-width: 620px;
    margin: 0 auto;
    padding: 32px 40px;
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 16px;
    position: relative;
    box-shadow: var(--shadow-md);
  }
  .personal-note::before {
    content: '"';
    position: absolute;
    top: -8px;
    left: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 80px;
    color: var(--hand);
    opacity: 0.4;
    line-height: 1;
    font-weight: 800;
  }
  .personal-note-body {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 16px;
  }
  .personal-note-sig {
    text-align: right;
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 20px;
  }

  /* ═══════ FOOTER ═══════ */
  footer {
    border-top: 1px solid var(--separator);
    padding: 56px 0 28px;
    margin-top: 60px;
    background: var(--bg-elevated);
    position: relative;
  }
  .footer-postit {
    position: absolute;
    top: -16px;
    right: 60px;
    background: var(--postit-pink);
    padding: 12px 16px;
    transform: rotate(3deg);
    box-shadow: var(--shadow-postit);
    font-family: 'Kalam', cursive;
    font-size: 13px;
    color: #1D1D1F;
    max-width: 180px;
    line-height: 1.3;
  }
  body[data-theme="dark"] .footer-postit { color: #fff; }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }
  .footer-brand-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .footer-tagline {
    color: var(--text-secondary);
    font-size: 13.5px;
    max-width: 320px;
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .footer-tagline strong {
    color: var(--text);
    font-weight: 700;
  }
  .footer-tagline-em {
    font-family: 'Caveat', cursive;
    font-size: 17px;
    color: var(--hand-red);
    font-weight: 600;
    letter-spacing: 0;
  }
  .footer-tagline-hand-blue {
    font-family: 'Caveat', cursive;
    font-size: 17px;
    color: var(--hand-blue);
    font-weight: 600;
    letter-spacing: 0;
  }
  .footer-tagline-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text);
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    vertical-align: 1px;
  }
  .footer-tagline-pill-red {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--hand-red);
    padding: 1px 7px;
    background: rgba(181, 38, 58, 0.10);
    border: 1px solid rgba(181, 38, 58, 0.25);
    border-radius: 4px;
    vertical-align: 1px;
  }
  body[data-theme="dark"] .footer-tagline-pill-red {
    color: #FF8C9C;
    background: rgba(181, 38, 58, 0.20);
    border-color: rgba(255, 140, 156, 0.30);
  }
  .footer-tagline-em-red {
    color: var(--hand-red);
    font-style: italic;
    font-weight: 700;
  }
  body[data-theme="dark"] .footer-tagline-em-red { color: #FF8C9C; }
  body[data-theme="dark"] .footer-tagline-mono {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }
  .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--text);
    color: var(--bg);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
    letter-spacing: -0.01em;
  }
  .footer-cta:hover { transform: translateY(-2px); }
  .footer-cta-arrow { transition: transform 0.2s ease; display: inline-block; }
  .footer-cta:hover .footer-cta-arrow { transform: translateX(3px); }
  .footer-tag {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: rgba(0, 122, 255, 0.12);
    color: var(--accent);
    text-transform: uppercase;
    vertical-align: 1px;
  }
  .footer-tag.tag-yellow {
    background: rgba(255, 149, 0, 0.13);
    color: #B36800;
  }
  body[data-theme="dark"] .footer-tag.tag-yellow { color: #FFB84D; }
  .footer-col h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 6px; }
  .footer-col a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
  }
  .footer-col a:hover { color: var(--text); }
  .footer-bottom {
    border-top: 1px solid var(--separator);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--text-tertiary);
    font-size: 12px;
  }
  .easter-hint {
    text-align: center;
    margin-top: 16px;
    width: 100%;
    font-family: 'Caveat', cursive;
    color: var(--hand);
    font-size: 18px;
  }
  .easter-hint kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
  }

  /* ═══════ TOAST ═══════ */
  .toast {
    position: fixed;
    top: 56px;
    right: 16px;
    background: var(--bg-window);
    backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: var(--shadow-window);
    z-index: 9999;
    max-width: 320px;
    transform: translateX(calc(100% + 32px));
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .toast.show { transform: translateX(0); }
  .toast-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--green), #00C5A0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .toast-body { flex: 1; }
  .toast-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .toast-msg { font-size: 12px; color: var(--text-secondary); }

  /* ═══════ SPOTLIGHT ═══════ */
  .spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
  }
  .spotlight-overlay.active { display: flex; }
  .spotlight-box {
    background: var(--bg-window);
    backdrop-filter: saturate(180%) blur(40px);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 580px;
    box-shadow: var(--shadow-window);
    overflow: hidden;
  }
  .spotlight-input {
    padding: 16px 20px;
    border: none;
    background: transparent;
    width: 100%;
    color: var(--text);
    font-size: 22px;
    outline: none;
    font-family: inherit;
  }
  .spotlight-results { border-top: 1px solid var(--separator); padding: 8px; }
  .spotlight-result {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.1s;
  }
  .spotlight-result.selected { background: var(--accent); color: white; }
  .spotlight-result.selected .spotlight-meta { color: rgba(255, 255, 255, 0.7); }
  .spotlight-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .spotlight-result.selected .spotlight-icon { background: rgba(255, 255, 255, 0.2); }
  .spotlight-title { font-size: 14px; font-weight: 500; }
  .spotlight-meta { font-size: 12px; color: var(--text-secondary); }

  @media (max-width: 768px) {
    .menu-bar { display: none; }
    .nav-window { margin: 0 16px; padding: 10px 14px; }
    .nav-annotation { display: none; }
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-title { font-size: 13px; }
    .nav-title kbd { display: none; }
    .hero { padding: 48px 0 32px; }
    .hero-postit { display: none; }
    .section { padding: 56px 0; }
    .section-title-note { display: none; }
    .cta-side-note { display: none; }
    .h1-side-note { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-postit { display: none; }
    .promo-note { right: 16px; top: -48px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     SERVICES — Carrousel HEXAGONAL mono-card (slide L/R)
     Une seule card visible à la fois, en hexagone, label manuscrit
     latéral "N/4 — Nom du service" en rouge + bleu.
     ═══════════════════════════════════════════════════════════════════ */
  .services-carousel-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 0 4px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1);
  }
  /* Quand on a un carrousel hexagonal, on cache l'ancienne note "à toi de choisir !"
     (le label latéral "N/4 — Nom" la remplace avantageusement) */
  #services .services-handnote { display: none; }
  .services-carousel-wrap.revealed {
    opacity: 1;
    transform: none;
  }

  .services-carousel {
    position: relative;
    width: 100%;
    height: 470px;
    outline: none;
    user-select: none;
    overflow: visible;
  }
  .services-carousel:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
    border-radius: 16px;
  }

  .carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Chaque slot occupe la pleine zone, centré.
     Une seule slot est visible (.is-active). Les autres sont cachées
     hors écran à gauche ou à droite selon la direction. */
  .carousel-slot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0);
    z-index: 1;
    transition:
      opacity 0.45s ease,
      transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s linear 0.55s;
  }
  .carousel-slot.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 3;
    transition:
      opacity 0.45s ease,
      transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .carousel-slot.is-leaving {
    opacity: 0;
    visibility: visible;
    z-index: 2;
    transition:
      opacity 0.45s ease,
      transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* Direction = "next" → la nouvelle vient de droite, l'ancienne part vers la gauche */
  .services-carousel[data-dir="next"] .carousel-slot.is-active {
    animation: slideInRight 0.55s cubic-bezier(0.34, 1.3, 0.5, 1) both;
  }
  .services-carousel[data-dir="next"] .carousel-slot.is-leaving {
    transform: translateX(-90px);
  }
  /* Direction = "prev" → la nouvelle vient de gauche, l'ancienne part vers la droite */
  .services-carousel[data-dir="prev"] .carousel-slot.is-active {
    animation: slideInLeft 0.55s cubic-bezier(0.34, 1.3, 0.5, 1) both;
  }
  .services-carousel[data-dir="prev"] .carousel-slot.is-leaving {
    transform: translateX(90px);
  }
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(90px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-90px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* ─── Card classique (rectangle arrondi + scotch préservés) ─── */
  .services-carousel .app-card {
    width: 540px;
    height: auto;
    min-height: 440px;
    padding: 28px 32px 24px;
  }
  /* Hover : pas de translation sur card carrousel (sinon ça casse le slide).
     On amplifie juste l'ombre. */
  .services-carousel .app-card:hover {
    transform: none;
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.05),
      0 16px 40px rgba(0,0,0,0.1),
      0 30px 70px rgba(0, 122, 255, 0.08);
  }
  /* Pas d'animation reveal sur les cards du carrousel
     (le slot gère son propre slide-in via les keyframes) */
  .services-carousel .app-card,
  .services-carousel .app-card.reveal {
    animation: none !important;
    opacity: 1;
  }
  /* Compacter le contenu pour tenir dans 460px de hauteur */
  .services-carousel .app-card > .app-meta {
    margin-top: 14px;
    padding-top: 14px;
  }
  .services-carousel .card-includes { margin-bottom: 14px; gap: 6px; }
  .services-carousel .card-includes li { font-size: 13.5px; }
  .services-carousel .app-card h3 { font-size: 21px; margin-bottom: 4px; }
  .services-carousel .card-sub { font-size: 14px; margin-bottom: 12px; }
  .services-carousel .card-process-line { margin-bottom: 14px; padding: 10px 12px; }
  .services-carousel .card-head { margin-bottom: 12px; }
  /* Sub-price line cachée en mode carrousel pour gagner ~30px de hauteur
     (info accessoire, déjà présente sur le call de découverte) */
  .services-carousel .card-price-sub { display: none; }

  /* ─── Icône thématique animé sur la droite de chaque card ───
     Positionné dans la zone vide à droite de la liste d'includes
     (les bullets ✓ font ~250px max, l'espace droite est libre) */
  .card-anim-icon {
    position: absolute;
    right: 32px;
    top: 280px;
    font-size: 42px;
    line-height: 1;
    opacity: 0.18;
    transition:
      opacity 0.45s ease,
      transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.08));
    transform-origin: center center;
  }
  .app-card:hover .card-anim-icon {
    opacity: 1;
  }
  /* Animations par card (déclenchées au hover de la card) */
  .carousel-slot[data-idx="0"] .app-card:hover .card-anim-icon {
    animation: animScanLoupe 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .carousel-slot[data-idx="1"] .app-card:hover .card-anim-icon {
    animation: animWritePen 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .carousel-slot[data-idx="2"] .app-card:hover .card-anim-icon {
    animation: animChartUp 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .carousel-slot[data-idx="3"] .app-card:hover .card-anim-icon {
    animation: animTossCap 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }
  /* CARD 1 — Audit : clipboard qui se penche et coche des items
     (petit kick + tilt + bounce) */
  @keyframes animScanLoupe {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    25%  { transform: translate(-2px, -6px) rotate(-8deg) scale(1.08); }
    50%  { transform: translate(0, 2px) rotate(4deg) scale(1.04); }
    75%  { transform: translate(2px, -4px) rotate(-3deg) scale(1.06); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  }
  /* CARD 2 — Rédige : plume qui écrit (oscillation horizontale + tilt) */
  @keyframes animWritePen {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-7px, -1px) rotate(-8deg); }
    50%  { transform: translate(6px, 1px) rotate(6deg); }
    75%  { transform: translate(-4px, 0) rotate(-4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  /* CARD 3 — Pilote : graphique qui monte (échelle + translation up) */
  @keyframes animChartUp {
    0%   { transform: translate(0, 0) scale(1) rotate(0); }
    50%  { transform: translate(2px, -10px) scale(1.18) rotate(-3deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0); }
  }
  /* CARD 4 — Forme : toque/casquette qui saute (bounce vertical) */
  @keyframes animTossCap {
    0%   { transform: translate(0, 0) rotate(0deg); }
    35%  { transform: translate(0, -18px) rotate(-20deg); }
    65%  { transform: translate(0, -22px) rotate(20deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  /* Au hover, l'icône arrière reste légèrement visible même sans card hover
     (petit hint visuel) */
  .services-carousel .app-card:not(:hover) .card-anim-icon {
    animation: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .card-anim-icon { animation: none !important; }
  }

  /* ─── Label manuscrit "N/4 — Nom du service" sur le côté GAUCHE ───
     Positionné en HAUT du carrousel (pas au centre vertical, sinon
     il chevauche les flèches de navigation qui sont centrées) */
  .carousel-label {
    position: absolute;
    top: 24px;
    left: 8px;
    transform: rotate(-3deg);
    transform-origin: left top;
    width: 220px;
    max-width: 220px;
    pointer-events: none;
    z-index: 4;
    font-family: 'Caveat', cursive;
    line-height: 0.95;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.65);
  }
  .carousel-label .cl-num {
    display: block;
    font-size: 64px;
    font-weight: 700;
    color: var(--hand-red);
    transform: rotate(-2deg);
    transform-origin: left center;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .carousel-label .cl-name {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: var(--hand);
    transform: rotate(1deg);
    line-height: 1.05;
    margin-top: 4px;
    word-wrap: break-word;
  }
  /* Flèche manuscrite qui pointe du label vers la card */
  .carousel-label::after {
    content: "";
    position: absolute;
    right: -44px;
    top: 60%;
    width: 38px;
    height: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none'><path d='M2 16 C 14 8, 28 12, 44 18' stroke='%23B5263A' stroke-width='2.4' stroke-linecap='round' fill='none'/><path d='M36 12 L 44 18 L 35 23' stroke='%23B5263A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
  }
  /* Label change avec un petit fade-up à chaque transition */
  .carousel-label.flicker .cl-num,
  .carousel-label.flicker .cl-name {
    animation: labelFlicker 0.5s cubic-bezier(0.34, 1.3, 0.5, 1) both;
  }
  @keyframes labelFlicker {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* ─── Flèches de navigation gauche/droite ─── */
  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 1px 2px rgba(0,0,0,0.08),
      0 10px 28px rgba(0,0,0,0.1);
    z-index: 10;
    transition:
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.25s,
      box-shadow 0.25s;
    padding-bottom: 3px;
  }
  /* Nav arrows positionnées au bord externe du wrap (l'espace est libre
     puisque le label est désormais EN HAUT et plus au centre vertical) */
  .carousel-nav.prev { left: 12px; right: auto; }
  .carousel-nav.next { left: auto; right: 12px; }
  .carousel-nav:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.08);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 2px 4px rgba(0,0,0,0.1),
      0 16px 38px rgba(0, 122, 255, 0.18);
    color: var(--accent);
  }
  .carousel-nav:active {
    transform: translateY(-50%) scale(0.95);
    transition: transform 0.1s;
  }

  /* ─── Dots de navigation ─── */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    position: relative;
    z-index: 6;
  }
  .carousel-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .carousel-dots button:hover {
    background: rgba(0, 122, 255, 0.4);
    transform: scale(1.2);
  }
  .carousel-dots button.active {
    background: var(--accent);
    border-color: var(--accent);
    width: 26px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.4);
  }

  /* ─── Hint manuscrit "← glisse / tape ← → →" ─── */
  .carousel-hint {
    text-align: center;
    margin-top: 14px;
    font-family: 'Shadows Into Light Two', cursive;
    font-size: 15px;
    color: var(--text-tertiary);
    pointer-events: none;
    opacity: 0.7;
  }

  /* Anciens compteurs : neutralisés (le label latéral fait le job) */
  .carousel-counter { display: none; }

  /* ─── Responsive ─── */
  @media (max-width: 1100px) {
    .services-carousel { height: 500px; }
    .carousel-label { left: 12px; max-width: 220px; }
    .carousel-label .cl-num { font-size: 68px; }
    .carousel-label .cl-name { font-size: 30px; }
    .services-carousel .app-card { width: 440px; padding: 26px 50px 22px; }
  }
  @media (max-width: 900px) {
    .services-carousel-wrap { padding: 16px 0 8px; max-width: 100%; }
    .services-carousel { height: auto; min-height: 540px; }
    .carousel-stage { height: auto; min-height: 540px; }
    /* Sur mobile, on garde le slot en relative MAIS on cache complètement
       les slots non actifs (display: none) pour éviter qu'ils prennent
       540px chacun en hauteur (section qui devient infinie) */
    .carousel-slot { position: relative; inset: auto; min-height: 540px; }
    .carousel-slot:not(.is-active):not(.is-leaving) {
      display: none;
    }
    /* Label passe au-dessus de la card sur mobile */
    .carousel-label {
      position: relative;
      top: auto; left: auto;
      width: 100%;
      transform: rotate(-2deg);
      max-width: 100%;
      text-align: center;
      margin-bottom: 8px;
    }
    .carousel-label .cl-num { font-size: 56px; }
    .carousel-label .cl-name { font-size: 26px; }
    .carousel-label::after { display: none; }
    .services-carousel .app-card { width: 100%; max-width: 420px; padding: 26px 44px 20px; }
    .carousel-nav { width: 44px; height: 44px; font-size: 22px; }
    .carousel-nav.prev { left: -4px; }
    .carousel-nav.next { right: -4px; }
  }
  @media (max-width: 560px) {
    .carousel-nav { width: 40px; height: 40px; font-size: 20px; }
    .carousel-label .cl-num { font-size: 48px; }
    .carousel-label .cl-name { font-size: 22px; }
    .services-carousel .app-card { padding: 24px 38px 18px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel-slot,
    .services-carousel-wrap,
    .carousel-nav,
    .carousel-dots button,
    .carousel-label .cl-num,
    .carousel-label .cl-name {
      transition: opacity 0.2s ease !important;
      animation: none !important;
    }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .carousel-slot,
    .services-carousel-wrap,
    .carousel-nav,
    .carousel-dots button {
      transition: opacity 0.2s ease !important;
    }
    .carousel-slot.pos-back { filter: none; }
    .carousel-slot.pos-right,
    .carousel-slot.pos-left { filter: none; }
  }

/* --- styles from body (services.html had 2 <style> blocks) --- */

.services-page-hero {
    padding: 56px 0 0 !important;
  }
  /* Variant underline bleu (pour les services — la home utilise jaune) */
  .underline-hand.underline-blue::after {
    background: rgba(0, 122, 255, 0.22);
    opacity: 1;
  }
  body[data-theme="dark"] .underline-hand.underline-blue::after {
    background: rgba(0, 122, 255, 0.38);
  }
  .services-page-breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 18px;
    text-align: center;
  }
  .services-page-breadcrumb a {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s;
  }
  .services-page-breadcrumb a:hover { color: var(--accent); }
  .services-page-breadcrumb strong {
    color: var(--text);
    font-weight: 700;
  }
  .services-quick-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
  }
  .services-quick-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .services-quick-nav a:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .qnav-emoji { font-size: 16px; line-height: 1; }
  .qnav-audit:hover { border-color: #06B6D4; color: #06B6D4; }
  .qnav-redaction:hover { border-color: #0066CC; color: #0066CC; }
  .qnav-automatisation:hover { border-color: #FF6B6B; color: #FF6B6B; }
  .qnav-formation:hover { border-color: #8E36C8; color: #8E36C8; }

  .service-section {
    padding: 112px 0 4px;
    justify-content: flex-start !important;
    position: relative;
  }
  .service-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    margin-right: 10px;
  }
  .service-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
  }
  .service-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    justify-content: center;
  }
  .service-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 6px;
    text-align: center;
  }
  .service-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14.5px;
    margin-bottom: 14px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
  }
  /* Window macOS wrapper signature */
  .service-window {
    background: var(--bg-window-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-window);
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .service-window-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 14px;
    background: var(--bg-window);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .service-window-title {
    flex: 1;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
  }
  .service-window-title .dim { color: var(--text-tertiary); font-weight: 400; }
  .service-window-body { padding: 14px 22px 14px; }
  .service-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .service-left h3 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 6px;
    margin-top: 12px;
  }
  .service-left h3:first-child { margin-top: 0; }
  .service-deliverables { list-style: none; padding: 0; }
  .service-deliverables li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-secondary);
  }
  .service-check {
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .service-fitcheck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .service-fitcheck-col h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .service-fitcheck-col.for h4 { color: #1E8A3E; }
  .service-fitcheck-col.notfor h4 { color: var(--hand-red); }
  .service-fitcheck-col p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
  }

  .service-price-card {
    background: linear-gradient(165deg, var(--bg-window-solid) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 6px 16px rgba(0,0,0,0.06);
    position: relative;
  }
  /* Scotch jaune scrap sur la price card */
  .service-price-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 60px;
    height: 16px;
    background: rgba(255, 248, 184, 0.7);
    border-left: 1px dashed rgba(0,0,0,0.05);
    border-right: 1px dashed rgba(0,0,0,0.05);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transform: rotate(-22deg);
    pointer-events: none;
  }
  .service-price-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .service-price-amount {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text);
    display: inline;
  }
  .service-price-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 4px;
  }
  .service-price-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .service-price-note {
    font-family: 'Caveat', cursive;
    font-size: 15px;
    color: var(--hand-red);
    transform: rotate(-2deg);
    display: inline-block;
    margin-bottom: 10px;
  }
  .service-delivery {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: rgba(52, 199, 89, 0.12);
    color: #1E8A3E;
    border: 1px solid rgba(52, 199, 89, 0.25);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 12px;
  }
  body[data-theme="dark"] .service-delivery { color: #5BD874; }
  .service-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--text);
    color: var(--bg);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .service-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
  .service-process {
    border-top: 1px solid var(--separator);
    padding-top: 10px;
  }
  .service-process-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
  }
  .service-process ol {
    list-style: none;
    padding: 0;
    counter-reset: process-step;
  }
  .service-process li {
    counter-increment: process-step;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .service-process li::before {
    content: counter(process-step);
    width: 18px; height: 18px;
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .service-audit .service-pill { background: rgba(6, 182, 212, 0.13); color: #0891B2; border-color: rgba(6, 182, 212, 0.25); }
  .service-redaction .service-pill { background: rgba(0, 102, 204, 0.13); color: #0066CC; border-color: rgba(0, 102, 204, 0.25); }
  .service-automatisation .service-pill { background: rgba(255, 107, 107, 0.13); color: #E53E3E; border-color: rgba(255, 107, 107, 0.25); }
  .service-formation .service-pill { background: rgba(142, 54, 200, 0.13); color: #8E36C8; border-color: rgba(142, 54, 200, 0.25); }
  body[data-theme="dark"] .service-audit .service-pill { color: #67E8F9; }
  body[data-theme="dark"] .service-redaction .service-pill { color: #66B3FF; }
  body[data-theme="dark"] .service-automatisation .service-pill { color: #FFA0A0; }
  body[data-theme="dark"] .service-formation .service-pill { color: #D7A4FF; }

  .service-automatisation { position: relative; }
  .service-popular-postit {
    position: absolute;
    top: 24px;
    right: 4%;
    padding: 6px 12px;
    background: var(--postit-yellow);
    color: var(--hand-red);
    font-family: 'Caveat', cursive;
    font-size: 20px;
    font-weight: 700;
    border-radius: 6px;
    transform: rotate(7deg);
    box-shadow: var(--shadow-postit);
    z-index: 10;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.05);
  }
  .service-crosslink {
    text-align: center;
    margin: 10px auto 0;
    font-family: 'Caveat', cursive;
    font-size: 16px;
    color: var(--hand-blue);
    transform: rotate(-1deg);
  }

  .service-crosslink a {
    color: var(--hand-red);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed var(--hand-red);
  }
  .service-crosslink a:hover { border-style: solid; }

  .services-cta-section {
    padding: 80px 0;
    justify-content: center !important;
    text-align: center;
  }
  .services-cta-box {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 36px;
    background: linear-gradient(160deg, var(--bg-window-solid) 0%, rgba(0, 122, 255, 0.06) 100%);
    border: 1px solid rgba(0, 122, 255, 0.18);
    border-radius: 20px;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 14px 36px rgba(0, 122, 255, 0.10);
  }
  body[data-theme="dark"] .services-cta-box {
    background: linear-gradient(160deg, var(--bg-window-solid) 0%, rgba(0, 122, 255, 0.14) 100%);
  }
  .services-cta-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .services-cta-h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .services-cta-sub {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .services-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--text);
    color: var(--bg);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s;
    letter-spacing: -0.01em;
  }
  .services-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.20);
  }
  .services-cta-handnote {
    margin-top: 18px;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--hand-blue);
    transform: rotate(-1deg);
    line-height: 1.1;
  }
  .services-cta-handnote em {
    color: var(--hand-red);
    font-style: normal;
    font-weight: 700;
  }

  /* ═══════ HEADER SCRAPBOOK — marker rouge gauche + post-it jaune droite ═══════ */
  .services-hero-margin-note {
    position: absolute;
    top: 138px;
    left: 36px;
    font-family: 'Caveat', cursive;
    color: var(--hand-red);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    transform: rotate(-7deg);
    z-index: 2;
    max-width: 180px;
    pointer-events: none;
    user-select: none;
    text-align: left;
  }
  .services-hero-margin-note .mn-line-1 {
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .services-hero-margin-note .mn-line-2 {
    display: block;
    font-size: 24px;
    opacity: 0.92;
    transform: rotate(2deg) translateX(6px);
    margin-bottom: 2px;
  }
  .services-hero-margin-note .mn-arrow {
    display: block;
    margin-top: 4px;
    margin-left: 26px;
    width: 58px;
    height: 38px;
    color: var(--hand-red);
    opacity: 0.75;
    transform: rotate(6deg);
    overflow: visible;
  }

  .services-hero-postit {
    position: absolute;
    top: 122px;
    right: 40px;
    background: #FFF6A8;
    background-image:
      linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 40%),
      linear-gradient(180deg, rgba(0,0,0,0.025) 0%, transparent 100%),
      radial-gradient(ellipse at 20% 110%, rgba(0,0,0,0.04), transparent 60%);
    padding: 22px 20px 18px;
    transform: rotate(5deg);
    box-shadow:
      0 1px 1px rgba(0,0,0,0.1),
      0 8px 18px rgba(0,0,0,0.14),
      0 20px 40px rgba(0,0,0,0.1);
    max-width: 210px;
    font-family: 'Shadows Into Light Two', cursive;
    color: #1D1D1F;
    line-height: 1.35;
    z-index: 3;
    text-decoration: none;
    display: block;
    border-radius: 4px 2px 5px 3px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
  }
  .services-hero-postit::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 22px; height: 22px;
    background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.03) 40%, transparent 50%);
    border-radius: 0 0 0 14px;
    pointer-events: none;
  }
  .services-hero-postit:hover {
    transform: rotate(2deg) translateY(-4px) scale(1.04);
    box-shadow:
      0 2px 2px rgba(0,0,0,0.12),
      0 16px 28px rgba(0,0,0,0.18),
      0 26px 50px rgba(0,0,0,0.12);
  }
  .services-hero-postit .sp-tape {
    position: absolute;
    background: rgba(255, 240, 90, 0.55);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    pointer-events: none;
  }
  .services-hero-postit .sp-tape-l { top: -10px; left: 10px; width: 50px; height: 18px; transform: rotate(-12deg); }
  .services-hero-postit .sp-tape-r { top: -10px; right: 8px; width: 48px; height: 18px; transform: rotate(8deg); }
  .services-hero-postit strong {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 700;
    color: var(--hand-red);
    margin-bottom: 6px;
    line-height: 1;
    letter-spacing: -0.01em;
    transform: rotate(-1deg);
  }
  .services-hero-postit-body {
    display: block;
    font-family: 'Shadows Into Light Two', cursive;
    font-size: 17px;
    color: #2A2A2A;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
    line-height: 1.3;
  }
  .services-hero-postit-cta {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-size: 19px;
    font-weight: 700;
    color: var(--hand-red);
    transform: rotate(-1deg);
  }

  /* Responsive : on resserre puis on cache sous 800px */
  @media (max-width: 1100px) {
    .services-hero-margin-note { left: 10px; max-width: 140px; font-size: 24px; }
    .services-hero-margin-note .mn-line-2 { font-size: 20px; }
    .services-hero-margin-note .mn-arrow { width: 48px; height: 32px; margin-left: 18px; }
    .services-hero-postit { right: 14px; max-width: 180px; padding: 18px 16px 14px; }
    .services-hero-postit strong { font-size: 20px; }
    .services-hero-postit-body { font-size: 16px; }
  }
  @media (max-width: 800px) {
    .service-body { grid-template-columns: 1fr; }
    .service-price-card { position: static; }
    .service-fitcheck { grid-template-columns: 1fr; }
    .service-popular-postit { display: none; }
    .services-hero-margin-note,
    .services-hero-postit { display: none; }
  }