/* ============================================================
       KITEBA — LANDING v2
       Direction : "Le Cahier Moderne"
       ============================================================ */

    :root {
      /* Brand — Kiteba */
      --kt-violet:    #5B3FE8;
      --kt-violet-l:  #7B65F0;
      --kt-violet-xl: #EEE9FD;
      --kt-violet-d:  #3D27C4;

      --kt-coral:     #FF4D2E;
      --kt-coral-l:   #FF7A62;
      --kt-coral-xl:  #FFF0ED;
      --kt-coral-d:   #D93010;

      --kt-mint:      #00A876;
      --kt-mint-l:    #1EC99D;
      --kt-mint-xl:   #E6FAF4;

      --kt-amber:     #FFB800;
      --kt-amber-xl:  #FFF8E6;

      --kt-night:     #12111F;
      --kt-gray:      #6D6B88;
      --kt-fog:       #F4F3FF;
      --kt-white:     #FEFEFE;
      --kt-slate:     #18172B;
      --kt-slate-m:   #2E2C48;
      --kt-slate-l:   #4A4869;

      /* Paper / editorial layer */
      --kt-paper:     #FAF6EC;
      --kt-paper-2:   #F2ECDB;
      --kt-ink:       #1A1830;
      --kt-rule:      rgba(18, 17, 31, 0.08);

      /* Type */
      --f-display: 'Syne', -apple-system, sans-serif;
      --f-body:    'Nunito', -apple-system, sans-serif;
      --f-hand:    'Caveat', cursive;

      /* Motion */
      --e-soft: cubic-bezier(.22, 1, .36, 1);
      --e-snap: cubic-bezier(.6, .01, .05, 1);
    }

    /* ── Reset scopé à main — NE PAS élargir au body entier (casse le header Blocksy) ── */
    body.kiteba-landing main * { box-sizing: border-box !important; }

    body.kiteba-landing main,
    body.kiteba-landing main h1,
    body.kiteba-landing main h2,
    body.kiteba-landing main h3,
    body.kiteba-landing main h4,
    body.kiteba-landing main h5,
    body.kiteba-landing main h6,
    body.kiteba-landing main p,
    body.kiteba-landing main ul,
    body.kiteba-landing main ol,
    body.kiteba-landing main li,
    body.kiteba-landing main figure,
    body.kiteba-landing main blockquote,
    body.kiteba-landing main dl,
    body.kiteba-landing main dd { margin: 0 !important; padding: 0 !important; }

    html { scroll-behavior: smooth !important; -webkit-font-smoothing: antialiased !important; }

    body.kiteba-landing {
      font-family: var(--f-body) !important;
      color: var(--kt-ink) !important;
      background: var(--kt-paper) !important;
      font-size: 17px !important;
      line-height: 1.6 !important;
      overflow-x: hidden !important;
    }

    /* Paper grain — scopé à main pour ne pas interférer avec le header Blocksy */
    body.kiteba-landing main::before {
      content: '';
      position: fixed !important; inset: 0 !important;
      pointer-events: none !important;
      z-index: 0 !important;
      background-image:
        radial-gradient(ellipse at top left, rgba(91, 63, 232, 0.06), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(255, 77, 46, 0.04), transparent 50%) !important;
    }

    /* Resets scopés à main — ne touchent pas le header/footer Blocksy */
    body.kiteba-landing main img,
    body.kiteba-landing main svg { display: block !important; max-width: 100% !important; }
    body.kiteba-landing main a { color: inherit !important; text-decoration: none !important; }
    body.kiteba-landing main button { font-family: inherit !important; cursor: pointer !important; border: none !important; background: none !important; }
    ::selection { background: var(--kt-coral) !important; color: var(--kt-white) !important; }

    /* ---- Custom scrollbar ---- */
    ::-webkit-scrollbar { width: 8px !important; }
    ::-webkit-scrollbar-track { background: var(--kt-paper) !important; }
    ::-webkit-scrollbar-thumb { background: var(--kt-violet-l) !important; border-radius: 4px !important; }
    ::-webkit-scrollbar-thumb:hover { background: var(--kt-coral) !important; }
    html { scrollbar-width: thin !important; scrollbar-color: var(--kt-violet-l) var(--kt-paper) !important; }

    /* ---- Scroll progress bar ---- */
    .scroll-progress {
      position: fixed !important;
      top: 0 !important; left: 0 !important;
      height: 3px !important;
      width: 0% !important;
      background: linear-gradient(90deg, var(--kt-coral), var(--kt-violet)) !important;
      z-index: 100 !important;
      pointer-events: none !important;
      will-change: width !important;
    }

    /* ---- Grain overlay ---- */
    .grain {
      position: fixed !important;
      inset: 0 !important;
      pointer-events: none !important;
      z-index: 9998 !important;
      opacity: 0.028 !important;
      mix-blend-mode: multiply !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
    }

    /* ---- Section dividers (diagonal SVG) ---- */
    .divider {
      position: relative !important;
      line-height: 0 !important;
      z-index: 4 !important;
      margin-top: -1px !important;
      margin-bottom: -1px !important;
    }
    .divider svg {
      width: 100% !important;
      height: 60px !important;
      display: block !important;
    }
    @media (max-width: 768px) {
      .divider svg { height: 36px !important; }
    }

    /* ---- Ornament divider (between same-tone sections) ---- */
    .ornament {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 20px !important;
      padding: 0 48px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .ornament::before,
    .ornament::after {
      content: '';
      flex: 1 !important;
      height: 1px !important;
      background: linear-gradient(to var(--dir, right), var(--kt-rule), transparent) !important;
    }
    .ornament::before { --dir: right; }
    .ornament::after { --dir: left; }
    .ornament .mark {
      width: 10px !important; height: 10px !important;
      border: 2px solid var(--kt-coral) !important;
      border-radius: 2px !important;
      transform: rotate(45deg) !important;
      flex-shrink: 0 !important;
    }

    /* ---- Simplicity marquee band ---- */
    .marquee-band {
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      overflow: hidden !important;
      padding: 18px 0 !important;
      position: relative !important;
      z-index: 4 !important;
      border-top: 1px solid var(--kt-slate-l) !important;
      border-bottom: 1px solid var(--kt-slate-l) !important;
    }
    .marquee-track {
      display: flex !important;
      width: max-content !important;
      animation: marqueeScroll 30s linear infinite !important;
    }
    .marquee-track:hover { animation-play-state: paused !important; }
    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .marquee-item {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 0 40px !important;
      white-space: nowrap !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 15px !important;
      letter-spacing: -0.01em !important;
    }
    .marquee-item .m-icon {
      width: 28px !important; height: 28px !important;
      border-radius: 8px !important;
      display: grid !important;
      place-items: center !important;
      flex-shrink: 0 !important;
    }
    .marquee-item .m-icon svg {
      width: 14px !important; height: 14px !important;
      stroke: var(--kt-white) !important;
      fill: none !important;
      stroke-width: 2.5 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }
    .marquee-item .m-icon.coral  { background: var(--kt-coral) !important; }
    .marquee-item .m-icon.violet { background: var(--kt-violet) !important; }
    .marquee-item .m-icon.mint   { background: var(--kt-mint) !important; }
    .marquee-item .m-icon.amber  { background: var(--kt-amber) !important; }
    .marquee-item .m-num {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 22px !important;
      color: var(--kt-coral) !important;
      letter-spacing: -0.02em !important;
    }
    .marquee-sep {
      width: 4px !important; height: 4px !important;
      border-radius: 50% !important;
      background: var(--kt-slate-l) !important;
      flex-shrink: 0 !important;
      margin: 0 8px !important;
    }

    /* ---- Margin annotations (Caveat handwritten notes) ---- */
    .margin-note {
      position: absolute !important;
      font-family: var(--f-hand) !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      color: var(--kt-coral) !important;
      opacity: 0 !important;
      transform: rotate(var(--rot, -4deg)) translateY(10px) !important;
      transition: opacity .8s var(--e-soft), transform .8s var(--e-soft) !important;
      pointer-events: none !important;
      z-index: 5 !important;
      white-space: nowrap !important;
    }
    .margin-note.in {
      opacity: 0.65 !important;
      transform: rotate(var(--rot, -4deg)) translateY(0) !important;
    }
    .margin-note svg {
      display: inline !important;
      width: 20px !important;
      height: 12px !important;
      vertical-align: middle !important;
      margin-left: 4px !important;
    }
    .margin-note svg path {
      fill: none !important;
      stroke: var(--kt-coral) !important;
      stroke-width: 2 !important;
      stroke-linecap: round !important;
    }

    /* ---- Back to top ---- */
    .back-top {
      position: fixed !important;
      bottom: 32px !important;
      right: 32px !important;
      width: 48px !important; height: 48px !important;
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      z-index: 50 !important;
      opacity: 0 !important;
      transform: translateY(20px) scale(0.8) !important;
      transition: opacity .4s, transform .4s var(--e-soft), background .2s !important;
      cursor: pointer !important;
      box-shadow: 0 4px 20px rgba(26, 24, 48, 0.3) !important;
    }
    .back-top.show {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
    }
    .back-top:hover {
      background: var(--kt-coral) !important;
      transform: translateY(-3px) scale(1) !important;
    }
    .back-top svg {
      width: 20px !important; height: 20px !important;
      stroke: currentColor !important;
      fill: none !important;
      stroke-width: 2.5 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    /* ---- 3D tilt on cards ---- */
    .tilt-card {
      transition: transform .6s var(--e-soft) !important;
      transform-style: preserve-3d !important;
      will-change: transform !important;
    }
    .tilt-card .icon-wrap,
    .tilt-card h3,
    .tilt-card .station-top {
      transform: translateZ(20px) !important;
    }

    /* ---- Magnetic buttons ---- */
    .magnetic {
      transition: transform .4s var(--e-soft) !important;
      will-change: transform !important;
    }

    /* ---- Click ripple ---- */
    .ripple-wrap {
      position: relative !important;
      overflow: hidden !important;
    }
    .ripple {
      position: absolute !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.35) !important;
      transform: scale(0);
      animation: rippleOut .7s ease-out forwards !important;
      pointer-events: none !important;
    }
    @keyframes rippleOut {
      to { transform: scale(4); opacity: 0; }
    }

    /* ---- Parallax depth layers ---- */
    [data-depth] {
      will-change: transform !important;
      transition: transform .1s linear !important;
    }

    /* ---- Enhanced reveal (blur + slide) ---- */
    [data-reveal] {
      opacity: 0 !important;
      transform: translateY(40px) !important;
      filter: blur(6px) !important;
      transition: opacity 1s var(--e-soft), transform 1s var(--e-soft), filter .8s var(--e-soft) !important;
    }
    [data-reveal].in {
      opacity: 1 !important;
      transform: translateY(0) !important;
      filter: blur(0) !important;
    }

    /* ---------- Utilities ---------- */
    .wrap {
      width: min(1240px, 100% - 48px) !important;
      margin-inline: auto !important;
      position: relative !important;
      z-index: 1 !important;
    }

    .eyebrow {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      letter-spacing: 0.18em !important;
      text-transform: uppercase !important;
      color: var(--kt-violet) !important;
      padding: 8px 14px !important;
      border: 1px solid var(--kt-violet) !important;
      border-radius: 999px !important;
      background: rgba(91, 63, 232, 0.04) !important;
    }

    .eyebrow .dot {
      width: 8px !important; height: 8px !important; border-radius: 50% !important;
      background: var(--kt-coral) !important;
      box-shadow: 0 0 0 4px rgba(255, 77, 46, 0.15);
      animation: pulse 2s ease-in-out infinite !important;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(255, 77, 46, 0.15); }
      50%      { box-shadow: 0 0 0 7px rgba(255, 77, 46, 0.05); }
    }

    .btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 15px !important;
      padding: 16px 28px !important;
      border-radius: 14px !important;
      transition: transform .4s var(--e-soft), box-shadow .4s var(--e-soft), background .25s !important;
      white-space: nowrap !important;
    }
    .btn-primary {
      background: var(--kt-coral) !important;
      color: var(--kt-white) !important;
      box-shadow:
        0 1px 0 rgba(0,0,0,0.05),
        0 10px 30px -12px rgba(255, 77, 46, 0.55) !important;
    }
    .btn-primary:hover {
      transform: translateY(-2px) !important;
      background: var(--kt-coral-d) !important;
      box-shadow: 0 16px 34px -12px rgba(255, 77, 46, 0.7) !important;
    }
    .btn-ghost {
      color: var(--kt-ink) !important;
      border: 1.5px solid var(--kt-ink) !important;
      background: transparent !important;
    }
    .btn-ghost:hover {
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      transform: translateY(-2px) !important;
    }
    .btn svg { width: 18px !important; height: 18px !important; }

    /* ==========================================================
       HERO
       ========================================================== */
    .hero {
      position: relative !important;
      padding: 24px 0 120px !important;
      overflow: hidden !important;
    }

    /* Graph paper grid background, fading out */
    .hero::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        linear-gradient(to right, rgba(26, 24, 48, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 24, 48, 0.045) 1px, transparent 1px) !important;
      background-size: 42px 42px !important;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%) !important;
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%) !important;
      pointer-events: none !important;
    }

    /* Decorative floating shapes */
    .hero-blob {
      position: absolute !important;
      border-radius: 50% !important;
      filter: blur(70px) !important;
      opacity: 0.35 !important;
      pointer-events: none !important;
    }
    .hero-blob.one {
      width: 340px !important; height: 340px !important;
      background: var(--kt-violet-l) !important;
      top: -80px !important; left: -120px !important;
    }
    .hero-blob.two {
      width: 260px !important; height: 260px !important;
      background: var(--kt-coral-l) !important;
      bottom: 40px !important; right: 10% !important;
      opacity: 0.25 !important;
    }

    .hero-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 500px !important;
      gap: 56px !important;
      align-items: center !important;
      position: relative !important;
      min-height: 620px !important;
    }

    .hero-left {
      position: relative !important;
      z-index: 2 !important;
      min-width: 0 !important;
    }

    .hero-eyebrow {
      margin-bottom: 28px !important;
      animation: riseIn .9s var(--e-soft) both !important;
      animation-delay: .05s !important;
    }

    h1.hero-title {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: clamp(30px, 3.6vw, 50px) !important;
      line-height: 1.04 !important;
      letter-spacing: -0.035em !important;
      color: var(--kt-ink) !important;
      margin-bottom: 26px !important;
      max-width: 100% !important;
    }
    h1.hero-title .line {
      max-width: 100% !important;
    }
    .hero-title .line {
      display: block !important;
      animation: riseIn 1s var(--e-soft) both !important;
    }
    .hero-title .line:nth-child(1) { animation-delay: .1s !important; }
    .hero-title .line:nth-child(2) { animation-delay: .22s !important; }

    /* "Pas vos outils." — légèrement atténué pour créer un contraste avec la ligne 1 */
    .hero-title-contrast {
      color: var(--kt-gray) !important;
    }

    .hero-sub {
      display: flex !important;
      flex-direction: column !important;
      gap: 5px !important;
      max-width: 540px !important;
      margin-bottom: 38px !important;
      animation: riseIn 1s var(--e-soft) both !important;
      animation-delay: .38s !important;
    }

    /* Ligne 1 : liste des modules — gris clair, point médian comme séparateur */
    .hero-sub-list {
      font-size: 16px !important;
      color: var(--kt-gray) !important;
      font-weight: 500 !important;
      letter-spacing: 0.01em !important;
    }

    /* Ligne 2 : conclusion — encre, légèrement plus lourd */
    .hero-sub-close {
      font-size: 17px !important;
      color: var(--kt-ink) !important;
      font-weight: 700 !important;
      font-family: var(--f-display) !important;
      letter-spacing: -0.01em !important;
    }
    .hero-sub strong {
      color: var(--kt-ink) !important;
      font-weight: 700 !important;
    }

    /* hero-actions : deux boutons côte à côte */
    .hero-actions {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      flex-wrap: wrap !important;
      margin: 8px 0 24px !important;
      animation: riseIn 1s var(--e-soft) both !important;
      animation-delay: .5s !important;
    }

    /* cta-band actions */
    .cta-actions {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 16px !important;
      margin: 8px 0 !important;
    }
    .cta-main-btn {
      font-size: 17px !important;
      padding: 18px 36px !important;
    }
    .cta-login-link {
      color: rgba(255, 255, 255, 0.55) !important;
      font-family: var(--f-body) !important;
      font-size: 14px !important;
      text-decoration: none !important;
      transition: color .2s !important;
    }
    .cta-login-link:hover { color: rgba(255, 255, 255, 0.9) !important; }

    /* soon panel register link */
    .soon-register-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 11px 18px !important;
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      border-radius: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 13px !important;
      box-shadow: 3px 3px 0 var(--acc) !important;
      text-decoration: none !important;
      transition: transform .3s !important;
    }
    .soon-register-btn:hover { transform: translate(-2px, -2px) !important; }

    /* hero-form : colonne → .form-row (pill) + .consent-label en dessous */
    .hero-form {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      max-width: 520px !important;
      animation: riseIn 1s var(--e-soft) both !important;
      animation-delay: .5s !important;
    }
    .hero-form .form-row {
      display: flex !important;
      gap: 12px !important;
      padding: 8px !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 16px !important;
      box-shadow: 5px 5px 0 var(--kt-ink) !important;
      transition: transform .3s var(--e-soft), box-shadow .3s var(--e-soft) !important;
    }
    .hero-form .form-row:focus-within {
      transform: translate(-2px, -2px) !important;
      box-shadow: 7px 7px 0 var(--kt-violet) !important;
    }
    .hero-form input {
      flex: 1 !important;
      border: none !important;
      outline: none !important;
      padding: 14px 16px !important;
      font-family: var(--f-body) !important;
      font-size: 16px !important;
      background: transparent !important;
      color: var(--kt-ink) !important;
    }
    .hero-form input::placeholder {
      color: var(--kt-gray) !important;
    }
    /* Spécificité (0,2,2) > reset global (0,1,3) → bouton visible */
    body.kiteba-landing .hero-form button {
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      padding: 14px 22px !important;
      border-radius: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      white-space: nowrap !important;
      transition: background .25s !important;
    }
    body.kiteba-landing .hero-form button:hover { background: var(--kt-violet) !important; }

    /* ---- Consent checkbox (RGPD) ---- */
    .consent-label {
      display: flex !important;
      align-items: flex-start !important;
      gap: 10px !important;
      cursor: pointer !important;
    }
    .consent-box {
      position: relative !important;
      flex: 0 0 18px !important;
      width: 18px !important;
      height: 18px !important;
      margin-top: 2px !important;
    }
    .consent-box input[type="checkbox"] {
      position: absolute !important;
      inset: 0 !important;
      opacity: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      cursor: pointer !important;
    }
    .consent-box::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 5px !important;
      border: 2px solid rgba(18, 17, 31, 0.22) !important;
      background: transparent !important;
      transition: border-color .18s, background .18s !important;
    }
    .consent-label.is-checked .consent-box::before {
      border-color: var(--kt-coral) !important;
      background: var(--kt-coral) !important;
    }
    .consent-check-icon {
      position: absolute !important;
      inset: 2px !important;
      color: #fff !important;
      opacity: 0 !important;
      transform: scale(0.5) !important;
      transition: opacity .15s, transform .2s var(--e-soft) !important;
      pointer-events: none !important;
    }
    .consent-label.is-checked .consent-check-icon {
      opacity: 1 !important;
      transform: scale(1) !important;
    }
    .consent-text {
      font-size: 12px !important;
      color: var(--kt-gray) !important;
      line-height: 1.55 !important;
      font-family: var(--f-body) !important;
    }
    /* Variante fond sombre (CTA band) */
    .consent-label--light .consent-text { color: rgba(255, 255, 255, 0.5) !important; }
    .consent-label--light .consent-box::before { border-color: rgba(255, 255, 255, 0.3) !important; }
    /* État erreur (case non cochée à la soumission) */
    @keyframes consentShake {
      0%,100% { transform: translateX(0); }
      20%,60%  { transform: translateX(-4px); }
      40%,80%  { transform: translateX(4px); }
    }
    .consent-label.consent-error { animation: consentShake .35s var(--e-snap) !important; }
    .consent-label.consent-error .consent-box::before { border-color: var(--kt-coral) !important; }

    .hero-trust {
      margin-top: 28px !important;
      display: flex !important;
      gap: 32px !important;
      flex-wrap: wrap !important;
      animation: riseIn 1s var(--e-soft) both !important;
      animation-delay: .65s !important;
    }
    .hero-trust div {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-size: 14px !important;
      color: var(--kt-gray) !important;
      font-weight: 600 !important;
    }
    .hero-trust strong {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 22px !important;
      color: var(--kt-ink) !important;
      letter-spacing: -0.01em !important;
    }
    .hero-trust .sep {
      width: 1px !important;
      height: 30px !important;
      background: var(--kt-rule) !important;
    }

    /* ----- Hero visual ----- */
    .hero-right {
      position: relative !important;
      z-index: 1 !important;
      width: 500px !important;
      height: 580px !important;
      max-width: 100% !important;
      justify-self: end !important;
      animation: riseIn 1.2s var(--e-soft) both !important;
      animation-delay: .4s !important;
    }

    .schedule-card {
      position: absolute !important;
      top: 40px !important;
      left: 0 !important;
      width: 100% !important;
      height: 460px !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 24px !important;
      padding: 22px 24px 24px !important;
      box-shadow:
        8px 8px 0 var(--kt-ink),
        0 40px 60px -30px rgba(26, 24, 48, 0.35) !important;
      transform: rotate(-1.2deg) !important;
      transition: transform 1s var(--e-soft) !important;
    }
    .hero-right:hover .schedule-card { transform: rotate(-0.4deg) translate(-4px, -4px) !important; }

    .schedule-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin-bottom: 18px !important;
      padding-bottom: 16px !important;
      border-bottom: 1px dashed var(--kt-rule) !important;
    }
    .schedule-head h3 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 18px !important;
      color: var(--kt-ink) !important;
      letter-spacing: -0.01em !important;
    }
    .schedule-head .week {
      font-family: var(--f-hand) !important;
      font-size: 22px !important;
      color: var(--kt-coral) !important;
      transform: rotate(-2deg) !important;
    }
    .dots { display: flex !important; gap: 6px !important; }
    .dots span {
      width: 10px !important; height: 10px !important; border-radius: 50% !important;
      background: var(--kt-rule) !important;
    }
    .dots span:nth-child(1) { background: var(--kt-coral) !important; }
    .dots span:nth-child(2) { background: var(--kt-amber) !important; }
    .dots span:nth-child(3) { background: var(--kt-mint) !important; }

    .schedule-grid {
      display: grid !important;
      grid-template-columns: 44px repeat(5, 1fr) !important;
      gap: 6px !important;
      font-family: var(--f-body) !important;
    }
    .schedule-grid .col-head {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      color: var(--kt-gray) !important;
      text-align: center !important;
      padding-bottom: 6px !important;
    }
    .schedule-grid .row-head {
      font-size: 11px !important;
      font-weight: 600 !important;
      color: var(--kt-gray) !important;
      text-align: right !important;
      padding-right: 6px !important;
      padding-top: 10px !important;
    }
    .schedule-grid .cell {
      height: 48px !important;
      border-radius: 8px !important;
      border: 1px dashed rgba(26,24,48,0.08) !important;
    }
    .schedule-grid .block {
      border-radius: 8px !important;
      padding: 6px 8px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      color: var(--kt-white) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      box-shadow: 0 3px 10px -3px rgba(0,0,0,0.25) !important;
      animation: blockPop .6s var(--e-soft) both !important;
      cursor: pointer !important;
      transition: transform .3s var(--e-soft) !important;
    }
    .schedule-grid .block:hover { transform: scale(1.04) !important; }
    .schedule-grid .block small {
      display: block !important;
      font-family: var(--f-body) !important;
      font-weight: 600 !important;
      opacity: 0.85 !important;
      font-size: 9px !important;
    }
    .block.violet { background: var(--kt-violet) !important; grid-row: span 2 !important; animation-delay: .7s !important; }
    .block.coral  { background: var(--kt-coral) !important;  grid-row: span 1 !important; animation-delay: .85s !important; }
    .block.mint   { background: var(--kt-mint) !important;   grid-row: span 2 !important; animation-delay: 1s !important; }
    .block.amber  { background: var(--kt-amber) !important;  grid-row: span 1 !important; animation-delay: 1.15s !important; color: #5a3d00 !important; }
    .block.violet2{ background: var(--kt-violet-l) !important;grid-row: span 1 !important; animation-delay: 1.3s !important; }

    @keyframes blockPop {
      from { opacity: 0; transform: scale(0.7); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Floating side cards */
    .float-card {
      position: absolute !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 16px !important;
      padding: 14px 16px !important;
      box-shadow: 5px 5px 0 var(--kt-ink) !important;
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      animation: floatCard .7s var(--e-soft) both, gentleBob 5s ease-in-out infinite !important;
      z-index: 3 !important;
      min-width: 210px !important;
    }
    @keyframes floatCard {
      from { opacity: 0; transform: translateY(20px) scale(0.9); }
      to   { opacity: 1; }
    }
    @keyframes gentleBob {
      0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
      50%      { transform: translateY(-6px) rotate(var(--tilt, 0deg)); }
    }

    .float-card .icon {
      width: 40px !important; height: 40px !important;
      border-radius: 10px !important;
      display: grid !important;
      place-items: center !important;
      flex-shrink: 0 !important;
    }
    .float-card .icon svg { width: 20px !important; height: 20px !important; stroke: var(--kt-white) !important; fill: none !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

    .float-card .txt .t1 {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 13px !important;
      color: var(--kt-ink) !important;
      letter-spacing: -0.01em !important;
      line-height: 1.2 !important;
    }
    .float-card .txt .t2 {
      font-size: 12px !important;
      color: var(--kt-gray) !important;
      margin-top: 2px !important;
    }

    .float-card.grade {
      top: 8% !important;
      right: -6% !important;
      --tilt: 3deg;
      animation-delay: 1.3s, 1.5s !important;
    }
    .float-card.grade .icon { background: var(--kt-mint) !important; }
    .float-card.grade .big {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 22px !important;
      color: var(--kt-mint) !important;
      letter-spacing: -0.02em !important;
    }

    .float-card.justif {
      bottom: 14% !important;
      left: -8% !important;
      --tilt: -3deg;
      animation-delay: 1.5s, 2s !important;
    }
    .float-card.justif .icon { background: var(--kt-coral) !important; }

    .float-card.notif {
      bottom: -4% !important;
      right: 6% !important;
      --tilt: 2deg;
      animation-delay: 1.7s, 2.5s !important;
    }
    .float-card.notif .icon { background: var(--kt-violet) !important; }

    /* Pencil / chalk decoration at top right */
    .hero-pencil {
      position: absolute !important;
      top: -30px !important;
      right: 20% !important;
      width: 80px !important;
      transform: rotate(25deg) !important;
      opacity: 0.7 !important;
      animation: riseIn 1.4s var(--e-soft) both !important;
      animation-delay: 1s !important;
    }

    /* Hero bottom scroll hint */
    .scroll-hint {
      position: absolute !important;
      left: 50% !important;
      bottom: 18px !important;
      transform: translateX(-50%) !important;
      font-family: var(--f-display) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.2em !important;
      text-transform: uppercase !important;
      color: var(--kt-gray) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .scroll-hint::after {
      content: '';
      width: 1px !important;
      height: 40px !important;
      background: linear-gradient(to bottom, var(--kt-gray), transparent) !important;
      animation: scrollBar 2s ease-in-out infinite !important;
    }
    @keyframes scrollBar {
      0%, 100% { transform: scaleY(1); transform-origin: top; }
      50%      { transform: scaleY(0.3); transform-origin: top; }
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ==========================================================
       SECTION: STRUCTURES (Pour qui ?)
       ========================================================== */
    .section {
      padding: 120px 0 !important;
      position: relative !important;
    }

    .section-head {
      max-width: 720px !important;
      margin-bottom: 64px !important;
    }
    .section-head .eyebrow { margin-bottom: 24px !important; }
    .section-head h2 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: clamp(34px, 4vw, 56px) !important;
      line-height: 1.05 !important;
      letter-spacing: -0.03em !important;
      color: var(--kt-ink) !important;
      margin-bottom: 20px !important;
    }
    .section-head p {
      font-size: 19px !important;
      color: var(--kt-gray) !important;
      line-height: 1.5 !important;
      max-width: 580px !important;
    }
    .section-head.centered {
      margin-inline: auto !important;
      text-align: center !important;
    }
    .section-head.centered p { margin-inline: auto !important; }

    .structures {
      background: linear-gradient(180deg, var(--kt-paper) 0%, var(--kt-paper-2) 100%) !important;
      border-top: 1px solid var(--kt-rule) !important;
      border-bottom: 1px solid var(--kt-rule) !important;
      overflow: hidden !important;
    }

    /* Picker: left = head + tabs, right = stage */
    .picker {
      display: grid !important;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
      gap: 72px !important;
      align-items: start !important;
    }
    .picker-left { position: relative !important; }
    .picker-left .eyebrow { margin-bottom: 24px !important; }
    .picker-left h2 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: clamp(32px, 3.6vw, 50px) !important;
      line-height: 1.02 !important;
      letter-spacing: -0.03em !important;
      color: var(--kt-ink) !important;
      margin-bottom: 18px !important;
    }
    .picker-left h2 em {
      font-style: normal !important;
      font-family: var(--f-hand) !important;
      color: var(--kt-coral) !important;
      font-weight: 700 !important;
      font-size: 1.1em !important;
      padding: 0 4px !important;
    }
    .picker-left > p {
      font-size: 16px !important;
      color: var(--kt-gray) !important;
      line-height: 1.6 !important;
      margin-bottom: 36px !important;
      max-width: 440px !important;
    }

    .picker-tabs {
      display: flex !important;
      flex-direction: column !important;
      border-top: 1px solid var(--kt-ink) !important;
    }
    .p-tab {
      display: flex !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 20px 6px 20px 4px !important;
      border-bottom: 1px solid var(--kt-ink) !important;
      text-align: left !important;
      position: relative !important;
      transition: padding .4s var(--e-soft), background .4s !important;
      font-family: inherit !important;
    }
    .p-tab::before {
      content: '';
      position: absolute !important;
      left: -4px !important; top: 50% !important;
      width: 3px !important; height: 0 !important;
      background: var(--kt-coral) !important;
      border-radius: 3px !important;
      transform: translateY(-50%) !important;
      transition: height .5s var(--e-soft) !important;
    }
    .p-tab.active::before { height: 48px !important; }
    .p-tab:hover:not(.active) { padding-left: 14px !important; background: rgba(26,24,48,0.02) !important; }
    .p-tab.active { padding-left: 18px !important; }

    .p-num {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 28px !important;
      color: rgba(26,24,48,0.25) !important;
      letter-spacing: -0.02em !important;
      min-width: 44px !important;
      transition: color .4s, transform .4s var(--e-soft) !important;
    }
    .p-tab.active .p-num {
      color: var(--kt-coral) !important;
      transform: scale(1.1) rotate(-3deg) !important;
    }
    .p-tab:hover .p-num { color: var(--kt-ink) !important; }

    .p-label { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
    .p-label strong {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 18px !important;
      color: var(--kt-ink) !important;
      letter-spacing: -0.01em !important;
    }
    .p-label small {
      font-size: 13px !important;
      color: var(--kt-gray) !important;
      font-weight: 500 !important;
    }

    .p-arrow {
      width: 22px !important; height: 22px !important;
      opacity: 0 !important;
      transform: translateX(-8px) !important;
      transition: opacity .4s, transform .4s var(--e-soft) !important;
      color: var(--kt-coral) !important;
    }
    .p-tab.active .p-arrow { opacity: 1 !important; transform: translateX(0) !important; }
    .p-arrow svg { width: 100% !important; height: 100% !important; }

    .p-badge-soon {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 10px !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      padding: 4px 9px !important;
      border-radius: 999px !important;
      background: var(--kt-amber) !important;
      color: #5a3d00 !important;
      border: 1.5px solid #5a3d00 !important;
      transform: rotate(-3deg) !important;
      white-space: nowrap !important;
    }
    .p-tab.soon .p-label strong { opacity: 0.6 !important; }
    .p-tab.soon .p-num { font-style: italic !important; }

    /* ----- Stage ----- */
    .picker-stage {
      position: relative !important;
      height: 620px !important;
      width: 100% !important;
      perspective: 1200px !important;
    }
    .p-panel {
      position: absolute !important;
      inset: 0 !important;
      opacity: 0 !important;
      transform: translateY(30px) scale(0.98) !important;
      pointer-events: none !important;
      transition: opacity .65s var(--e-soft), transform .75s var(--e-soft) !important;
    }
    .p-panel.active {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      pointer-events: auto !important;
    }

    .p-frame {
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 28px !important;
      padding: 34px 38px 30px !important;
      height: 100% !important;
      box-shadow:
        10px 10px 0 var(--kt-ink),
        0 50px 80px -40px rgba(26, 24, 48, 0.45) !important;
      position: relative !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .p-frame::before {
      content: '';
      position: absolute !important;
      top: -140px !important;
      right: -140px !important;
      width: 440px !important;
      height: 440px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, var(--acc-xl), transparent 65%) !important;
      pointer-events: none !important;
    }
    .p-frame::after {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        linear-gradient(to right, rgba(26, 24, 48, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 24, 48, 0.03) 1px, transparent 1px) !important;
      background-size: 32px 32px !important;
      pointer-events: none !important;
      mask-image: radial-gradient(ellipse at bottom left, black, transparent 70%) !important;
      -webkit-mask-image: radial-gradient(ellipse at bottom left, black, transparent 70%) !important;
    }

    .p-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin-bottom: 16px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .p-tag {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 10.5px !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      color: var(--acc) !important;
      padding: 6px 12px !important;
      background: var(--acc-xl) !important;
      border: 1px solid var(--acc) !important;
      border-radius: 999px !important;
    }
    .p-tiny {
      font-family: var(--f-hand) !important;
      font-size: 22px !important;
      color: var(--acc) !important;
      transform: rotate(-2deg) !important;
      font-weight: 700 !important;
    }

    .p-title {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: clamp(22px, 2vw, 30px) !important;
      line-height: 1.1 !important;
      letter-spacing: -0.025em !important;
      color: var(--kt-ink) !important;
      margin-bottom: 24px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .p-title em {
      font-style: normal !important;
      color: var(--acc) !important;
    }

    .p-mock {
      flex: 1 !important;
      background: var(--kt-paper) !important;
      border: 1px solid var(--kt-rule) !important;
      border-radius: 16px !important;
      padding: 18px 20px !important;
      margin-bottom: 20px !important;
      position: relative !important;
      overflow: hidden !important;
      z-index: 2 !important;
    }

    /* ---- Mock: Roster (général) ---- */
    .mock-head {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      font-family: var(--f-display) !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      color: var(--kt-gray) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      margin-bottom: 12px !important;
      padding-bottom: 12px !important;
      border-bottom: 1px dashed rgba(26,24,48,0.15) !important;
    }
    .csv-pill {
      background: var(--kt-mint-xl) !important;
      color: var(--kt-mint) !important;
      padding: 4px 10px !important;
      border-radius: 999px !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
      font-size: 11px !important;
      border: 1px solid var(--kt-mint) !important;
      font-weight: 700 !important;
    }
    .mock-row {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 9px 0 !important;
      border-bottom: 1px solid rgba(26,24,48,0.06) !important;
      opacity: 0;
      transform: translateX(-14px);
    }
    .mock-row:last-child { border-bottom: none !important; }
    .p-panel.active .mock-row {
      animation: rowIn .6s var(--e-soft) forwards !important;
    }
    .p-panel.active .mock-row:nth-child(2) { animation-delay: .15s !important; }
    .p-panel.active .mock-row:nth-child(3) { animation-delay: .27s !important; }
    .p-panel.active .mock-row:nth-child(4) { animation-delay: .39s !important; }
    .p-panel.active .mock-row:nth-child(5) { animation-delay: .51s !important; }
    .p-panel.active .mock-row:nth-child(6) { animation-delay: .63s !important; }
    @keyframes rowIn {
      to { opacity: 1; transform: translateX(0); }
    }
    .avatar {
      width: 34px !important; height: 34px !important;
      border-radius: 50% !important;
      background: var(--acc-xl) !important;
      color: var(--acc) !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 12px !important;
      display: grid !important;
      place-items: center !important;
      border: 1.5px solid var(--acc) !important;
      flex-shrink: 0 !important;
    }
    .mock-row .name {
      flex: 1 !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--kt-ink) !important;
    }
    .mock-row .status {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 10px !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      padding: 4px 9px !important;
      border-radius: 999px !important;
    }
    .status.present { background: var(--kt-mint-xl) !important; color: var(--kt-mint) !important; border: 1px solid var(--kt-mint) !important; }
    .status.late    { background: var(--kt-amber-xl) !important; color: #7A5100 !important; border: 1px solid #FFB800 !important; }
    .status.absent  { background: var(--kt-coral-xl) !important; color: var(--kt-coral) !important; border: 1px solid var(--kt-coral) !important; }

    /* ---- Mock: Levels (musique) ---- */
    .mock-levels {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      justify-content: center !important;
      height: 100% !important;
      padding: 10px 0 !important;
    }
    .level {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      padding: 14px 18px !important;
      border-radius: 12px !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      box-shadow: 3px 3px 0 var(--kt-ink) !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      opacity: 0;
      transform: translateX(-20px);
      color: var(--kt-ink) !important;
    }
    .p-panel.active .level {
      animation: levelIn .55s var(--e-soft) forwards !important;
    }
    .p-panel.active .level.l1 { animation-delay: .12s !important; }
    .p-panel.active .level.l2 { animation-delay: .24s !important; }
    .p-panel.active .level.l3 { animation-delay: .36s !important; }
    .p-panel.active .level.l4 { animation-delay: .48s !important; }
    @keyframes levelIn {
      to { opacity: 1; transform: translateX(var(--xo, 0)); }
    }
    .level .arrow-h {
      font-family: var(--f-hand) !important;
      font-size: 24px !important;
      color: var(--acc) !important;
      font-weight: 700 !important;
    }
    .level.l1 { font-size: 14px !important; --xo: 0px; }
    .level.l2 { font-size: 15px !important; --xo: 22px; margin-left: 22px !important; }
    .level.l3 { font-size: 16px !important; --xo: 44px; margin-left: 44px !important; }
    .level.l4 {
      font-size: 17px !important; --xo: 66px; margin-left: 66px !important;
      background: var(--acc) !important;
      color: var(--kt-white) !important;
      border-color: var(--kt-ink) !important;
    }
    .level.l4 .arrow-h { color: var(--kt-white) !important; }

    /* ---- Mock: PDF (formation) ---- */
    .mock-pdf {
      display: grid !important;
      place-items: center !important;
      padding: 14px !important;
      position: relative !important;
    }
    .mock-pdf::before {
      content: 'CERTIFIÉ' !important;
      position: absolute !important;
      top: 50% !important; left: 50% !important;
      transform: translate(-50%, -50%) rotate(-20deg) !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 90px !important;
      color: var(--acc) !important;
      opacity: 0.06 !important;
      letter-spacing: 0.1em !important;
      pointer-events: none !important;
    }
    .pdf-sheet {
      width: 68% !important;
      aspect-ratio: 1 / 1.35 !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 4px !important;
      box-shadow: 6px 6px 0 var(--kt-ink), 0 20px 40px -20px rgba(0,0,0,0.3) !important;
      padding: 18px !important;
      position: relative !important;
      animation: pdfFloat 5s ease-in-out infinite !important;
    }
    @keyframes pdfFloat {
      0%, 100% { transform: rotate(-2.5deg) translateY(0); }
      50%      { transform: rotate(-1.2deg) translateY(-8px); }
    }
    .pdf-head {
      display: flex !important;
      gap: 10px !important;
      padding-bottom: 10px !important;
      border-bottom: 2px solid var(--acc) !important;
      margin-bottom: 14px !important;
    }
    .pdf-logo {
      width: 30px !important; height: 30px !important;
      background: var(--acc) !important;
      border-radius: 6px !important;
    }
    .pdf-lines { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; justify-content: center !important; }
    .pdf-lines div {
      height: 5px !important;
      background: var(--kt-ink) !important;
      border-radius: 2px !important;
    }
    .pdf-lines div.short { width: 55% !important; }
    .pdf-body { display: flex !important; flex-direction: column !important; gap: 7px !important; }
    .pdf-body .pdf-row {
      height: 4px !important;
      background: rgba(26,24,48,0.15) !important;
      border-radius: 2px !important;
    }
    .pdf-body .pdf-row.short { width: 70% !important; }
    .pdf-body .pdf-row.shorter { width: 45% !important; }
    .pdf-stamp {
      position: absolute !important;
      bottom: 18px !important;
      right: 18px !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 11px !important;
      color: var(--acc) !important;
      border: 2.5px solid var(--acc) !important;
      padding: 6px 11px !important;
      border-radius: 6px !important;
      transform: rotate(-12deg) !important;
      background: rgba(255, 255, 255, 0.85) !important;
      letter-spacing: 0.12em !important;
    }

    /* ---- Mock: Soon (sport) ---- */
    .mock-soon {
      background: var(--kt-paper) !important;
      border: 1.5px dashed var(--acc) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: flex-start !important;
      padding: 28px 32px !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .mock-soon::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255,184,0,0.06) 18px, rgba(255,184,0,0.06) 36px) !important;
      pointer-events: none !important;
    }
    .soon-stamp {
      font-family: var(--f-hand) !important;
      font-size: 68px !important;
      color: var(--acc) !important;
      transform: rotate(-5deg) !important;
      margin-bottom: 4px !important;
      font-weight: 700 !important;
      line-height: 0.9 !important;
      text-shadow: 3px 3px 0 var(--kt-ink) !important;
    }
    .mock-soon .soon-sub {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      color: var(--kt-ink) !important;
      margin-bottom: 20px !important;
      position: relative !important;
    }
    .soon-form {
      display: flex !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: 380px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .soon-form input {
      flex: 1 !important;
      padding: 11px 14px !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 10px !important;
      font-family: var(--f-body) !important;
      font-size: 14px !important;
      background: var(--kt-white) !important;
      outline: none !important;
      box-shadow: 3px 3px 0 var(--kt-ink) !important;
    }
    .soon-form button {
      padding: 11px 18px !important;
      background: var(--kt-ink) !important;
      color: var(--kt-paper) !important;
      border-radius: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 13px !important;
      box-shadow: 3px 3px 0 var(--acc) !important;
      transition: transform .3s !important;
    }
    .soon-form button:hover { transform: translate(-2px, -2px) !important; }

    /* ---- Features row ---- */
    .p-features {
      display: flex !important;
      gap: 14px !important;
      padding-top: 18px !important;
      border-top: 1px dashed rgba(26,24,48,0.15) !important;
      flex-wrap: wrap !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .p-feat {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 12.5px !important;
      color: var(--kt-ink) !important;
      padding: 6px 12px !important;
      background: var(--acc-xl) !important;
      border-radius: 999px !important;
      border: 1px solid var(--acc) !important;
    }
    .p-feat svg {
      width: 12px !important; height: 12px !important;
      stroke: var(--acc) !important;
      fill: none !important;
      stroke-width: 3 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    /* Auto-rotate progress bar */
    .picker-progress {
      position: absolute !important;
      left: 0 !important; right: 0 !important; bottom: -1px !important;
      height: 2px !important;
      background: transparent !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }
    .picker-progress::after {
      content: '';
      display: block !important;
      height: 100% !important;
      width: 0%;
      background: var(--kt-coral) !important;
      transition: width .3s linear !important;
    }
    .picker-progress.run::after {
      animation: progressBar 5s linear infinite !important;
    }
    @keyframes progressBar {
      from { width: 0%; }
      to   { width: 100%; }
    }

    /* Responsive */
    @media (max-width: 1100px) {
      .picker {
        grid-template-columns: 1fr !important;
        gap: 56px !important;
      }
      .picker-stage { height: 580px !important; }
    }
    @media (max-width: 680px) {
      .picker-stage { height: 560px !important; }
      .p-frame { padding: 28px 24px 24px !important; }
      .p-title { font-size: 20px !important; }
      .pdf-sheet { width: 80% !important; }
    }

    /* ==========================================================
       SECTION: FEATURES (dark)
       ========================================================== */
    .features {
      background: var(--kt-slate) !important;
      color: var(--kt-white) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .features::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
      background-size: 48px 48px !important;
      mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%) !important;
      -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%) !important;
      pointer-events: none !important;
    }
    .features::after {
      content: '';
      position: absolute !important;
      width: 500px !important; height: 500px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, var(--kt-violet) 0%, transparent 60%) !important;
      opacity: 0.3 !important;
      top: -120px !important; left: -120px !important;
      filter: blur(30px) !important;
      pointer-events: none !important;
    }

    .features .section-head h2 { color: var(--kt-white) !important; }
    .features .section-head p { color: rgba(255, 255, 255, 0.65) !important; }
    .features .eyebrow {
      color: var(--kt-coral-l) !important;
      border-color: var(--kt-coral) !important;
      background: rgba(255, 77, 46, 0.08) !important;
    }

    .features .section-head h2 em {
      font-style: normal !important;
      color: var(--kt-coral) !important;
      font-family: var(--f-hand) !important;
      font-weight: 700 !important;
    }

    .feature-grid {
      display: grid !important;
      grid-template-columns: repeat(6, 1fr) !important;
      gap: 20px !important;
    }

    .feature {
      background: var(--kt-slate-m) !important;
      border: 1px solid var(--kt-slate-l) !important;
      border-radius: 22px !important;
      padding: 36px 32px !important;
      position: relative !important;
      overflow: hidden !important;
      transition: transform .5s var(--e-soft), border-color .4s !important;
    }
    .feature:hover {
      transform: translateY(-6px) !important;
      border-color: var(--kt-violet-l) !important;
    }
    .feature::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background: radial-gradient(circle 280px at var(--mx, 80%) var(--my, 20%), rgba(123, 101, 240, 0.2), transparent 65%) !important;
      opacity: 0 !important;
      transition: opacity .4s !important;
      z-index: 0 !important;
    }
    .feature:hover::before { opacity: 1 !important; }
    .feature.highlight::before {
      background: radial-gradient(circle 280px at var(--mx, 80%) var(--my, 20%), rgba(255, 255, 255, 0.12), transparent 65%) !important;
    }
    .feature.accent::before {
      background: radial-gradient(circle 280px at var(--mx, 80%) var(--my, 20%), rgba(255, 255, 255, 0.15), transparent 65%) !important;
    }

    .feature .icon-wrap {
      width: 52px !important; height: 52px !important;
      background: rgba(91, 63, 232, 0.15) !important;
      border: 1px solid var(--kt-violet) !important;
      border-radius: 14px !important;
      display: grid !important;
      place-items: center !important;
      margin-bottom: 22px !important;
      position: relative !important;
      z-index: 1 !important;
    }
    .feature .icon-wrap svg {
      width: 24px !important; height: 24px !important;
      stroke: var(--kt-violet-l) !important;
      fill: none !important; stroke-width: 2 !important;
      stroke-linecap: round !important; stroke-linejoin: round !important;
    }

    .feature h3 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 21px !important;
      letter-spacing: -0.02em !important;
      margin-bottom: 12px !important;
      color: var(--kt-white) !important;
      position: relative !important; z-index: 1 !important;
    }
    .feature p {
      font-size: 15px !important;
      color: rgba(255, 255, 255, 0.65) !important;
      line-height: 1.55 !important;
      position: relative !important; z-index: 1 !important;
    }

    /* Bento spans */
    .feature.span-2 { grid-column: span 2 !important; }
    .feature.span-3 { grid-column: span 3 !important; }

    .feature.highlight {
      background: linear-gradient(135deg, var(--kt-violet) 0%, var(--kt-violet-d) 100%) !important;
      border-color: var(--kt-violet-l) !important;
    }
    .feature.highlight .icon-wrap {
      background: rgba(255, 255, 255, 0.18) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
    }
    .feature.highlight .icon-wrap svg { stroke: var(--kt-white) !important; }
    .feature.highlight p { color: rgba(255, 255, 255, 0.8) !important; }

    .feature.accent {
      background: linear-gradient(135deg, var(--kt-coral) 0%, var(--kt-coral-d) 100%) !important;
      border-color: var(--kt-coral-l) !important;
    }
    .feature.accent .icon-wrap {
      background: rgba(255, 255, 255, 0.18) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
    }
    .feature.accent .icon-wrap svg { stroke: var(--kt-white) !important; }
    .feature.accent p { color: rgba(255, 255, 255, 0.88) !important; }

    @media (max-width: 1024px) {
      .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .feature.span-2, .feature.span-3 { grid-column: span 1 !important; }
    }
    @media (max-width: 560px) {
      .feature-grid { grid-template-columns: 1fr !important; }
    }

    /* ==========================================================
       SECTION: JUSTIFICATIFS SPOTLIGHT — Pipeline Animé
       ========================================================== */
    .spotlight {
      background: var(--kt-fog) !important;
      color: var(--kt-ink) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .spotlight::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        linear-gradient(to right, rgba(26, 24, 48, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 24, 48, 0.035) 1px, transparent 1px) !important;
      background-size: 48px 48px !important;
      mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%) !important;
      -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%) !important;
    }
    .spotlight::after {
      content: '';
      position: absolute !important;
      width: 600px !important; height: 600px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, var(--kt-violet) 0%, transparent 55%) !important;
      opacity: 0.06 !important;
      top: -200px !important; right: -200px !important;
      pointer-events: none !important;
    }

    .spotlight .section-head { position: relative !important; z-index: 2 !important; }
    .spotlight .section-head h2 { color: var(--kt-ink) !important; }
    .spotlight .section-head h2 em {
      font-style: normal !important;
      font-family: var(--f-hand) !important;
      color: var(--kt-coral) !important;
      font-weight: 700 !important;
      font-size: 1.1em !important;
      padding: 0 4px !important;
    }
    .spotlight .section-head p { color: var(--kt-gray) !important; }
    .spotlight .eyebrow {
      color: var(--kt-coral) !important;
      border-color: var(--kt-coral) !important;
      background: var(--kt-coral-xl) !important;
    }

    /* ----- Pipeline track ----- */
    .pipeline {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr auto 1fr !important;
      align-items: start !important;
      gap: 0 !important;
      position: relative !important;
      z-index: 2 !important;
    }

    /* --- Stations --- */
    .station {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
      transition: opacity 1s var(--e-soft), transform 1s var(--e-soft) !important;
    }
    .pipeline.play .station {
      animation: stationIn .8s var(--e-soft) forwards !important;
    }
    /* Fallback: show stations if prefers-reduced-motion or no-JS */
    @media (prefers-reduced-motion: reduce) {
      .station { opacity: 1 !important; transform: none !important; }
      .connector-fill { transform: scaleX(1) !important; }
      .connector-dot { display: none !important; }
    }
    .pipeline.play .station:nth-child(1) { animation-delay: 0s !important; }
    .pipeline.play .station:nth-child(3) { animation-delay: 1.8s !important; }
    .pipeline.play .station:nth-child(5) { animation-delay: 3.6s !important; }
    @keyframes stationIn {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .station-top {
      text-align: center !important;
      margin-bottom: 18px !important;
    }
    .station-avatar {
      width: 64px !important; height: 64px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      margin: 0 auto 10px !important;
      position: relative !important;
      border: 2.5px solid var(--s-color) !important;
      background: rgba(255, 255, 255, 0.06) !important;
    }
    .station-avatar svg {
      width: 26px !important; height: 26px !important;
      stroke: var(--s-color) !important;
      fill: none !important;
      stroke-width: 2 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }
    /* Pulse ring on avatar */
    .station-avatar::after {
      content: '';
      position: absolute !important;
      inset: -6px !important;
      border-radius: 50% !important;
      border: 2px solid var(--s-color) !important;
      opacity: 0;
    }
    .pipeline.play .station.active .station-avatar::after {
      animation: avatarPulse 1.5s ease-out !important;
    }
    @keyframes avatarPulse {
      0%   { opacity: 0.6; transform: scale(0.9); }
      100% { opacity: 0; transform: scale(1.4); }
    }

    .station-role {
      font-family: var(--f-hand) !important;
      font-size: 24px !important;
      font-weight: 700 !important;
      color: var(--s-color) !important;
      transform: rotate(-2deg) !important;
    }
    .station-step {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 10px !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      color: var(--kt-gray) !important;
      margin-bottom: 4px !important;
    }

    /* --- Mock UI cards --- */
    .station-card {
      background: var(--kt-slate-m) !important;
      border: 1.5px solid var(--kt-slate-l) !important;
      border-radius: 20px !important;
      padding: 24px !important;
      position: relative !important;
      overflow: hidden !important;
      transition: border-color .6s !important;
    }
    .station.active .station-card {
      border-color: var(--s-color) !important;
    }
    .station-card::before {
      content: '';
      position: absolute !important;
      top: -80px !important; right: -80px !important;
      width: 200px !important; height: 200px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, var(--s-color), transparent 65%) !important;
      opacity: 0 !important;
      transition: opacity .8s !important;
    }
    .station.active .station-card::before { opacity: 0.1 !important; }

    .station-card h4 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 17px !important;
      color: var(--kt-white) !important;
      margin-bottom: 16px !important;
      letter-spacing: -0.01em !important;
    }

    /* Mock form fields (parent) */
    .mock-field {
      margin-bottom: 10px !important;
    }
    .mock-field label {
      display: block !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 10px !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.4) !important;
      margin-bottom: 5px !important;
    }
    .mock-field .mock-input {
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid var(--kt-slate-l) !important;
      border-radius: 10px !important;
      padding: 10px 14px !important;
      font-family: var(--f-body) !important;
      font-size: 13px !important;
      color: var(--kt-white) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    .mock-input .chevron {
      width: 14px !important; height: 14px !important;
      stroke: rgba(255,255,255,0.4) !important;
      fill: none !important; stroke-width: 2 !important;
      stroke-linecap: round !important; stroke-linejoin: round !important;
    }

    /* Typing animation in mock fields */
    .mock-typing {
      display: inline-block !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      width: 0;
      border-right: 2px solid var(--s-color) !important;
    }
    .pipeline.play .station:nth-child(1) .mock-typing {
      animation: typeIn 1.2s var(--e-soft) 0.5s forwards !important;
    }
    @keyframes typeIn {
      0%   { width: 0; border-right-color: var(--s-color); }
      90%  { width: 100%; border-right-color: var(--s-color); }
      100% { width: 100%; border-right-color: transparent; }
    }

    .mock-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      width: 100% !important;
      padding: 12px 16px !important;
      border-radius: 12px !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 13px !important;
      margin-top: 14px !important;
      transition: transform .3s, box-shadow .3s !important;
      cursor: pointer !important;
    }
    .mock-btn:hover { transform: translateY(-2px) !important; }
    .mock-btn.coral {
      background: var(--kt-coral) !important;
      color: var(--kt-white) !important;
      box-shadow: 0 6px 20px -6px rgba(255, 77, 46, 0.6) !important;
    }
    .mock-btn.violet {
      background: var(--kt-violet) !important;
      color: var(--kt-white) !important;
      box-shadow: 0 6px 20px -6px rgba(91, 63, 232, 0.6) !important;
    }
    .mock-btn.mint-btn {
      background: var(--kt-mint) !important;
      color: var(--kt-white) !important;
      box-shadow: 0 6px 20px -6px rgba(0, 168, 118, 0.6) !important;
    }
    .mock-btn.ghost-btn {
      background: transparent !important;
      border: 1px solid var(--kt-slate-l) !important;
      color: rgba(255, 255, 255, 0.7) !important;
      box-shadow: none !important;
    }

    .mock-btn-row {
      display: flex !important;
      gap: 8px !important;
      margin-top: 14px !important;
    }
    .mock-btn-row .mock-btn { margin-top: 0 !important; }

    /* Notification badge */
    .notif-new {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 10px !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      padding: 4px 10px !important;
      border-radius: 999px !important;
      background: var(--kt-violet) !important;
      color: var(--kt-white) !important;
      margin-bottom: 12px !important;
    }
    .notif-new .ping {
      width: 6px !important; height: 6px !important;
      border-radius: 50% !important;
      background: var(--kt-white) !important;
      animation: ping 1.5s ease-in-out infinite !important;
    }
    @keyframes ping {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    .notif-detail {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.65) !important;
      line-height: 1.5 !important;
      margin-bottom: 4px !important;
    }
    .notif-detail strong { color: var(--kt-white) !important; font-weight: 700 !important; }

    /* Mini PDF in admin card */
    .mini-doc {
      background: var(--kt-white) !important;
      border-radius: 8px !important;
      padding: 14px 16px !important;
      position: relative !important;
      margin-bottom: 14px !important;
    }
    .mini-doc-head {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding-bottom: 10px !important;
      border-bottom: 2px solid var(--kt-mint) !important;
      margin-bottom: 10px !important;
    }
    .mini-doc-logo {
      width: 22px !important; height: 22px !important;
      background: var(--kt-coral) !important;
      border-radius: 5px !important;
    }
    .mini-doc-title {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 11px !important;
      color: var(--kt-ink) !important;
      letter-spacing: -0.01em !important;
    }
    .mini-doc-lines {
      display: flex !important;
      flex-direction: column !important;
      gap: 5px !important;
    }
    .mini-doc-line {
      height: 4px !important;
      background: rgba(26, 24, 48, 0.12) !important;
      border-radius: 2px !important;
    }
    .mini-doc-line.w70 { width: 70% !important; }
    .mini-doc-line.w50 { width: 50% !important; }
    .mini-doc-line.w85 { width: 85% !important; }

    /* Timeline status dots inside PDF */
    .status-timeline {
      display: flex !important;
      align-items: center !important;
      gap: 0 !important;
      margin-top: 12px !important;
      padding: 8px 0 !important;
    }
    .st-node {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 4px !important;
      position: relative !important;
      z-index: 2 !important;
    }
    .st-dot {
      width: 20px !important; height: 20px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      border: 2px solid !important;
    }
    .st-dot svg {
      width: 10px !important; height: 10px !important;
      stroke: currentColor !important;
      fill: none !important; stroke-width: 3 !important;
      stroke-linecap: round !important; stroke-linejoin: round !important;
    }
    .st-dot.coral  { background: var(--kt-coral-xl) !important; border-color: var(--kt-coral) !important; color: var(--kt-coral) !important; }
    .st-dot.violet { background: var(--kt-violet-xl) !important; border-color: var(--kt-violet) !important; color: var(--kt-violet) !important; }
    .st-dot.mint   { background: var(--kt-mint-xl) !important; border-color: var(--kt-mint) !important; color: var(--kt-mint) !important; }
    .st-label {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 9px !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
      color: var(--kt-gray) !important;
    }
    .st-line {
      flex: 1 !important;
      height: 2px !important;
      background: rgba(26, 24, 48, 0.15) !important;
      margin: 0 -2px !important;
      position: relative !important;
      top: -10px !important;
    }

    /* Stamp */
    .doc-stamp {
      position: absolute !important;
      top: 50% !important;
      right: 10px !important;
      transform: translateY(-50%) rotate(-14deg);
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: 16px !important;
      color: var(--kt-mint) !important;
      border: 3px solid var(--kt-mint) !important;
      padding: 4px 10px !important;
      border-radius: 6px !important;
      letter-spacing: 0.1em !important;
      opacity: 0;
      background: rgba(230, 250, 244, 0.85) !important;
    }
    .pipeline.play .doc-stamp {
      animation: stampIn .4s var(--e-snap) 4.5s forwards !important;
    }
    @keyframes stampIn {
      0%   { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(2); }
      60%  { opacity: 1; transform: translateY(-50%) rotate(-14deg) scale(0.9); }
      100% { opacity: 1; transform: translateY(-50%) rotate(-14deg) scale(1); }
    }

    /* --- Connectors --- */
    .connector {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 6px !important;
      align-self: center !important;
      margin-top: 40px !important;
      position: relative !important;
      min-width: 80px !important;
    }
    .connector-track {
      width: 100% !important;
      height: 3px !important;
      background: rgba(26, 24, 48, 0.12) !important;
      border-radius: 3px !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .connector-fill {
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(90deg, var(--c-from), var(--c-to)) !important;
      border-radius: 3px !important;
      transform: scaleX(0);
      transform-origin: left !important;
    }
    .pipeline.play .connector:nth-child(2) .connector-fill {
      animation: connectorDraw .9s var(--e-soft) 1.0s forwards !important;
    }
    .pipeline.play .connector:nth-child(4) .connector-fill {
      animation: connectorDraw .9s var(--e-soft) 2.8s forwards !important;
    }
    @keyframes connectorDraw {
      to { transform: scaleX(1); }
    }

    /* Traveling dot */
    .connector-dot {
      position: absolute !important;
      top: 50% !important;
      left: -4px;
      width: 12px !important; height: 12px !important;
      border-radius: 50% !important;
      background: var(--c-to) !important;
      box-shadow: 0 0 14px var(--c-to), 0 0 30px var(--c-to) !important;
      transform: translateY(-50%) !important;
      opacity: 0;
      margin-top: 20px !important;
    }
    .pipeline.play .connector:nth-child(2) .connector-dot {
      animation: dotTravel 1s var(--e-soft) 1.2s forwards !important;
    }
    .pipeline.play .connector:nth-child(4) .connector-dot {
      animation: dotTravel 1s var(--e-soft) 3.0s forwards !important;
    }
    @keyframes dotTravel {
      0%   { left: -4px; opacity: 1; }
      90%  { left: calc(100% - 8px); opacity: 1; }
      100% { left: calc(100% - 8px); opacity: 0; }
    }

    .connector-label {
      font-family: var(--f-hand) !important;
      font-size: 16px !important;
      color: var(--kt-gray) !important;
      margin-top: 28px !important;
      white-space: nowrap !important;
      transform: rotate(-2deg);
      opacity: 0;
    }
    .pipeline.play .connector:nth-child(2) .connector-label {
      animation: fadeUp .5s var(--e-soft) 1.6s forwards !important;
    }
    .pipeline.play .connector:nth-child(4) .connector-label {
      animation: fadeUp .5s var(--e-soft) 3.4s forwards !important;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px) rotate(-2deg); }
      to   { opacity: 1; transform: translateY(0) rotate(-2deg); }
    }

    /* --- Active glow on station --- */
    .station.active .station-card {
      box-shadow: 0 0 40px -10px var(--s-color) !important;
    }

    /* --- PDF export banner below pipeline --- */
    .pdf-banner {
      margin-top: 64px !important;
      padding: 22px 32px !important;
      background: var(--kt-white) !important;
      border: 1.5px solid var(--kt-ink) !important;
      border-radius: 16px !important;
      display: flex !important;
      align-items: center !important;
      gap: 18px !important;
      max-width: 660px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      position: relative !important;
      z-index: 2 !important;
      opacity: 0;
      box-shadow: 4px 4px 0 var(--kt-ink) !important;
    }
    .pipeline.play ~ .pdf-banner {
      animation: fadeUp .6s var(--e-soft) 5.2s forwards !important;
    }
    .pdf-banner .pb-icon {
      width: 44px !important; height: 44px !important;
      background: var(--kt-mint) !important;
      border-radius: 12px !important;
      display: grid !important;
      place-items: center !important;
      flex-shrink: 0 !important;
    }
    .pdf-banner .pb-icon svg { width: 22px !important; height: 22px !important; stroke: var(--kt-white) !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
    .pdf-banner .pb-txt {
      font-size: 15px !important;
      color: var(--kt-gray) !important;
      line-height: 1.5 !important;
    }
    .pdf-banner .pb-txt strong {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      color: var(--kt-ink) !important;
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .pipeline {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
      }
      .connector {
        min-width: 0 !important;
        min-height: 60px !important;
        margin-top: 0 !important;
        padding: 10px 0 !important;
      }
      .connector-track {
        width: 3px !important;
        height: 40px !important;
      }
      .connector-fill {
        transform: scaleY(0);
        transform-origin: top !important;
      }
      .pipeline.play .connector .connector-fill {
        animation-name: connectorDrawV !important;
      }
      @keyframes connectorDrawV {
        to { transform: scaleY(1); }
      }
      .connector-dot { display: none !important; }
      .connector-label { margin-top: 4px !important; margin-left: 16px !important; }
    }

    /* ==========================================================
       CTA BAND
       ========================================================== */
    .cta-band {
      padding: 120px 0 !important;
      background: var(--kt-slate) !important;
      color: var(--kt-white) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .cta-band::before {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background:
        radial-gradient(circle at 20% 20%, rgba(91, 63, 232, 0.35), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(255, 77, 46, 0.25), transparent 45%) !important;
    }
    .cta-band::after {
      content: '';
      position: absolute !important;
      inset: 0 !important;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
      background-size: 48px 48px !important;
    }

    .cta-inner {
      position: relative !important;
      z-index: 2 !important;
      text-align: center !important;
      max-width: 760px !important;
      margin-inline: auto !important;
    }
    .cta-band .eyebrow {
      background: rgba(255, 77, 46, 0.1) !important;
      border-color: var(--kt-coral) !important;
      color: var(--kt-coral-l) !important;
      margin-bottom: 28px !important;
    }
    .cta-band h2 {
      font-family: var(--f-display) !important;
      font-weight: 800 !important;
      font-size: clamp(36px, 5vw, 64px) !important;
      line-height: 1.05 !important;
      letter-spacing: -0.03em !important;
      margin-bottom: 20px !important;
      color: var(--kt-white) !important;
    }
    .cta-band h2 em {
      font-style: normal !important;
      font-family: var(--f-hand) !important;
      color: var(--kt-coral) !important;
      font-weight: 700 !important;
      padding: 0 6px !important;
    }
    .cta-band p {
      font-size: 19px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      margin-bottom: 40px !important;
      line-height: 1.5 !important;
    }

    /* cta-form : colonne → .form-row (pill dark) + .consent-label en dessous */
    .cta-form {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      max-width: 520px !important;
      margin-inline: auto !important;
    }
    .cta-form .form-row {
      display: flex !important;
      gap: 12px !important;
      padding: 8px !important;
      background: var(--kt-slate-m) !important;
      border: 1.5px solid var(--kt-slate-l) !important;
      border-radius: 16px !important;
      transition: border-color .3s !important;
    }
    .cta-form .form-row:focus-within { border-color: var(--kt-coral) !important; }
    .cta-form input {
      flex: 1 !important;
      border: none !important;
      outline: none !important;
      padding: 14px 16px !important;
      font-family: var(--f-body) !important;
      font-size: 16px !important;
      background: transparent !important;
      color: var(--kt-white) !important;
    }
    .cta-form input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    /* Spécificité (0,2,2) > reset global (0,1,3) → bouton coral visible */
    body.kiteba-landing .cta-form button {
      background: var(--kt-coral) !important;
      color: var(--kt-white) !important;
      padding: 14px 24px !important;
      border-radius: 10px !important;
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      white-space: nowrap !important;
      transition: background .25s !important;
    }
    body.kiteba-landing .cta-form button:hover { background: var(--kt-coral-d) !important; }

    .cta-fine {
      margin-top: 20px !important;
      font-size: 13px !important;
      color: rgba(255, 255, 255, 0.4) !important;
    }

    /* ==========================================================
       FOOTER
       ========================================================== */
    .site-footer {
      background: var(--kt-slate) !important;
      color: rgba(255, 255, 255, 0.55) !important;
      padding: 60px 0 40px !important;
      border-top: 1px solid var(--kt-slate-l) !important;
      position: relative !important;
    }
    .footer-grid {
      display: grid !important;
      grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
      gap: 48px !important;
      padding-bottom: 40px !important;
      border-bottom: 1px solid var(--kt-slate-l) !important;
    }
    .footer-col h4 {
      font-family: var(--f-display) !important;
      font-weight: 700 !important;
      font-size: 13px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.12em !important;
      color: var(--kt-white) !important;
      margin-bottom: 18px !important;
    }
    .footer-col ul { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
    .footer-col a {
      font-size: 14px !important;
      transition: color .2s !important;
    }
    .footer-col a:hover { color: var(--kt-coral-l) !important; }

    .footer-col.brand p {
      font-size: 14px !important;
      margin-top: 18px !important;
      line-height: 1.6 !important;
      max-width: 300px !important;
    }
    .footer-col.brand .logo .logo-word { color: var(--kt-white) !important; }

    .footer-bottom {
      padding-top: 30px !important;
      display: flex !important;
      justify-content: space-between !important;
      font-size: 13px !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
    }

    @media (max-width: 800px) {
      .footer-grid { grid-template-columns: 1fr 1fr !important; }
    }

    /* ==========================================================
       RESPONSIVE ADJUSTMENTS
       ========================================================== */
    @media (max-width: 1100px) {
      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 80px !important;
        min-height: 0 !important;
      }
      .hero-right {
        width: 100% !important;
        max-width: 520px !important;
        height: 560px !important;
        justify-self: center !important;
      }
      .hero { padding: 48px 0 80px !important; }
      .section { padding: 80px 0 !important; }
    }
    /* ══════════════════════════════════════════
       MOBILE HERO — dark edition  (≤ 680px)
       ══════════════════════════════════════════ */
    @media (max-width: 680px) {

      /* 1 ── Hero : fond sombre, fini les blobs violets qui débordent */
      .hero {
        background: var(--kt-night) !important;
        padding: 24px 0 56px !important;
      }

      /* Gradient mesh atmosphérique — remplace les blobs */
      .hero::before {
        background-image: none !important;
        background:
          radial-gradient(ellipse 160% 55% at 110% 110%, rgba(255,77,46,0.13), transparent),
          radial-gradient(ellipse 110% 80% at -15%  -5%, rgba(91,63,232,0.22), transparent),
          radial-gradient(ellipse  60% 50% at  50%  50%, rgba(91,63,232,0.05), transparent) !important;
        background-size: auto !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
      }

      /* Blobs originaux masqués sur mobile */
      .hero-blob { opacity: 0 !important; }

      /* 2 ── Grid : colonne unique */
      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        min-height: 0 !important;
      }

      /* 3 ── Eyebrow : wrappable + variante dark */
      .hero-eyebrow {
        display: flex !important;
        white-space: normal !important;
        max-width: 100% !important;
        color: rgba(254,254,254,0.55) !important;
        border-color: rgba(254,254,254,0.18) !important;
        background: rgba(254,254,254,0.05) !important;
        font-size: 10px !important;
        letter-spacing: 0.12em !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
      }
      .hero-eyebrow .dot {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
      }

      /* 4 ── Titre : blanc, rotator autorisé à wrapper */
      h1.hero-title {
        color: var(--kt-white) !important;
        font-size: clamp(30px, 8.5vw, 40px) !important;
      }
      .rotator > span {
        white-space: normal !important;
        word-break: keep-all !important;
      }

      /* 5 ── Sous-titre */
      .hero-sub {
        max-width: 100% !important;
        margin-bottom: 32px !important;
      }
      .hero-sub-list { color: rgba(254,254,254,0.5) !important; }
      .hero-sub-close { color: rgba(254,254,254,0.92) !important; }

      /* "Pas vos outils." sur fond sombre → même blanc que la ligne 1 */
      .hero-title-contrast { color: rgba(254,254,254,0.65) !important; }

      /* 6 ── Boutons : pleine largeur empilés */
      .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
      }
      .hero-actions .btn { justify-content: center !important; width: 100% !important; }

      /* Ghost button adapté au fond sombre */
      body.kiteba-landing .hero-actions .btn-ghost {
        color: rgba(254,254,254,0.82) !important;
        border-color: rgba(254,254,254,0.22) !important;
        background: rgba(254,254,254,0.05) !important;
      }
      body.kiteba-landing .hero-actions .btn-ghost:hover {
        background: rgba(254,254,254,0.11) !important;
        color: var(--kt-white) !important;
      }

      /* 7 ── Trust stats : texte clair */
      .hero-trust { gap: 18px !important; }
      .hero-trust .sep { display: none !important; }
      .hero-trust div { color: rgba(254,254,254,0.45) !important; }
      .hero-trust strong { color: var(--kt-white) !important; }

      /* 8 ── Carte droite : réduite + centrée */
      .hero-right {
        height: 420px !important;
        max-width: 380px !important;
        margin-inline: auto !important;
      }
      .schedule-card { height: 380px !important; }
      .hero-pencil { display: none !important; }

      /* 9 ── Float cards : repositionnées sur petit écran */
      .float-card { min-width: 160px !important; padding: 10px 12px !important; }
      .float-card.grade   { right: -4% !important; }
      .float-card.justif  { left: -4%  !important; }
    }

    @media (max-width: 560px) {
      body { font-size: 16px !important; }
    }