.navbar-title-link {
      padding: 0 8px !important;
    }

    .navbar-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 520px;
      max-width: calc(100vw - 48px);
      height: 70px;
      overflow: hidden;
      line-height: 0;
    }

    .navbar-title-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
      transform: translateY(-1px) scale(1.08);
      transform-origin: center center;
    }

    @media (max-width: 640px) {
      .navbar-title-link {
        padding: 0 4px !important;
      }

      .navbar-title {
        width: 360px;
        max-width: calc(100vw - 24px);
        height: 58px;
      }

      .navbar-title-image {
        transform: translateY(-1px) scale(1.06);
      }
    }

    .uk-notification.uk-notification-top-center {
      top: var(--badgeuse-notification-top, calc(env(safe-area-inset-top) + 88px));
    }

    .uk-notification-top-center .uk-notification-message {
      animation: badgeuseToastSlideDown 0.24s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }

    @keyframes badgeuseToastSlideDown {
      from {
        opacity: 0;
        transform: translateY(-12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .uk-notification-top-center .uk-notification-message {
        animation: none;
        will-change: auto;
      }
    }

    /* Carte principale autour du PIN + boutons */
    .badgeuse-card {
      border-radius: 10px;
      padding: 18px 16px;
    }

    .badgeuse-main-column {
      box-sizing: border-box;
    }

    /* PIN plus gros, centré */
    .pin-input {
      font-size: 26px;
      height: 56px;
      text-align: center;
      letter-spacing: 0.15em;
    }

    .pin-remember-control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 10px;
      color: #52606d;
      font-size: 14px;
      line-height: 1.3;
      user-select: none;
    }

    .pin-remember-control__input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--ba-primary);
    }

    /* Boutons plus gros, pleine largeur sur mobile */
    .badgeuse-btn-large {
      font-size: 18px;
      padding: 14px 20px;
      border-radius: 8px;
      font-weight: 400;
      letter-spacing: 0.01em;
    }

    .badgeuse-btn-icon-wrap {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 6px;
    }

    .manual-punch-icon-svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: block;
    }

    .badgeuse-btn-label-mobile {
      display: inline;
    }

    #btnEnroll .badgeuse-btn-icon-wrap,
    #btnAdmin .badgeuse-btn-icon-wrap {
      margin-right: 0;
    }

    #btnEnroll,
    #btnAdmin {
      min-height: 70px;
      padding: 10px 20px;
      color: var(--ba-primary);
    }

    #btnEnroll:hover,
    #btnEnroll:focus-visible,
    #btnAdmin:hover,
    #btnAdmin:focus-visible {
      color: #0b446a;
    }

    .passkey-enroll-lock,
    .admin-access-gear {
      width: 58px;
      height: 58px;
      display: block;
      color: currentColor;
      filter: drop-shadow(0 8px 16px rgba(16, 80, 123, 0.14));
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    #btnEnroll:hover .passkey-enroll-lock,
    #btnEnroll:focus-visible .passkey-enroll-lock,
    #btnAdmin:hover .admin-access-gear,
    #btnAdmin:focus-visible .admin-access-gear {
      transform: translateY(-1px) scale(1.03);
      filter: drop-shadow(0 10px 18px rgba(16, 80, 123, 0.18));
    }

    .passkey-enroll-lock__body {
      fill: var(--ba-bg-white);
      stroke: currentColor;
      stroke-width: 5;
      stroke-linejoin: round;
    }

    .passkey-enroll-lock__shackle,
    .passkey-enroll-lock__keyhole {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .passkey-enroll-lock__keyhole {
      stroke-width: 4;
    }

    .admin-access-gear__ring,
    .admin-access-gear__teeth {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .punch-action-icon {
      width: 42px;
      height: 42px;
      display: block;
      color: currentColor;
      filter: drop-shadow(0 7px 14px rgba(16, 80, 123, 0.12));
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    #btnEnter:hover .punch-action-icon,
    #btnEnter:focus-visible .punch-action-icon,
    #btnExit:hover .punch-action-icon,
    #btnExit:focus-visible .punch-action-icon {
      transform: translateY(-1px) scale(1.03);
      filter: drop-shadow(0 9px 16px rgba(16, 80, 123, 0.16));
    }

    .punch-action-icon__door,
    .punch-action-icon__threshold,
    .punch-action-icon__arrow,
    .punch-action-icon__handle {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .punch-action-icon__door {
      transform-box: fill-box;
    }

    #btnEnter.is-punch-cinematic,
    #btnExit.is-punch-cinematic {
      opacity: 1;
      pointer-events: none;
      transform: translateY(-1px) scale(1.015);
      box-shadow: 0 10px 22px rgba(16, 80, 123, 0.18);
    }

    #btnEnter.is-punch-cinematic[disabled],
    #btnExit.is-punch-cinematic[disabled] {
      opacity: 1;
    }

    #btnEnter.is-punch-cinematic .punch-action-icon,
    #btnExit.is-punch-cinematic .punch-action-icon {
      animation: punchAcceptedIconPulse 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      filter: drop-shadow(0 10px 18px rgba(16, 80, 123, 0.2));
    }

    #btnEnter.is-punch-cinematic .punch-action-icon__arrow {
      animation: punchEnterArrow 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    #btnEnter.is-punch-cinematic .punch-action-icon__door {
      transform-origin: right center;
      animation: punchEnterDoor 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    #btnExit.is-punch-cinematic .punch-action-icon__arrow {
      animation: punchExitArrow 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    #btnExit.is-punch-cinematic .punch-action-icon__door {
      transform-origin: left center;
      animation: punchExitDoor 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes punchAcceptedIconPulse {
      0% {
        transform: scale(1);
      }
      42% {
        transform: scale(1.08);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes punchEnterArrow {
      0% {
        transform: translateX(-5px);
        opacity: 0.72;
      }
      62% {
        transform: translateX(10px);
        opacity: 1;
      }
      100% {
        transform: translateX(6px);
        opacity: 1;
      }
    }

    @keyframes punchExitArrow {
      0% {
        transform: translateX(-2px);
        opacity: 0.72;
      }
      62% {
        transform: translateX(13px);
        opacity: 1;
      }
      100% {
        transform: translateX(8px);
        opacity: 1;
      }
    }

    @keyframes punchEnterDoor {
      0%,
      28% {
        transform: translateX(0) scaleX(1);
      }
      70% {
        transform: translateX(3px) scaleX(0.9);
      }
      100% {
        transform: translateX(0) scaleX(1);
      }
    }

    @keyframes punchExitDoor {
      0%,
      28% {
        transform: translateX(0) scaleX(1);
      }
      70% {
        transform: translateX(-3px) scaleX(0.9);
      }
      100% {
        transform: translateX(0) scaleX(1);
      }
    }

    .admin-access-cinematic {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 68px;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    }

    .admin-access-cinematic[hidden] {
      display: none !important;
    }

    .admin-access-cinematic.is-running {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .admin-access-cinematic__stage {
      position: relative;
      width: 118px;
      height: 72px;
      display: grid;
      place-items: center;
    }

    .admin-access-cinematic__gear {
      width: 68px;
      height: 68px;
      color: var(--ba-primary);
      filter: drop-shadow(0 9px 18px rgba(16, 80, 123, 0.18));
      opacity: 0;
      transform-origin: center;
    }

    .admin-access-cinematic.is-running .admin-access-cinematic__gear {
      animation:
        adminAccessGearAppear 0.18s ease forwards,
        adminAccessGearSpin 0.4s cubic-bezier(0.45, 0, 0.2, 1) 0.08s 1;
    }

    @keyframes adminAccessGearAppear {
      from {
        opacity: 0;
        transform: scale(0.78);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes adminAccessGearSpin {
      from {
        transform: rotate(0deg) scale(1);
      }
      to {
        transform: rotate(360deg) scale(1);
      }
    }

    .history-route-icon,
    .support-route-icon {
      color: currentColor;
      transform-origin: center;
    }

    .history-route-icon__cover,
    .history-route-icon__page,
    .history-route-icon__spine,
    .history-route-icon__line,
    .support-route-icon__body,
    .support-route-icon__band,
    .support-route-icon__tip,
    .support-route-icon__trace {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .history-route-icon__page {
      transform-box: fill-box;
      transform-origin: left center;
      transform: translateX(0) scaleX(1);
    }

    .history-route-icon__line {
      stroke-dasharray: 24;
      stroke-dashoffset: 0;
    }

    .support-route-icon__trace {
      stroke-dasharray: 80;
      stroke-dashoffset: 0;
    }

    .support-route-icon__body {
      fill: var(--ba-bg-white);
    }

    .last-punch-history-btn.is-route-cinematic .history-route-icon {
      animation: routeIconAppear 0.22s ease forwards;
    }

    .last-punch-history-btn.is-route-cinematic .history-route-icon__page {
      transform: translateX(-6px) scaleX(0.72);
      animation: historyPageOpen 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.16s forwards;
    }

    .last-punch-history-btn.is-route-cinematic .history-route-icon__line {
      stroke-dashoffset: 24;
      animation: historyLineReveal 0.42s ease forwards;
    }

    .last-punch-history-btn.is-route-cinematic .history-route-icon__line--one { animation-delay: 0.34s; }
    .last-punch-history-btn.is-route-cinematic .history-route-icon__line--two { animation-delay: 0.42s; }
    .last-punch-history-btn.is-route-cinematic .history-route-icon__line--three { animation-delay: 0.50s; }
    .last-punch-history-btn.is-route-cinematic .history-route-icon__line--four { animation-delay: 0.58s; }
    .last-punch-history-btn.is-route-cinematic .history-route-icon__line--five { animation-delay: 0.66s; }

    .last-punch-manual-btn.is-route-cinematic .support-route-icon {
      animation:
        routeIconAppear 0.2s ease forwards,
        supportPencilMove 0.84s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    }

    .last-punch-manual-btn.is-route-cinematic .support-route-icon__trace {
      stroke-dashoffset: 80;
      animation: supportTraceDraw 0.72s ease 0.38s forwards;
    }

    @keyframes routeIconAppear {
      from {
        opacity: 0;
        transform: translateY(6px) scale(0.82);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes historyPageOpen {
      0% {
        transform: translateX(-6px) scaleX(0.72);
      }
      100% {
        transform: translateX(0) scaleX(1);
      }
    }

    @keyframes historyLineReveal {
      from {
        stroke-dashoffset: 24;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes supportPencilMove {
      0% {
        transform: translate(-7px, 5px) rotate(-6deg) scale(1);
      }
      70% {
        transform: translate(4px, -2px) rotate(2deg) scale(1.03);
      }
      100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
    }

    @keyframes supportTraceDraw {
      from {
        stroke-dashoffset: 80;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    .badgeuse-btn-large[disabled] {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }

    @media (min-width: 640px) {
      .badgeuse-btn-large {
        min-width: 220px;
      }
    }

    @media (max-width: 640px) {
      .mobile-icon-only.badgeuse-btn-large {
        width: auto !important;
        min-width: 132px;
        padding: 14px 18px;
      }
    }

    @media (max-width: 430px) {
      .mobile-icon-only .badgeuse-btn-label-mobile {
        display: none;
      }

      .mobile-icon-only.badgeuse-btn-large {
        min-width: 84px;
        padding: 14px 22px;
      }

      .mobile-icon-only .badgeuse-btn-icon-wrap {
        margin-right: 0;
      }

      #btnEnroll .badgeuse-btn-label-mobile {
        display: inline;
      }

      #btnEnroll.badgeuse-btn-large {
        min-width: 84px;
        padding: 14px 22px;
      }

      #btnEnroll .badgeuse-btn-icon-wrap {
        margin-right: 0;
      }
    }

    /* Encadré pour le dernier pointage */
    .last-punch-wrapper {
      height: 132px;
      margin-top: 10px;
    }

    /* Le bloc garde une empreinte fixe dans la carte, masqué ou visible */
    #lastPunchBox {
      margin: 0;
      padding: 0 18px;
      border-radius: 8px;
      border: 1px solid #dde3ea;
      background: #f5f7fb;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: grid;
      place-items: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.35s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        visibility 0s linear 0.35s;
    }

    #lastPunchBox.last-punch-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    #lastPunchBox.last-punch-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    #lastPunchBox.last-punch-route-cinematic {
      background: transparent;
      border-color: transparent;
      pointer-events: none;
    }

    .last-punch-row {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 52px;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      justify-items: center;
    }

    .last-punch-manual-btn,
    .last-punch-history-btn {
      width: 52px;
      height: 52px;
      border: 1px solid #d4dce6;
      border-radius: 999px;
      background: var(--ba-bg-white);
      color: var(--ba-primary-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
      box-shadow: 0 2px 8px rgba(16, 80, 123, 0.08);
    }

    .last-punch-manual-btn {
      grid-column: 1;
    }

    .last-punch-history-btn {
      grid-column: 3;
    }

    .last-punch-manual-btn .badgeuse-btn-icon-wrap {
      margin-right: 0;
    }

    .last-punch-content {
      grid-column: 2;
      min-height: 68px;
      display: grid;
      place-items: center;
      width: 100%;
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
    }

    #lastPunchBox.last-punch-route-cinematic .last-punch-content {
      opacity: 0;
      visibility: hidden;
      transform: scale(0.98);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .last-punch-content > * {
      grid-area: 1 / 1;
    }

    #lastPunchText {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.35;
      margin: 0;
      text-align: center;
      min-height: calc(1.35em * 3);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .last-punch-reveal-btn {
      width: 64px;
      height: 64px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ba-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px);
      transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        color 0.16s ease,
        visibility 0s linear 0.25s;
    }

    .last-punch-reveal-btn:hover,
    .last-punch-reveal-btn:focus-visible {
      color: #0b446a;
      transform: translateY(0) scale(1.04);
      outline: none;
    }

    .last-punch-reveal-icon {
      width: 56px;
      height: 56px;
      display: block;
      filter: drop-shadow(0 8px 16px rgba(16, 80, 123, 0.12));
    }

    .last-punch-reveal-icon__open,
    .last-punch-reveal-icon__iris,
    .last-punch-reveal-icon__lid,
    .last-punch-reveal-icon__lash,
    .last-punch-reveal-icon__bar,
    .last-punch-reveal-icon__accent {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .last-punch-reveal-icon__open,
    .last-punch-reveal-icon__iris {
      opacity: 0;
      transform: scaleY(0.24);
      transform-box: fill-box;
      transform-origin: center;
    }

    .last-punch-reveal-icon__iris {
      fill: currentColor;
      stroke: none;
      opacity: 0;
      transform: scaleY(0.34);
    }

    .last-punch-reveal-icon__accent {
      stroke: currentColor;
      opacity: 0.58;
    }

    .last-punch-reveal-icon__lash {
      opacity: 0.62;
      stroke-width: 2.2;
    }

    .last-punch-reveal-icon__bar {
      opacity: 0.92;
      stroke-width: 5.2;
      stroke-dasharray: 76;
      stroke-dashoffset: 0;
      transform-box: fill-box;
      transform-origin: center;
    }

    .last-punch-reveal-btn.is-eye-opening {
      pointer-events: none;
      color: var(--ba-primary);
    }

    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon {
      animation: revealEyePulse 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__open,
    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__iris {
      animation: revealEyeOpen 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__bar {
      animation: revealEyeBarClear 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__lid,
    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__lash,
    .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__accent {
      animation: revealEyeClosedFade 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes revealEyePulse {
      0% {
        transform: scale(1);
      }
      52% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1.02);
      }
    }

    @keyframes revealEyeOpen {
      0% {
        opacity: 0;
        transform: scaleY(0.24);
      }
      28% {
        opacity: 0;
        transform: scaleY(0.24);
      }
      58% {
        opacity: 0.78;
        transform: scaleY(0.52);
      }
      78%,
      100% {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    @keyframes revealEyeBarClear {
      0% {
        opacity: 0.92;
        stroke-dashoffset: 0;
        transform: translate(0, 0);
      }
      46% {
        opacity: 0.92;
        stroke-dashoffset: 76;
        transform: translate(4px, -4px);
      }
      100% {
        opacity: 0;
        stroke-dashoffset: 76;
        transform: translate(6px, -6px);
      }
    }

    @keyframes revealEyeClosedFade {
      0%,
      34% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-4px);
      }
    }

    .last-punch-content--message #lastPunchText {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }

    .last-punch-content--reveal .last-punch-reveal-btn {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
    }

    .badgeuse-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      max-width: 460px;
      margin: 16px auto 0;
      align-items: stretch;
      min-height: 60px;
    }

    .badgeuse-actions .badgeuse-btn-large {
      width: 100%;
      min-width: 0;
      grid-row: 1;
    }

    .passkey-unlock-cinematic {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 68px;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    }

    .passkey-unlock-cinematic[hidden] {
      display: none !important;
    }

    .passkey-unlock-cinematic.is-running {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .passkey-unlock-cinematic__stage {
      position: relative;
      width: 118px;
      height: 72px;
      display: grid;
      place-items: center;
    }

    .passkey-unlock-cinematic__lock {
      width: 68px;
      height: 68px;
      color: var(--ba-primary);
      filter: drop-shadow(0 9px 18px rgba(16, 80, 123, 0.18));
      opacity: 0;
      transform: translateY(8px) scale(0.84);
    }

    .passkey-unlock-cinematic__body {
      fill: var(--ba-bg-white);
      stroke: currentColor;
      stroke-width: 5;
      stroke-linejoin: round;
    }

    .passkey-unlock-cinematic__shackle,
    .passkey-unlock-cinematic__keyhole {
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .passkey-unlock-cinematic__keyhole {
      stroke-width: 4;
    }

    .passkey-unlock-cinematic__particle {
      --burst-x: 0px;
      --burst-y: 0px;
      --burst-size: 7px;
      --burst-color: var(--ba-primary);
      position: absolute;
      left: 50%;
      top: 52%;
      width: var(--burst-size);
      height: var(--burst-size);
      border-radius: 999px;
      background: var(--burst-color);
      box-shadow: 0 0 14px rgba(16, 80, 123, 0.16);
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.25);
    }

    .passkey-unlock-cinematic__particle:nth-of-type(1) { --burst-x: -52px; --burst-y: -26px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(2) { --burst-x: -34px; --burst-y: -44px; --burst-size: 5px; --burst-color: var(--ba-success-text); }
    .passkey-unlock-cinematic__particle:nth-of-type(3) { --burst-x: -10px; --burst-y: -54px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(4) { --burst-x: 22px; --burst-y: -46px; --burst-size: 6px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(5) { --burst-x: 48px; --burst-y: -25px; --burst-color: var(--ba-success-text); }
    .passkey-unlock-cinematic__particle:nth-of-type(6) { --burst-x: 56px; --burst-y: 6px; --burst-size: 5px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(7) { --burst-x: 36px; --burst-y: 34px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(8) { --burst-x: 8px; --burst-y: 46px; --burst-size: 5px; --burst-color: var(--ba-success-text); }
    .passkey-unlock-cinematic__particle:nth-of-type(9) { --burst-x: -22px; --burst-y: 42px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(10) { --burst-x: -48px; --burst-y: 18px; --burst-size: 6px; --burst-color: var(--ba-primary); }
    .passkey-unlock-cinematic__particle:nth-of-type(11) { --burst-x: -60px; --burst-y: 2px; --burst-size: 5px; --burst-color: var(--ba-success-text); }
    .passkey-unlock-cinematic__particle:nth-of-type(12) { --burst-x: 58px; --burst-y: 24px; --burst-color: var(--ba-primary); }

    .passkey-unlock-cinematic.is-running .passkey-unlock-cinematic__lock {
      animation: passkeyUnlockFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .passkey-unlock-cinematic.is-running .passkey-unlock-cinematic__shackle {
      animation: passkeyUnlockShackle 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      transform-box: fill-box;
      transform-origin: 34px 43px;
    }

    .passkey-unlock-cinematic.is-running .passkey-unlock-cinematic__particle {
      animation: passkeyUnlockBurst 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.36s forwards;
    }

    @keyframes passkeyUnlockFade {
      0% {
        opacity: 0;
        transform: translateY(8px) scale(0.84);
      }
      22% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      52% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      72% {
        opacity: 1;
        transform: translateY(0) scale(0.96);
      }
      100% {
        opacity: 0;
        transform: translateY(0) scale(0.36);
      }
    }

    @keyframes passkeyUnlockShackle {
      0%,
      34% {
        transform: rotate(0deg) translate(0, 0);
      }
      58%,
      100% {
        transform: rotate(-14deg) translate(-2px, -2px);
      }
    }

    @keyframes passkeyUnlockBurst {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
      }
      10% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.72);
      }
    }

    #btnEnroll,
    #btnAdmin {
      grid-column: 1 / -1;
      justify-self: center;
      width: min(100%, 260px);
    }

    #btnEnter {
      grid-column: 1;
    }

    #btnExit {
      grid-column: 2;
    }

    #btnEnter.is-suggested,
    #btnExit.is-suggested {
      background: var(--ba-primary);
      border-color: var(--ba-primary);
      color: var(--ba-bg-white);
      box-shadow: 0 8px 18px rgba(16, 80, 123, 0.18);
    }

    #btnEnter.is-suggested:hover,
    #btnEnter.is-suggested:focus-visible,
    #btnExit.is-suggested:hover,
    #btnExit.is-suggested:focus-visible {
      background: #0b446a;
      border-color: #0b446a;
      color: var(--ba-bg-white);
    }

    #btnEnter.is-secondary,
    #btnExit.is-secondary {
      background: var(--ba-bg-white);
      border-color: #d9e2ea;
      color: var(--ba-primary);
      box-shadow: none;
    }

    #btnEnter.is-secondary:hover,
    #btnEnter.is-secondary:focus-visible,
    #btnExit.is-secondary:hover,
    #btnExit.is-secondary:focus-visible {
      background: var(--ba-surface-subtle);
      border-color: #bfd0de;
      color: #0b446a;
    }

    #btnEnter.is-suggested .punch-action-icon,
    #btnExit.is-suggested .punch-action-icon {
      filter: drop-shadow(0 7px 14px rgba(255, 255, 255, 0.16));
    }

    .badgeuse-action-button {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    }

    .badgeuse-action-button--hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(2px);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }

    @media (max-width: 640px) {
      .last-punch-wrapper,
      #lastPunchBox {
        height: 148px;
      }

      .last-punch-row {
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        gap: 0;
      }

      #lastPunchBox {
        padding: 0 14px;
      }

      .last-punch-content {
        justify-self: center;
      }

      .last-punch-reveal-btn {
        margin: 0 auto;
      }

      .passkey-unlock-cinematic {
        min-height: 64px;
      }

      .admin-access-cinematic {
        min-height: 64px;
      }

      #btnEnroll,
      #btnAdmin {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .passkey-unlock-cinematic,
      .admin-access-cinematic,
      .passkey-unlock-cinematic__lock,
      .passkey-unlock-cinematic__shackle,
      .passkey-unlock-cinematic__particle,
      .admin-access-cinematic__gear,
      .history-route-icon,
      .history-route-icon__page,
      .history-route-icon__line,
      .support-route-icon,
      .support-route-icon__trace,
      .punch-action-icon,
      .punch-action-icon__arrow,
      .punch-action-icon__door,
      .last-punch-reveal-icon,
      .last-punch-reveal-icon__open,
      .last-punch-reveal-icon__iris,
      .last-punch-reveal-icon__lid,
      .last-punch-reveal-icon__lash,
      .last-punch-reveal-icon__bar,
      .last-punch-reveal-icon__accent {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .passkey-unlock-cinematic.is-running .passkey-unlock-cinematic__lock {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .passkey-unlock-cinematic__particle {
        display: none;
      }

      .admin-access-cinematic.is-running .admin-access-cinematic__gear {
        opacity: 1;
        transform: scale(1);
      }

      .last-punch-history-btn.is-route-cinematic .history-route-icon,
      .last-punch-manual-btn.is-route-cinematic .support-route-icon {
        opacity: 1;
        transform: scale(1);
      }

      .history-route-icon__line,
      .support-route-icon__trace {
        stroke-dashoffset: 0;
      }

      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__open,
      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__iris {
        opacity: 1;
        transform: scaleY(1);
      }

      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__bar {
        opacity: 0;
        stroke-dashoffset: 76;
        transform: translate(6px, -6px);
      }

      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__lid,
      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__lash,
      .last-punch-reveal-btn.is-eye-opening .last-punch-reveal-icon__accent {
        opacity: 0;
      }
    }

    .last-punch-manual-btn:hover,
    .last-punch-history-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(16, 80, 123, 0.12);
    }

    .last-punch-manual-btn svg,
    .last-punch-history-btn svg {
      width: 34px;
      height: 34px;
    }

    .last-punch-manual-btn.is-route-cinematic,
    .last-punch-history-btn.is-route-cinematic {
      width: 78px;
      height: 78px;
      color: var(--ba-primary);
      border-color: #d4dce6;
      background: var(--ba-bg-white);
      box-shadow: 0 12px 26px rgba(16, 80, 123, 0.18);
      pointer-events: none;
      position: relative;
      z-index: var(--ba-z-raised);
      transform: translateY(-17px);
    }

    .last-punch-manual-btn.is-route-cinematic svg,
    .last-punch-history-btn.is-route-cinematic svg {
      width: 68px;
      height: 68px;
      filter: drop-shadow(0 9px 18px rgba(16, 80, 123, 0.16));
    }

    .support-disclosure {
      box-sizing: border-box;
      border-radius: 10px;
      padding: 0;
      overflow: hidden;
    }

    .support-disclosure__summary {
      list-style: none;
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) 10px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      font-weight: 500;
    }

    .support-disclosure__title {
      grid-column: 2;
      text-align: center;
    }

    .support-disclosure__arrow {
      grid-column: 3;
    }

    .support-disclosure__content {
      padding: 0 16px 16px;
    }

    .support-disclosure__notice {
      text-align: justify;
      text-align-last: left;
    }

    .support-disclosure__content p:last-child {
      margin-bottom: 0;
    }

    /* Bulle onboarding 1re visite — affichee une seule fois (flag localStorage
       badgeuse_onboarded_v1). JS gere l'apparition et le dismiss. */
    .badgeuse-onboarding-hint {
      position: relative;
      margin: 0 0 14px;
      padding: 10px 40px 10px 14px;
      border: 1px solid var(--ba-border-light);
      border-left: 3px solid var(--ba-primary);
      border-radius: 10px;
      background: var(--ba-surface-subtle);
      color: var(--ba-text-strong);
      font-size: 13px;
      line-height: 1.4;
    }

    .badgeuse-onboarding-hint[hidden] {
      display: none;
    }

    .badgeuse-onboarding-hint__text {
      margin: 0;
    }

    .badgeuse-onboarding-hint__close {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ba-text-muted);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .badgeuse-onboarding-hint__close:hover,
    .badgeuse-onboarding-hint__close:focus-visible {
      background: var(--ba-bg-white);
      color: var(--ba-text-strong);
      outline: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .badgeuse-onboarding-hint:not([hidden]) {
        animation: badgeuseOnboardingFadeIn 0.24s ease-out;
      }
    }

    @keyframes badgeuseOnboardingFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }