/* Liquid Glass Effect - Enhanced frosted glass with ethereal transparency */
    .liquid-glass {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.08) 0%,
          rgba(255, 255, 255, 0.02) 50%,
          rgba(255, 255, 255, 0.06) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 106, 133, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }

    .liquid-glass::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(ellipse at center,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 60%);
      animation: liquid-shimmer 8s ease-in-out infinite;
      pointer-events: none;
    }

    .liquid-glass::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent);
      transition: left 0.7s ease;
      pointer-events: none;
    }

    .liquid-glass:hover::after {
      left: 100%;
    }

    @keyframes liquid-shimmer {

      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
      }

      50% {
        transform: translate(10%, 10%) rotate(5deg);
        opacity: 0.8;
      }
    }

    .liquid-glass-strong {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.04) 50%,
          rgba(255, 255, 255, 0.1) 100%);
      backdrop-filter: blur(32px) saturate(220%);
      -webkit-backdrop-filter: blur(32px) saturate(220%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 106, 133, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    /* Card gradient with liquid glass enhancement */
    .card-gradient {
      background: linear-gradient(145deg,
          rgba(30, 30, 50, 0.4) 0%,
          rgba(20, 20, 35, 0.6) 50%,
          rgba(0, 106, 133, 0.08) 100%);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 106, 133, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
      transition: all 0.3s ease;
    }

    .card-gradient:hover {
      background: linear-gradient(145deg,
          rgba(30, 30, 50, 0.5) 0%,
          rgba(20, 20, 35, 0.7) 50%,
          rgba(0, 106, 133, 0.12) 100%);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 106, 133, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* Liquid glass button - subtle frosted effect */
    .liquid-glass-btn {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 100%);
      backdrop-filter: blur(12px) saturate(180%);
      -webkit-backdrop-filter: blur(12px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 106, 133, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
    }

    .liquid-glass-btn:hover {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.15) 0%,
          rgba(255, 255, 255, 0.08) 100%);
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 106, 133, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }

    /* Liquid glass card - medium strength */
    .liquid-glass-card {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.07) 0%,
          rgba(255, 255, 255, 0.03) 50%,
          rgba(0, 106, 133, 0.05) 100%);
      backdrop-filter: blur(20px) saturate(200%);
      -webkit-backdrop-filter: blur(20px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 106, 133, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      transition: all 0.3s ease;
    }

    .liquid-glass-card:hover {
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 50%,
          rgba(0, 106, 133, 0.1) 100%);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 106, 133, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .loading-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes cfspin { to { transform: rotate(360deg); } }
    /* …and `spin`, the name the app actually writes. Seven inline
       `animation:spin` spinners — the Cinet run screen's stage wheels, the send
       screen, the breakdown loader, the workflow settings, the analysis page —
       were all sitting perfectly still: `spin` was only ever defined in
       public/landing/style.css, which the SPA does not load, and an animation
       whose name matches no @keyframes is not an error. The element simply never
       moves. Defined here rather than renamed at each call site: the next
       spinner will be written `spin` too. */
    @keyframes spin { to { transform: rotate(360deg); } }
    .cf-boot { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#F5F6F8; }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .actor-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(0, 106, 133, 0.2);
    }

    .actor-card {
      transition: all 0.3s ease;
    }

    textarea:focus,
    input:focus {
      outline: none;
      border-color: #006a85;
      box-shadow: 0 0 0 3px rgba(0, 106, 133, 0.1);
    }

    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

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

    @keyframes slide-in-left {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }

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

    @keyframes slide-out-left {
      from {
        transform: translateX(0);
        opacity: 1;
      }

      to {
        transform: translateX(-100%);
        opacity: 0;
      }
    }

    @keyframes slide-out-right {
      from {
        transform: translateX(0);
        opacity: 1;
      }

      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    /* NO `forwards` on the three enter animations below (CFT-1325). Their last
       keyframe is the element's NATURAL state (no transform, opacity 1), so the
       fill mode buys nothing visually — but it leaves `transform: translateX(0)`
       applied FOREVER, and any non-`none` transform makes the element a
       containing block for every `position: fixed` descendant. The wizard wraps
       its whole step in .animate-slide-in-*, so the Tri "Voir le profil" sidebar
       anchored to that wrapper instead of the viewport: once the talent list was
       scrolled, the panel sat off-screen and the wheel scrolled the list behind
       it. Enter animations must not leave a transform behind. */
    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

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

    .animate-slide-in-right {
      animation: slide-in-right 0.3s ease-out;
    }

    .animate-slide-in-left {
      animation: slide-in-left 0.3s ease-out;
    }

    .animate-slide-out-left {
      animation: slide-out-left 0.3s ease-out forwards;
    }

    .animate-slide-out-right {
      animation: slide-out-right 0.3s ease-out forwards;
    }