/* ── Confinement de l'animation dans le cadre .bv-appvid ──
     L'animation est conçue pour occuper un écran entier ; ici elle doit tenir
     EXACTEMENT dans le calque du hero, sans déborder ni se déformer.
     On la force donc à épouser le conteneur et on coupe tout dépassement. */
  .bv-appvid{ overflow:hidden; }
  .bv-appvid .bva13{
    position:absolute; inset:0;
    width:100%; height:100%;
    min-width:0; min-height:0; max-width:none; max-height:none;
    margin:0; border-radius:24px; overflow:hidden;
  }
  /* Les enfants ne doivent jamais forcer une hauteur de viewport (100vh/svh)
     à l'intérieur d'un cadre : sinon le contenu déborde ou se retrouve rogné. */
  .bv-appvid .bva13 > *{ max-width:100%; }
  .bv-appvid .bva13-stage{ width:100%; height:100%; }

  /* ── Corrections d'intégration ──
     Une fois l'animation dans la page, les styles globaux du site (titres en
     encre foncée, tailles de texte) l'emportent sur les siens. On les rétablit
     ici, scopé sous .bv-appvid : la page de démo autonome n'est pas affectée. */

  /* Bloc « Les livrables glissent… » : fond bleu → texte OBLIGATOIREMENT blanc. */
  .bv-appvid .bva13-flow-center,
  .bv-appvid .bva13-flow-center h2,
  .bv-appvid .bva13-flow-center p,
  .bv-appvid .bva13-flow-center small{ color:#fff !important; }

  /* Noms d'agents dans les blocs de droite : trop petits, on les rend lisibles. */
  .bv-appvid .bva13-flow-grid small{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
  .bv-appvid .bva13-flow-grid b{ font-size:20px; }

  /* Identité d'agent (avatar + nom + fonction) : le nom doit être aligné à
     GAUCHE sur sa fonction, pas centré. */
  .bv-appvid .bva13-card header{ text-align:left; }
  .bv-appvid .bva13-card header b,
  .bv-appvid .bva13-card header small,
  .bv-appvid .bva13-orbit-face b,
  .bv-appvid .bva13-orbit-face small{ text-align:left; }

  /* 1 — « .ai » en dégradé bleu + identité alignée à gauche sous le logo. */
  .bv-appvid .bva13-ai{
    background:linear-gradient(90deg,#00c2ff,#2f6df6);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .bv-appvid .bva13-card header > div{ display:flex; flex-direction:column; align-items:flex-start; }
  .bv-appvid .bva13-card header b{ line-height:1.15; }
  .bv-appvid .bva13-card header small{ margin-top:2px; }

  /* 3 — Email : les libellés « À » et « Objet » alignés à gauche, valeurs à leur suite. */
  .bv-appvid .bva13-email-meta{
    display:grid; grid-template-columns:74px 1fr; align-items:baseline;
    gap:10px; text-align:left;
  }
  .bv-appvid .bva13-email-meta small,
  .bv-appvid .bva13-email-meta b{ text-align:left; justify-self:start; }

  /* 4 — Noms d'agents des blocs : encore doublés pour être lisibles de loin. */
  .bv-appvid .bva13-flow-grid small{ font-size:28px; line-height:1.1; }
  .bv-appvid .bva13-flow-grid b{ font-size:22px; }

  /* 5 — Espacements homogènes entre les blocs (grille + intérieur des cartes). */
  .bv-appvid .bva13-flowboard{ gap:18px; }
  .bv-appvid .bva13-flow-grid{ gap:18px; align-content:stretch; }
  .bv-appvid .bva13-flow-grid article{
    display:flex; flex-direction:column; justify-content:center;
    gap:6px; padding:18px; min-height:0;
  }
  .bv-appvid .bva13-flow-grid small,
  .bv-appvid .bva13-flow-grid b,
  .bv-appvid .bva13-flow-grid span{ margin:0; }

  /* 6 — Vidéo de Luc : remplit le cadre, aucune bande noire sur les côtés. */
  .bv-appvid .bva13-video{ position:relative; overflow:hidden; }
  .bv-appvid .bva13-video video{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
  /* Barres de progression de la timeline (Intro · Coupe · Départ…) : elles se
     remplissent l'une après l'autre, comme un montage qui avance.
     scaleX → animation composite, aucun recalcul de mise en page. */
  .bv-appvid .bva13-timeline span i{
    display:block; transform:scaleX(0); transform-origin:left center;
  }
  .bv-appvid .bva13-luc.is-visible .bva13-timeline span i{
    animation:bvcLucBar 2.1s cubic-bezier(.35,.85,.4,1) both;
    animation-delay:calc(var(--i, 0) * .26s);
  }
  @keyframes bvcLucBar{ to{ transform:scaleX(1); } }

  /* Zoom sur Ruth pendant la scène « agents en orbite ».
     Ruth étant au CENTRE du système, agrandir le système revient à se
     rapprocher d'elle pendant que les agents continuent de tourner.
     (L'échelle caméra globale recadrait toute la scène sans cet effet.) */
  .bv-appvid .bva13-agent-orbits .bva13-orbit-system{ transform-origin:center center; }
  .bv-appvid .bva13-agent-orbits.is-visible .bva13-orbit-system{
    animation:bvcOrbitZoom 3s cubic-bezier(.22,.85,.3,1) both;
  }
  @keyframes bvcOrbitZoom{ from{ transform:scale(.94); } to{ transform:scale(1.16); } }

  /* Réponse de Ruth : raccourcie à 2 lignes → on l'aligne sur la taille de la
     demande, pour un échange équilibré et bien plus lisible. */
  .bv-appvid .bva13-bubbles p{ font-size:26px; line-height:1.32; }

  /* 1 — Chat : texte aligné à GAUCHE, et le trait de séparation collé aux badges. */
  .bv-appvid .bva13-bubbles,
  .bv-appvid .bva13-bubbles p,
  .bv-appvid .bva13-bubble{ text-align:left; }
  .bv-appvid .bva13-chat hr{ margin:14px 0 10px; }

  /* 2 — Zoom sur Ruth : appliqué au PLAN entier (le système d'orbite porte déjà
     ses propres rotations, un transform dessus était écrasé). */
  /* ZOOM sur Ruth (centre de l'orbite).
     ⚠️ Ne PAS animer .bva13-plane : le V13 y force
     `transform:translate3d(-50%,-50%,0) !important`, et une déclaration
     !important l'emporte sur toute animation CSS → mes zooms précédents étaient
     purement et simplement annulés. On anime donc le SYSTÈME d'orbite interne,
     avec la même priorité. */
  .bv-appvid .bva13-agent-orbits .bva13-orbit-system{
    transform-origin:50% 50% !important;
  }
  .bv-appvid .bva13-agent-orbits.is-visible .bva13-orbit-system{
    animation:bvcRuthZoom 3s cubic-bezier(.22,.85,.3,1) both !important;
  }
  @keyframes bvcRuthZoom{ from{ transform:scale(.90); } to{ transform:scale(1.22); } }

  /* 3 — Hébreu, grec et verset : ils s'écrivent (révélation de gauche à droite). */
  .bv-appvid .bva13-paul.is-visible .bva13-strong-main strong,
  .bv-appvid .bva13-paul.is-visible blockquote{
    animation:bvcWrite .9s steps(28,end) both; white-space:normal;
  }
  .bv-appvid .bva13-paul.is-visible .bva13-strong-main:nth-of-type(2) strong{ animation-delay:.5s; }
  .bv-appvid .bva13-paul.is-visible blockquote{ animation-delay:1s; }
  @keyframes bvcWrite{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

  /* 4 — Cartes outils : icônes de marque + sélection puis confirmation. */
  .bv-appvid .bva13-brand{ width:34px; height:34px; object-fit:contain; display:block; }
  .bv-appvid .bva13-tool{ position:relative; }
  .bv-appvid .bva13-tool span{ opacity:0; }
  .bv-appvid .bva13-ruth-tools.is-visible .bva13-tool span,
  .bv-appvid .is-visible .bva13-tool span{
    animation:bvcSent .5s ease both; animation-delay:calc(var(--d,0s) + .6s);
  }
  @keyframes bvcSent{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
  /* La carte LinkedIn se "sélectionne" avant d'afficher sa programmation. */
  .bv-appvid .is-visible .bva13-tool--pick{
    animation:bvcPick .6s ease both; animation-delay:1s;
  }
  @keyframes bvcPick{
    0%{ box-shadow:0 0 0 0 rgba(10,102,194,0); }
    45%{ box-shadow:0 0 0 4px rgba(10,102,194,.28); }
    100%{ box-shadow:0 0 0 2px rgba(10,102,194,.45); }
  }

  /* 5 — Vidéo de Luc : plus aucune bande noire (sélecteurs renforcés). */
  .bv-appvid .bva13-luc .bva13-video,
  .bv-appvid .bva13-video{ background:#000; }
  .bv-appvid .bva13-luc .bva13-video video,
  .bv-appvid .bva13-video > video{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important;
    position:absolute; inset:0; display:block;
    /* Les bandes noires sont ENCODÉES dans ici.mp4 : object-fit les recadre
       avec l'image, il les conserve donc. On agrandit pour les pousser hors
       du cadre. Ajuster ce facteur si le recadrage est trop ou pas assez fort. */
    transform:scale(1.32); transform-origin:center center;
  }
  .bv-appvid .bva13-luc .bva13-video{ position:relative; overflow:hidden; }

/* ── Bascule mobile / révélation (repris du hero index.php) ── */
  /* Mobile ET tablette standard (≤820px) : on affiche les BARRES DE PROGRESSION
     (.bv-app) et on masque le calque d'animation.
     Pourquoi l'un OU l'autre : .bv-appvid est un calque en position:absolute posé
     PAR-DESSUS .bv-app. Laisser les deux actifs sous cette largeur ferait
     entièrement recouvrir les barres par l'animation.
     Seuil à 820px : couvre les téléphones et l'iPad standard (768px en portrait) ;
     l'iPad Pro (834px / 1024px) et le desktop gardent le comportement d'origine
     (barres, puis animation qui se révèle au scroll).
     ⚠️ Ce seuil doit rester IDENTIQUE au matchMedia du JS plus bas.
     Scopé via :has(.bv-appvid) → n'impacte que cette page. */
  @media(max-width:820px){
    .bv-hero-art:has(.bv-appvid) .bv-appvid{ display:none !important; }

    /* La carte était COUPÉE : .bv-hero-art impose height:clamp(280px,44vw,380px)
       et .bv-app est en position:absolute;inset:0 — le contenu débordait donc du
       cadre. Sur mobile/iPad on rend la hauteur libre et on remet la carte dans
       le flux : elle prend exactement la place dont elle a besoin. */
    /* NE PAS forcer width:100% ici : la largeur d'origine vaut
       calc(100% + --p*400px) et déborde du viewport. On garde donc la contrainte
       max-width d'origine et on neutralise seulement la HAUTEUR. */
    .bv-hero-art:has(.bv-appvid){
      height:auto !important; aspect-ratio:auto !important;
      width:auto !important; max-width:94vw !important;
    }
    /* Deux colonnes de barres sont illisibles sous 820px et provoquent un
       débordement : on passe sur une seule colonne. */
    .bv-hero-art:has(.bv-appvid) .bv-app-bars{ grid-template-columns:1fr !important; }
    .bv-hero-art:has(.bv-appvid) .bv-app-body{ display:block !important; }
    /* Dans le hero, .bv-app passe en width:auto;max-width:none — sa largeur suit
       donc son contenu et dépassait l'écran (le html{overflow-x:hidden} du site
       masquait le débordement en le ROGNANT, d'où le contenu coupé à droite).
       On lui rend une borne. */
    .bv-hero-art:has(.bv-appvid) .bv-app{ max-width:100% !important; width:100% !important; }
    .bv-hero-art:has(.bv-appvid) .bv-app-rail{ display:none !important; }
    .bv-hero-art:has(.bv-appvid) .bv-app{
      display:flex !important; position:relative !important; inset:auto !important;
      opacity:1 !important; transform:none !important;
    }
    .bv-hero-art:has(.bv-appvid) .bv-app-body{ min-height:0 !important; }
  }