/* Section « Why teams are integrating Kalent ».
   Extraite de sections/use-cases.html. */
/* ============================================================
     USE CASES — 5 onglets, 5 démonstrations

     1. AI People Search  → le brief s'écrit, les filtres tombent un par
        un (intitulé, localisation, expérience, ancienneté, industrie,
        mots-clés), les résultats arrivent.        [animé, 10 s]
     2. Qualification     → deux questions posées, la réponse ✓/✗ par
        profil, et le classement qui en découle.
     3. Open-to-work      → un radar de mobilité + les signaux détectés,
        dont un qui apparaît en direct.            [animé, 10 s]
     4. Enrichment        → un seul profil : l'email puis le téléphone
        se remplissent et passent en vérifiés.     [animé, 10 s]
     5. Existing pool     → le refresh, avant / après champ par champ.

     Composants relevés sur l'app (reference/app/USA.png) : tableau de
     résultats, pastille de degré LinkedIn, chips de statut, profils
     suggérés, note en étoiles, pastille verte « Open to work », carte
     Instructions. Avatars : la forme de l'app (carré arrondi pastel)
     avec des initiales, faute d'avoir l'illustration en asset.

     Tout est en CSS : pas de JS, et le texte des cinq panneaux reste
     dans le HTML source pour les crawlers AI.
     ============================================================ */
  /* Blanc cassé + grille de points gris : le fond commun à toutes les
     sections de contenu. Seuls le hero et la bande de logos gardent le dégradé. */
  .uc {
    position: relative; isolation: isolate;
  }
  .uc > .container { position: relative; z-index: 1; }

  .uc__title { text-align: center; max-width: 22ch; margin-inline: auto; }
  .uc__intro {
    margin: var(--space-md) auto 0; max-width: 58ch; text-align: center;
    font-size: var(--fs-lead); color: var(--text-muted);
  }

  /* ---------- Barre d'onglets ---------- */
  .uc__switch { border: 0; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0; }
  .uc__tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    background: var(--k-white); border: 1px solid var(--hairline);
    border-radius: 14px; padding: 4px;
    box-shadow: 0 1px 2px rgba(10, 4, 6, 0.03);
  }
  .uc__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .uc__tab {
    display: grid; place-items: center; text-align: center; cursor: pointer;
    padding: 0.7rem 0.6rem; border-radius: 10px;
    font-size: 0.875rem; font-weight: 500; color: var(--text-muted);
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .uc__tab:hover { background: var(--k-purple-bg); color: var(--k-purple-deep); }
  .uc__tab + .uc__tab { box-shadow: inset 1px 0 0 var(--hairline); }

  /* ---------- Panneaux ---------- */
  .uc__panel {
    display: none; margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center;
    background: var(--k-gray-bg); border-radius: var(--radius-panel);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    overflow: hidden;
  }
  .uc__h { max-width: 22ch; }
  .uc__accent { display: block; color: var(--k-purple); }
  .uc__text { margin: var(--space-lg) 0 0; color: var(--text-muted); max-width: 46ch; }
  .uc__text b { color: var(--text-primary); font-weight: 600; }

  .uc__list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 0.7rem; }
  .uc__list li { position: relative; padding-left: 1.6rem; font-size: 0.9375rem; color: var(--text-muted); }
  .uc__list li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--k-purple); font-weight: 600; }
  .uc__list b { color: var(--text-primary); font-weight: 600; }

  /* ---------- L'encadré ---------- */
  .stage {
    position: relative; margin: 0 calc(-1 * clamp(1.75rem, 4vw, 3.25rem)) 0 0;
    background: var(--k-white); border: 1px solid var(--hairline);
    border-radius: 16px 0 0 16px; box-shadow: var(--shadow-card);
    min-height: 24rem; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .app__bar {
    display: flex; align-items: center; gap: 0.6rem; flex: none;
    padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hairline); background: #FCFBFD;
    font-size: 0.75rem; color: var(--text-muted);
  }
  .app__search { font-weight: 500; color: var(--text-primary); }
  .app__count {
    margin-left: auto; font-size: 0.6875rem; font-weight: 500;
    padding: 0.16rem 0.5rem; border-radius: var(--radius-pill);
    background: var(--k-purple-bg); color: var(--k-purple-deep);
  }
  .app__body { flex: 1 1 auto; min-height: 0; }
  .app__foot {
    margin: auto 0 0; flex: none; padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--hairline); background: #FCFBFD;
    font-size: 0.75rem; color: var(--text-muted);
  }
  .app__chips {
    display: flex; align-items: center; gap: 0.35rem; flex: none; flex-wrap: wrap;
    padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--hairline);
  }
  .st {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.6875rem; font-weight: 500; color: var(--text-muted);
    padding: 0.22rem 0.55rem; border-radius: 8px; border: 1px solid var(--hairline);
    background: var(--k-white);
  }
  .st--on { background: var(--k-black); color: var(--k-white); border-color: var(--k-black); }
  .st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
  .st--blue i { background: #3B82F6; } .st--purple i { background: #8B5CF6; }
  .st--green i { background: #22C55E; } .st--ok i { background: #12703A; }

  /* ---------- Lignes de résultat ---------- */
  .rows { list-style: none; margin: 0; padding: 0; }
  .rows li {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.5rem 0.9rem; border-bottom: 1px solid #F3F0F7;
  }
  .rows li:last-child { border-bottom: 0; }
  .av {
    flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border-radius: 9px; font-size: 0.5625rem; font-weight: 600; color: #4A3A5C;
  }
  .av--pink { background: #FBE3F0; } .av--yellow { background: #FDF0D5; }
  .av--blue { background: #DEEAFB; } .av--green { background: #DDF4E4; }
  .av--purple { background: #EBE2FE; }

  .who { flex: 1 1 auto; min-width: 0; }
  .who__top { display: flex; align-items: center; gap: 0.35rem; }
  .who__name { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
  .deg {
    display: inline-flex; align-items: center; gap: 0.2rem; flex: none;
    font-size: 0.5625rem; font-weight: 500; color: #4B5563;
    background: var(--k-gray-bg); padding: 0.08rem 0.3rem; border-radius: 4px;
  }
  .deg svg { width: 8px; height: 8px; color: #0A66C2; }
  .who__role {
    display: block; font-size: 0.6875rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cell {
    flex: none; width: 4.8rem; font-size: 0.6875rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .emp { display: flex; align-items: center; gap: 0.35rem; }
  .emp__logo {
    flex: none; display: grid; place-items: center; width: 0.95rem; height: 0.95rem;
    border-radius: 4px; font-size: 0.5rem; font-weight: 700; color: var(--k-white);
  }
  .otw, .tag {
    display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
    font-size: 0.625rem; font-weight: 500; padding: 0.14rem 0.42rem; border-radius: var(--radius-pill);
  }
  .otw { background: #E8F7EE; color: #12703A; }
  .tag { background: var(--k-purple-bg); color: var(--k-purple-deep); }
  .tag--mute { background: var(--k-gray-bg); color: var(--text-muted); }
  .was { text-decoration: line-through; color: #B9B1C2; }
  .btn-mini {
    flex: none; font-size: 0.625rem; font-weight: 500; color: var(--text-primary);
    background: var(--k-white); border: 1px solid var(--hairline);
    padding: 0.2rem 0.5rem; border-radius: 7px;
  }

  /* ============================================================
     1 · AI PEOPLE SEARCH — le brief, puis les filtres, puis les gens
     ============================================================ */
  .run { padding: 0.8rem 0.9rem; display: grid; gap: 0.45rem; min-width: 0; }
  /* le brief est en nowrap le temps de la frappe : sans ça il élargit
     toute la carte et pousse les lignes de résultat hors du cadre. */
  .run > *, .brief, .brief__line, .filters, .run .rows { min-width: 0; }
  .brief__line { overflow: hidden; }
  .brief {
    border: 1px solid var(--hairline); border-radius: 12px; padding: 0.6rem 0.75rem;
    background: linear-gradient(180deg, #FBF8FF, var(--k-white));
  }
  .brief__k {
    margin: 0 0 0.3rem; font-size: 0.5625rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  }
  .brief__line { margin: 0; font-size: 0.78125rem; line-height: 1.5; color: var(--text-primary); }
  .type {
    display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap;
    vertical-align: bottom; border-right: 1.5px solid var(--k-purple);
    animation: type 10s steps(78, end) infinite, caret 0.8s step-end infinite;
  }
  @keyframes type {
    0% { width: 0; } 16% { width: 100%; } 93% { width: 100%; } 97%, 100% { width: 0; }
  }
  @keyframes caret { 50% { border-color: transparent; } }

  /* Dans la barre de l'app, en flux : ni surcouche, ni ligne réservée
     dans la grille sous la carte Instructions. */
  .status {
    display: inline-flex; align-items: center; gap: 0.4rem; margin: 0;
    font-size: 0.6875rem; color: var(--k-purple-deep);
    background: var(--k-purple-bg); border: 1px solid rgba(124, 58, 237, 0.25);
    padding: 0.18rem 0.5rem; border-radius: 8px;
    animation: status 10s ease infinite;
  }
  .status i {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    border: 2px solid rgba(124, 58, 237, 0.3); border-top-color: var(--k-purple);
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes status {
    0%, 14% { opacity: 0; transform: translateY(3px); }
    17%, 24% { opacity: 1; transform: none; }
    28%, 100% { opacity: 0; transform: translateY(-3px); }
  }
  /* sur l'onglet Qualification il arrive après les deux questions */
  .status--q { animation: statusq 6s ease infinite; }
  @keyframes statusq {
    0%, 7% { opacity: 0; transform: translateY(3px); }
    10%, 15% { opacity: 1; transform: none; }
    19%, 100% { opacity: 0; transform: translateY(-3px); }
  }

  /* Les filtres, groupés comme le panneau de filtres de l'app */
  .filters { display: grid; gap: 0.3rem; }
  .frow { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
  .frow__k {
    flex: none; width: 5.6rem; font-size: 0.625rem; color: var(--text-muted);
  }
  .frow__k::after { content: ' →'; color: var(--k-purple); }
  .fchip {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-size: 0.625rem; color: var(--text-primary);
    border: 1px solid var(--hairline); background: var(--k-white);
    padding: 0.14rem 0.4rem; border-radius: 7px;
    animation: pop 10s ease infinite both;
  }
  .fchip span { color: var(--text-muted); }
  .fchip--no { border-color: rgba(225, 29, 72, 0.4); color: #B91C3C; }
  .fchip--ai { border-color: rgba(124, 58, 237, 0.45); background: var(--k-purple-bg); color: var(--k-purple-deep); }
  .frow:nth-of-type(1) .fchip { animation-delay: 0s; }
  .frow:nth-of-type(2) .fchip { animation-delay: 0.2s; }
  .frow:nth-of-type(3) .fchip { animation-delay: 0.4s; }
  .frow:nth-of-type(4) .fchip { animation-delay: 0.6s; }
  .frow:nth-of-type(5) .fchip { animation-delay: 0.8s; }
  .frow:nth-of-type(6) .fchip { animation-delay: 1s; }
  @keyframes pop {
    0%, 22% { opacity: 0; transform: scale(0.94); }
    26%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: scale(0.94); }
  }

  .run .rows li { animation: rowin 10s ease infinite both; }
  .run .rows li:nth-child(1) { animation-delay: 0s; }
  .run .rows li:nth-child(2) { animation-delay: 0.3s; }
  .run .rows li:nth-child(3) { animation-delay: 0.6s; }
  @keyframes rowin {
    0%, 36% { opacity: 0; transform: translateY(8px); }
    41%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(8px); }
  }
  .app__count--anim { animation: countin 10s ease infinite both; }
  @keyframes countin {
    0%, 42% { opacity: 0; transform: translateY(-3px); }
    47%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
  }

  /* ============================================================
     2 · QUALIFICATION — deux questions, les réponses qui tombent,
     puis le classement qui se fait. Même cycle de 10 s, pas de JS.
     Les lignes sont dans l'ordre final dans le HTML (c'est lui que
     lisent les crawlers) ; l'animation part de l'ordre d'arrivée en
     les décalant de deux crans, puis les ramène à leur place.
     ============================================================ */
  .qs { padding: 0.7rem 0.9rem 0.4rem; display: grid; gap: 0.35rem;
        border-bottom: 1px solid var(--hairline); }
  .q {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.75rem; color: var(--text-primary);
    animation: qpop 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
  }
  .q:nth-child(2) { animation-delay: 0.25s; }
  @keyframes qpop {
    0%, 1% { opacity: 0; transform: translateY(7px) scale(0.97); }
    6%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(7px) scale(0.97); }
  }
  /* l'en-tête de colonne arrive avec sa question */
  .qhead .qcol { animation: qpop 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both; }
  .qhead .q2 { animation-delay: 0.25s; }
  .q__n {
    flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
    border-radius: 50%; background: var(--k-purple); color: var(--k-white);
    font-size: 0.5625rem; font-weight: 600;
  }
  .qhead {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--hairline);
    font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .qhead span:first-child { flex: 1 1 auto; }
  .qcol { flex: none; width: 2.1rem; text-align: center; }
  .qcol--wide { width: 4.6rem; text-align: right; }

  /* hauteur de ligne fixe : c'est elle qui donne le pas du classement */
  .qrows { --h: 3.5rem; overflow: hidden; }
  .qrows li { height: var(--h); box-sizing: border-box; }
  .qrows li.mv-up   { animation: mvup 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite both; }
  .qrows li.mv-down { animation: mvdown 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite both; }
  @keyframes mvup {
    0%, 36% { transform: translateY(calc(var(--h) * 2)); }
    43%, 93% { transform: none; }
    97%, 100% { transform: translateY(calc(var(--h) * 2)); }
  }
  @keyframes mvdown {
    0%, 36% { transform: translateY(calc(var(--h) * -2)); }
    43%, 93% { transform: none; }
    97%, 100% { transform: translateY(calc(var(--h) * -2)); }
  }

  /* la réponse : un point d'attente, puis ✓ ou ✗ */
  .ans {
    position: relative; flex: none; width: 2.1rem; height: 1.1rem;
    display: grid; place-items: center;
  }
  .ans i, .ans b { position: absolute; font-size: 0.8125rem; font-weight: 600; }
  .ans i { width: 5px; height: 5px; border-radius: 50%; background: #DAD3E3;
           animation: answait 6s ease infinite both; }
  .ans b { animation: ansval 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both; }
  .ans--y b { color: #12703A; }
  .ans--n b { color: #C0392B; }
  @keyframes answait { 0%, 12% { opacity: 1; } 17%, 100% { opacity: 0; } }
  @keyframes ansval {
    0%, 12% { opacity: 0; transform: scale(0.6); }
    17%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: scale(0.6); }
  }
  /* question 1 ligne par ligne, puis question 2 */
  .qrows li:nth-child(1) .ans:nth-of-type(1) i, .qrows li:nth-child(1) .ans:nth-of-type(1) b { animation-delay: 0s; }
  .qrows li:nth-child(2) .ans:nth-of-type(1) i, .qrows li:nth-child(2) .ans:nth-of-type(1) b { animation-delay: 0.1s; }
  .qrows li:nth-child(3) .ans:nth-of-type(1) i, .qrows li:nth-child(3) .ans:nth-of-type(1) b { animation-delay: 0.2s; }
  .qrows li:nth-child(4) .ans:nth-of-type(1) i, .qrows li:nth-child(4) .ans:nth-of-type(1) b { animation-delay: 0.3s; }
  .qrows li:nth-child(1) .ans:nth-of-type(2) i, .qrows li:nth-child(1) .ans:nth-of-type(2) b { animation-delay: 0.4s; }
  .qrows li:nth-child(2) .ans:nth-of-type(2) i, .qrows li:nth-child(2) .ans:nth-of-type(2) b { animation-delay: 0.5s; }
  .qrows li:nth-child(3) .ans:nth-of-type(2) i, .qrows li:nth-child(3) .ans:nth-of-type(2) b { animation-delay: 0.6s; }
  .qrows li:nth-child(4) .ans:nth-of-type(2) i, .qrows li:nth-child(4) .ans:nth-of-type(2) b { animation-delay: 0.7s; }

  .verdict {
    flex: none; width: 4.6rem; text-align: right; line-height: 1.35;
    font-size: 0.625rem; font-weight: 500; color: var(--text-muted);
    animation: vin 6s ease infinite both;
  }
  .verdict b { color: var(--k-purple-deep); }
  .verdict--out b { color: var(--text-muted); }
  @keyframes vin {
    0%, 29% { opacity: 0; transform: translateX(6px); }
    34%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateX(6px); }
  }
  .rowrank {
    flex: none; width: 1.3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem; color: var(--text-muted);
    animation: rin 6s ease infinite both;
  }
  @keyframes rin {
    0%, 42% { opacity: 0; }
    47%, 93% { opacity: 1; }
    97%, 100% { opacity: 0; }
  }
  /* le recalé s'éteint une fois le classement fait */
  .qrows li.is-out { animation-name: mvdown, fadeout; }
  @keyframes fadeout {
    0%, 42% { opacity: 1; }
    49%, 93% { opacity: 0.5; }
    97%, 100% { opacity: 1; }
  }
  .qrows li.is-out .who__name { color: var(--text-muted); }

  /* ============================================================
     3 · OPEN-TO-WORK — un radar qui balaye. À chaque passage du
     faisceau un blip s'allume et le signal correspondant s'écrit à
     droite ; à la fin, le profil est marqué open to work avec son
     nombre de signaux. Cycle de 10 s, tout en CSS.
     ============================================================ */
  .otw-grid {
    display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 0.9rem; padding: 0.8rem 0.9rem 0.6rem; align-items: center;
  }

  .scope {
    position: relative; width: 100%; max-width: 11.5rem; aspect-ratio: 1;
    margin-inline: auto; border-radius: 50%; overflow: hidden;
    border: 1px solid var(--hairline);
    background:
      repeating-radial-gradient(circle at 50% 50%, transparent 0 1.42rem, #EDE8F3 1.42rem 1.47rem),
      radial-gradient(circle at 50% 50%, #FBF9FF, var(--k-white) 70%);
  }
  .scope::before {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(to right, transparent calc(50% - 0.5px), #EDE8F3 calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(to bottom, transparent calc(50% - 0.5px), #EDE8F3 calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  }
  .scope__sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg,
      rgba(124, 58, 237, 0.34), rgba(124, 58, 237, 0.08) 38deg, transparent 78deg);
    animation: sweep 2.5s linear infinite;
  }
  @keyframes sweep { to { transform: rotate(360deg); } }
  .scope__core {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
    color: var(--k-purple); line-height: 1;
  }
  .scope__core small {
    display: block; font-family: var(--font-body); font-size: 0.5rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  }

  .blip {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--k-purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
    animation: blipin 10s ease infinite both;
  }
  @keyframes blipin {
    0%, 7% { opacity: 0; transform: scale(0.3); }
    11%, 90% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; transform: scale(0.3); }
  }

  .sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.28rem; }
  .sig li {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.6875rem; color: var(--text-muted);
    border: 1px solid var(--hairline); border-radius: 9px; padding: 0.32rem 0.5rem;
    background: var(--k-white); animation: sigin 10s ease infinite both;
  }
  @keyframes sigin {
    0%, 7% { opacity: 0; transform: translateX(10px); }
    11%, 90% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; transform: translateX(10px); }
  }
  .sig b { color: var(--text-primary); font-weight: 500; }
  .sig__dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--k-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
  }
  .sig__age { margin-left: auto; flex: none; font-size: 0.625rem; color: #9C93A6; }

  /* les blips et les signaux s'allument dans le même ordre */
  .blip.b1, .sig li:nth-child(1) { animation-delay: 0.2s; }
  .blip.b2, .sig li:nth-child(2) { animation-delay: 1.1s; }
  .blip.b3, .sig li:nth-child(3) { animation-delay: 2s; }
  .blip.b4, .sig li:nth-child(4) { animation-delay: 2.9s; }
  .blip.b5, .sig li:nth-child(5) { animation-delay: 3.8s; }

  /* le verdict, une fois le tour fini */
  .otw-profile {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 0.9rem 0.8rem; padding: 0.55rem 0.7rem;
    border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 12px;
    background: var(--k-purple-bg);
    animation: sigin 10s ease infinite both; animation-delay: 4.7s;
  }

  /* ============================================================
     4 · ENRICHMENT — un profil, ses champs qui se remplissent
     ============================================================ */
  .en { padding: 0.9rem; display: grid; gap: 0.7rem; }
  .en__who {
    display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--hairline); border-radius: 12px; padding: 0.6rem 0.7rem;
  }
  .en__btn {
    margin-left: auto; flex: none; font-size: 0.625rem; font-weight: 500;
    color: var(--k-white); background: var(--k-purple); padding: 0.25rem 0.55rem;
    border-radius: 7px; animation: enbtn 10s ease infinite both;
  }
  @keyframes enbtn {
    0%, 10% { opacity: 1; } 14%, 100% { opacity: 0.35; }
  }
  .en__fields { display: grid; gap: 0.4rem; }
  .en__f {
    display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--hairline); border-radius: 10px; padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
  }
  .en__k { flex: none; width: 5.4rem; color: var(--text-muted); font-size: 0.6875rem; }
  .en__v { flex: 1 1 auto; min-width: 0; position: relative; height: 1rem; }
  .en__skel, .en__real {
    position: absolute; inset: 0; display: flex; align-items: center;
  }
  .en__skel::before {
    content: ''; display: block; width: 62%; height: 7px; border-radius: 99px;
    background: linear-gradient(90deg, #EFEBF5, #E3DCEE, #EFEBF5);
    background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
  }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .en__real {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem; color: var(--text-primary); white-space: nowrap;
  }
  .en__f--mail .en__skel { animation: skel 10s ease infinite both; animation-delay: 0s; }
  .en__f--mail .en__real { animation: real 10s ease infinite both; animation-delay: 0s; }
  .en__f--mail .otw { animation: real 10s ease infinite both; animation-delay: 0s; }
  .en__f--tel .en__skel { animation: skel 10s ease infinite both; animation-delay: 1.4s; }
  .en__f--tel .en__real { animation: real 10s ease infinite both; animation-delay: 1.4s; }
  .en__f--tel .otw { animation: real 10s ease infinite both; animation-delay: 1.4s; }
  @keyframes skel { 0%, 24% { opacity: 1; } 30%, 100% { opacity: 0; } }
  @keyframes real {
    0%, 24% { opacity: 0; } 30%, 92% { opacity: 1; } 97%, 100% { opacity: 0; }
  }
  .en__src {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    font-size: 0.625rem; color: var(--text-muted);
  }
  .en__src .tag--mute { animation: pop2 10s ease infinite both; }
  .en__src .tag--mute:nth-of-type(1) { animation-delay: 0s; }
  .en__src .tag--mute:nth-of-type(2) { animation-delay: 0.3s; }
  .en__src .tag--mute:nth-of-type(3) { animation-delay: 0.6s; }
  @keyframes pop2 {
    0%, 12% { opacity: 0; } 18%, 92% { opacity: 1; } 97%, 100% { opacity: 0; }
  }

  /* ============================================================
     5 · EXISTING POOL — le refresh en train de se faire : chaque
     champ est d'abord en attente, la nouvelle valeur tombe, et
     l'ancienne se fait barrer. Cycle de 10 s, tout en CSS.
     ============================================================ */
  .ba { padding: 0.8rem 0.9rem; display: grid; gap: 0.5rem; }
  .ba__head {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.75rem; color: var(--text-primary);
  }
  .ba__cols, .ba__row {
    display: grid; grid-template-columns: 4.6rem 1fr 1.1rem 1fr; gap: 0.4rem;
    align-items: center;
  }
  .ba__cols {
    font-size: 0.5625rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  }
  .ba__row { padding: 0.35rem 0; border-top: 1px solid #F3F0F7; font-size: 0.6875rem; }
  .ba__k { color: var(--text-muted); }

  /* l'ancienne valeur, barrée au moment où la nouvelle arrive */
  .ba__old {
    position: relative; color: var(--text-primary); width: fit-content;
    animation: baold 10s ease infinite both;
  }
  .ba__old::after {
    content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 1px;
    background: #C9C2D2; transform: scaleX(0); transform-origin: left;
    animation: bastrike 10s ease infinite both;
  }
  @keyframes baold {
    0%, 12% { color: var(--text-primary); }
    22%, 100% { color: #B9B1C2; }
  }
  @keyframes bastrike {
    0%, 12% { transform: scaleX(0); }
    22%, 92% { transform: scaleX(1); }
    97%, 100% { transform: scaleX(0); }
  }

  .ba__arrow { color: var(--k-purple); text-align: center; animation: banew 10s ease infinite both; }
  .ba__v { position: relative; min-height: 1.05rem; display: flex; align-items: center; }
  .ba__skel {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 58%; height: 6px; border-radius: 99px;
    background: linear-gradient(90deg, #EFEBF5, #E3DCEE, #EFEBF5);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite, baskel 10s ease infinite both;
  }
  @keyframes baskel { 0%, 12% { opacity: 1; } 18%, 100% { opacity: 0; } }
  .ba__new {
    color: var(--text-primary); font-weight: 500;
    display: flex; align-items: center; gap: 0.3rem;
    animation: banew 10s ease infinite both;
  }
  @keyframes banew {
    0%, 12% { opacity: 0; transform: translateY(3px); }
    18%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(3px); }
  }

  /* un champ après l'autre */
  .ba__row.r1 .ba__old, .ba__row.r1 .ba__old::after,
  .ba__row.r1 .ba__skel, .ba__row.r1 .ba__new,
  .ba__row.r1 .ba__arrow { animation-delay: 0s, 0s; }
  .ba__row.r2 .ba__old, .ba__row.r2 .ba__old::after,
  .ba__row.r2 .ba__skel, .ba__row.r2 .ba__new,
  .ba__row.r2 .ba__arrow { animation-delay: 0.35s, 0.35s; }
  .ba__row.r3 .ba__old, .ba__row.r3 .ba__old::after,
  .ba__row.r3 .ba__skel, .ba__row.r3 .ba__new,
  .ba__row.r3 .ba__arrow { animation-delay: 0.7s, 0.7s; }
  .ba__row.r4 .ba__old, .ba__row.r4 .ba__old::after,
  .ba__row.r4 .ba__skel, .ba__row.r4 .ba__new,
  .ba__row.r4 .ba__arrow { animation-delay: 1.05s, 1.05s; }
  .ba__row.r5 .ba__old, .ba__row.r5 .ba__old::after,
  .ba__row.r5 .ba__skel, .ba__row.r5 .ba__new,
  .ba__row.r5 .ba__arrow { animation-delay: 1.4s, 1.4s; }
  .ba__row.r6 .ba__old, .ba__row.r6 .ba__old::after,
  .ba__row.r6 .ba__skel, .ba__row.r6 .ba__new,
  .ba__row.r6 .ba__arrow { animation-delay: 1.75s, 1.75s; }

  .ba__head .otw { animation: banew 10s ease infinite both; animation-delay: 2.2s; }
  .ba__note {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.625rem; color: var(--text-muted);
    animation: banew 10s ease infinite both; animation-delay: 2.2s;
  }
  .ba__badge {
    font-size: 0.625rem; font-weight: 500; padding: 0.14rem 0.45rem;
    border-radius: var(--radius-pill); background: var(--k-purple-bg); color: var(--k-purple-deep);
  }

  /* Calme : on montre la scène finie, sans rejouer. */
  @media (prefers-reduced-motion: reduce) {
    .type { animation: none; width: auto; border-right: 0; }
    .status, .en__skel { display: none; }
    .fchip, .run .rows li, .app__count--anim, .sig li, .blip, .otw-profile,
    .en__real, .en__f .otw, .en__src .tag--mute, .en__btn,
    .qrows li, .ans b, .verdict, .rowrank, .q, .qhead .qcol,
    .ba__old, .ba__new, .ba__arrow, .ba__note, .ba__head .otw {
      animation: none; opacity: 1; transform: none;
    }
    .ans i, .ba__skel, .scope__sweep { display: none; }
    .ba__old { color: #B9B1C2; }
    .ba__old::after { animation: none; transform: scaleX(1); }
  }

  /* ---------- Bascule ---------- */
  .uc__wrap:has(#uc-1:checked) .uc__panel[data-for="uc-1"],
  .uc__wrap:has(#uc-2:checked) .uc__panel[data-for="uc-2"],
  .uc__wrap:has(#uc-3:checked) .uc__panel[data-for="uc-3"],
  .uc__wrap:has(#uc-4:checked) .uc__panel[data-for="uc-4"],
  .uc__wrap:has(#uc-5:checked) .uc__panel[data-for="uc-5"] { display: grid; }

  .uc__wrap:has(#uc-1:checked) [for="uc-1"],
  .uc__wrap:has(#uc-2:checked) [for="uc-2"],
  .uc__wrap:has(#uc-3:checked) [for="uc-3"],
  .uc__wrap:has(#uc-4:checked) [for="uc-4"],
  .uc__wrap:has(#uc-5:checked) [for="uc-5"] {
    background: var(--k-purple); color: var(--k-white);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
  }
  .uc__wrap:has(#uc-1:checked) [for="uc-2"],
  .uc__wrap:has(#uc-2:checked) [for="uc-3"],
  .uc__wrap:has(#uc-3:checked) [for="uc-4"],
  .uc__wrap:has(#uc-4:checked) [for="uc-5"] { box-shadow: none; }

  .uc__radio:focus-visible + .uc__tab { outline: 2px solid var(--k-purple); outline-offset: 2px; }

  @supports not selector(:has(*)) {
    .uc__panel[data-for="uc-1"] { display: grid; }
    [for="uc-1"] { background: var(--k-purple); color: var(--k-white); }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1080px) {
    .uc__panel { grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
    .uc__h, .uc__text { max-width: 34ch; }
    .stage { margin-right: 0; border-radius: 16px; }
  }
  @media (max-width: 860px) {
    .uc__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .uc__tab + .uc__tab { box-shadow: none; }
    .uc__tab { padding: 0.65rem 0.5rem; font-size: 0.8125rem; }
    .uc__title { max-width: 100%; }
    .cell:not(.cell--keep) { display: none; }
    .otw-grid { grid-template-columns: 1fr; }
    .radar { max-width: 15rem; margin-inline: auto; }
  }
  @media (max-width: 560px) {
    .uc__tabs { grid-template-columns: 1fr; }
    .frow__k { width: 100%; }
    .ba__cols, .ba__row { grid-template-columns: 4.2rem 1fr; }
    .ba__arrow { display: none; }
    .ba__old { grid-column: 2; }
  }

  /* ---------- Nudge : la phrase qui dit pourquoi c'est fort ----------
     Posé sous les puces, jamais une redite : ce qui est ici ne figure
     ni dans la description ni dans la liste. */
  .uc__nudge {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: var(--space-lg) 0 0; padding: 0.7rem 0.9rem;
    background: var(--k-purple-bg);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 12px;
    font-size: 0.9375rem; line-height: 1.5; color: var(--k-purple-deep);
  }
  .uc__nudge img { width: 12px; height: auto; flex: none; margin-top: 0.3rem; }
  .uc__nudge b { font-weight: 600; color: var(--k-purple); }

  /* CTA de fin de section */
  /* Dans le panneau gris, sous les deux colonnes, sur toute la largeur. */
  .uc__cta {
    grid-column: 1 / -1; display: flex; justify-content: center;
    margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
  }
  

  /* La maquette de la feature 1 dépassait de 79px les quatre autres :
     on resserre son rythme interne pour que les cinq fassent la même hauteur. */
  .uc__panel[data-for="uc-1"] .stage { height: 24rem; }
  .uc__panel[data-for="uc-1"] .run { gap: 0.22rem; padding: 0.65rem 0.9rem; }
  .uc__panel[data-for="uc-1"] .brief { padding: 0.5rem 0.65rem; }
  .uc__panel[data-for="uc-1"] .brief__line { font-size: 0.75rem; line-height: 1.4; }
  .uc__panel[data-for="uc-1"] .frow { gap: 0.25rem; }