/* demo-visuel.css — variante « vidéo d'abord » (/demo/visuel), chargée APRÈS
   demo-brut.css dont elle reprend les jetons et composants (bx-*).

   Ajouts : une vidéo plein cadre en une, une séquence animée de la chaîne
   (capture → analyse → verdict) qui remplace les paragraphes, des tampons
   courts pour les réserves, et des <details> pour l'argumentaire.

   Séquence : tout est en CSS sur une seule période (--vx-d). Chaque élément
   porte la même durée ; ses pourcentages de keyframes encodent son créneau
   (étape 1 : 0-33 %, étape 2 : 33-66 %, étape 3 : 66-100 %). Les styles de
   BASE sont l'état final de chaque étape : en mouvement réduit, les
   animations s'achèvent aussitôt (règle de demo-brut.css) et l'on voit donc
   un storyboard statique et complet. */

/* ── Tampon ─────────────────────────────────────────────────────────────── */
.vx-stamp {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.6rem;
    background: var(--bx-yellow);
    color: var(--bx-black);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Une ────────────────────────────────────────────────────────────────── */
.vx-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(88vh, 60rem);
    min-height: min(88svh, 60rem);
    overflow: hidden;
    border-bottom: var(--bx-line) solid var(--bx-white);
}

/* Le filtre sert aussi à éviter la superposition matérielle (cf. demo-brut.css).
   Recadrage : la boucle source porte deux bandeaux incrustés (titre en haut,
   ~5 % ; « Char (MBT) / Confiance 68 % » en bas, ~17 %). Sous le titre de la
   une, ce « 68 % » se lirait comme une affirmation du site : on agrandit autour
   de la bande utile (5-83 % de la hauteur) pour les sortir du cadre. */
.vx-hero-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.12) saturate(0.85);
    /* Origine o et échelle s telles que le bas du bandeau haut (5 %) sorte par
       le haut et le haut du bandeau bas (83 %) sorte par le bas :
       o - (o - 5)·s ≤ 0 et o + (83 - o)·s ≥ 100 ⇒ s = 1,34, o ∈ [20 %, 33 %]. */
    transform: scale(1.34);
    transform-origin: 50% 26%;
}

/* Voile : le titre reste lisible sur n'importe quelle image de la boucle. */
.vx-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.9) 100%);
}

.vx-hero-stamp {
    position: absolute;
    top: var(--bx-pad);
    left: var(--bx-pad);
}

.vx-hero-content { padding: 6rem var(--bx-pad) var(--bx-pad); }
.vx-title { padding: 0 0 1.5rem; }

.vx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-go {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0 1.75rem;
    background: var(--bx-yellow);
    color: var(--bx-black);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: var(--bx-line) solid var(--bx-yellow);
}
.vx-go span { font-size: 1.3em; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
    .vx-go:hover { background: var(--bx-white); border-color: var(--bx-white); }
}

.vx-hero-toggle {
    align-self: stretch;
    min-height: 56px;
    margin-top: 0;
    background: rgba(0, 0, 0, 0.6);
}


/* ── Séquence animée ────────────────────────────────────────────────────── */
.vx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-right: var(--bx-pad);
    margin-bottom: 1.25rem;
}
.vx-head .bx-h2 { margin-bottom: 0; }
.vx-seq-toggle { margin-top: 0; }

.vx-seq {
    --vx-d: 9s;
    position: relative;
    border-block: var(--bx-line) solid var(--bx-white);
}

/* Rail de progression : la ligne du temps de la séquence, en bas. */
.vx-seq::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--bx-yellow);
    transform: scaleX(1);
    transform-origin: left center;
    animation: vx-rail var(--vx-d) linear infinite;
}
@keyframes vx-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vx-seq-frames {
    display: grid;
    gap: var(--bx-line);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bx-white);
}
@media (min-width: 760px) { .vx-seq-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vx-frame {
    display: flex;
    flex-direction: column;
    background: var(--bx-black);
}

.vx-stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: 1rem;
    overflow: hidden;
    border-bottom: var(--bx-line) solid #333333;
}
@media (max-width: 759.98px) { .vx-stage { aspect-ratio: 16 / 10; } }

.vx-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.85rem 1rem 1.1rem;
}
.vx-step {
    padding: 0.15rem 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
}
.vx-tag {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.vx-tag--real { background: var(--bx-yellow); color: var(--bx-black); }
.vx-tag--sim { border: var(--bx-line) dashed var(--bx-white); }

/* Étape active : cadre jaune, étiquette inversée, image pleinement visible. */
.vx-frame--1 { animation: vx-on-1 var(--vx-d) infinite; }
.vx-frame--2 { animation: vx-on-2 var(--vx-d) infinite; }
.vx-frame--3 { animation: vx-on-3 var(--vx-d) infinite; }
.vx-frame--1 .vx-step { animation: vx-step-1 var(--vx-d) infinite; }
.vx-frame--2 .vx-step { animation: vx-step-2 var(--vx-d) infinite; }
.vx-frame--3 .vx-step { animation: vx-step-3 var(--vx-d) infinite; }
.vx-frame--1 .vx-stage { animation: vx-dim-1 var(--vx-d) infinite; }
.vx-frame--2 .vx-stage { animation: vx-dim-2 var(--vx-d) infinite; }
.vx-frame--3 .vx-stage { animation: vx-dim-3 var(--vx-d) infinite; }

@keyframes vx-on-1 {
    0%, 32.8%    { box-shadow: inset 0 0 0 3px var(--bx-yellow); }
    33.3%, 100%  { box-shadow: inset 0 0 0 3px transparent; }
}
@keyframes vx-on-2 {
    0%, 33.3%    { box-shadow: inset 0 0 0 3px transparent; }
    33.8%, 66.1% { box-shadow: inset 0 0 0 3px var(--bx-yellow); }
    66.6%, 100%  { box-shadow: inset 0 0 0 3px transparent; }
}
@keyframes vx-on-3 {
    0%, 66.6%    { box-shadow: inset 0 0 0 3px transparent; }
    67.1%, 99.5% { box-shadow: inset 0 0 0 3px var(--bx-yellow); }
    100%         { box-shadow: inset 0 0 0 3px transparent; }
}
@keyframes vx-step-1 {
    0%, 32.8%    { background: var(--bx-yellow); color: var(--bx-black); }
    33.3%, 100%  { background: transparent; color: var(--bx-white); }
}
@keyframes vx-step-2 {
    0%, 33.3%    { background: transparent; color: var(--bx-white); }
    33.8%, 66.1% { background: var(--bx-yellow); color: var(--bx-black); }
    66.6%, 100%  { background: transparent; color: var(--bx-white); }
}
@keyframes vx-step-3 {
    0%, 66.6%    { background: transparent; color: var(--bx-white); }
    67.1%, 99.5% { background: var(--bx-yellow); color: var(--bx-black); }
    100%         { background: transparent; color: var(--bx-white); }
}
@keyframes vx-dim-1 { 0%, 32.8% { opacity: 1; } 33.3%, 100% { opacity: 0.4; } }
@keyframes vx-dim-2 { 0%, 33.3% { opacity: 0.4; } 33.8%, 66.1% { opacity: 1; } 66.6%, 100% { opacity: 0.4; } }
@keyframes vx-dim-3 { 0%, 66.6% { opacity: 0.4; } 67.1%, 99.5% { opacity: 1; } 100% { opacity: 0.4; } }

/* Étape 1 — capture : la visée se resserre, puis l'éclair. */
.vx-shot { position: relative; width: 100%; }
.vx-shot img { width: 100%; height: auto; }

.vx-aims {
    position: absolute;
    inset: 0;
    animation: vx-aim var(--vx-d) infinite;
}
.vx-aim {
    position: absolute;
    width: 16%;
    height: 24%;
    border: 0 solid var(--bx-yellow);
}
.vx-aim--tl { top: 6%; left: 3%; border-top-width: 3px; border-left-width: 3px; }
.vx-aim--tr { top: 6%; right: 15%; border-top-width: 3px; border-right-width: 3px; }
.vx-aim--bl { bottom: 10%; left: 3%; border-bottom-width: 3px; border-left-width: 3px; }
.vx-aim--br { bottom: 10%; right: 15%; border-bottom-width: 3px; border-right-width: 3px; }

@keyframes vx-aim {
    0%          { transform: scale(1.3); opacity: 0; }
    5%          { opacity: 1; }
    12%, 32.8%  { transform: scale(1); opacity: 1; }
    33.3%, 100% { transform: scale(1); opacity: 0.3; }
}

.vx-flash {
    position: absolute;
    inset: 0;
    background: var(--bx-white);
    opacity: 0;
    animation: vx-flash var(--vx-d) infinite;
}
@keyframes vx-flash {
    0%, 13%   { opacity: 0; }
    14%       { opacity: 0.85; }
    20%, 100% { opacity: 0; }
}

/* Étape 2 — téléphone : balayage puis barre d'analyse. */
/* Ancré en haut et en bas de la scène : sa hauteur est alors définie et la
   largeur en découle (un height: 100% dans la grille retombait sur auto). */
.vx-phone {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    aspect-ratio: 9 / 17;
    padding: 12px 7px 10px;
    border: 3px solid var(--bx-white);
    border-radius: 18px;
}
.vx-phone-notch {
    align-self: center;
    width: 32%;
    height: 5px;
    background: var(--bx-white);
    border-radius: 3px;
}
.vx-phone-screen {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #111111;
    border-radius: 4px;
}
.vx-phone-screen img { width: 100%; height: 100%; object-fit: cover; }

.vx-scan {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to bottom, transparent calc(50% - 2px), var(--bx-yellow) 50%, transparent calc(50% + 2px)) no-repeat;
    background-size: 100% 200%;
    animation: vx-scan var(--vx-d) linear infinite;
}
@keyframes vx-scan {
    0%, 33.3%  { opacity: 0; background-position: 0 -100%; }
    34%        { opacity: 1; background-position: 0 -100%; }
    49%        { background-position: 0 100%; }
    49.1%      { background-position: 0 -100%; }
    64%        { opacity: 1; background-position: 0 100%; }
    65%, 100%  { opacity: 0; background-position: 0 100%; }
}

.vx-progress {
    display: block;
    height: 9px;
    border: 2px solid var(--bx-white);
}
.vx-progress span {
    display: block;
    height: 100%;
    background: var(--bx-yellow);
    transform: scaleX(1);
    transform-origin: left center;
    animation: vx-progress var(--vx-d) infinite;
}
@keyframes vx-progress {
    0%, 33.3% { transform: scaleX(0); animation-timing-function: steps(8, end); }
    62%, 99%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
}

/* Étape 3 — lunettes : le cadre apparaît, le verdict se tape. */
.vx-visor {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.vx-visor-lens {
    position: relative;
    overflow: hidden;
    border: 3px solid var(--bx-white);
    border-radius: 22px 22px 44px 44px;
}
.vx-visor-lens img { width: 100%; height: auto; }

/* Mêmes coordonnées illustratives que l'essai pour cette photo (demo.js). */
.vx-hud-box {
    position: absolute;
    left: 3%;
    top: 12%;
    width: 80%;
    height: 74%;
    border: 3px solid var(--bx-yellow);
    animation: vx-box var(--vx-d) infinite;
}
@keyframes vx-box {
    0%, 68%   { opacity: 0; transform: scale(1.15); }
    72%, 97%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(1); }
}

.vx-hud-label {
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    background: var(--bx-yellow);
    color: var(--bx-black);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    animation: vx-type var(--vx-d) infinite;
}
@keyframes vx-type {
    0%, 72%   { clip-path: inset(0 100% 0 0); animation-timing-function: steps(14, end); }
    80%, 98%  { clip-path: inset(0 0 0 0); }
    100%      { clip-path: inset(0 100% 0 0); }
}

/* Niveau du vrai verdict (posé par demo.js) : la couleur double le libellé. */
.vx-seq[data-seq-level="medium"] .vx-hud-label { background: var(--bx-orange); }
.vx-seq[data-seq-level="medium"] .vx-hud-box { border-color: var(--bx-orange); }
.vx-seq[data-seq-level="low"] .vx-hud-label,
.vx-seq[data-seq-level="none"] .vx-hud-label { background: var(--bx-red); }
.vx-seq[data-seq-level="low"] .vx-hud-box,
.vx-seq[data-seq-level="none"] .vx-hud-box { border-color: var(--bx-red); border-style: dashed; }

/* Pause demandée, ou séquence hors écran : tout se fige. */
.vx-seq.is-paused *,
.vx-seq.is-paused::after,
.vx-seq.is-offscreen *,
.vx-seq.is-offscreen::after { animation-play-state: paused !important; }

/* ── Détails repliés ────────────────────────────────────────────────────── */
.vx-more { border-bottom: var(--bx-line) solid var(--bx-white); }
.vx-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0 var(--bx-pad);
    font-weight: 700;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.vx-more summary::-webkit-details-marker { display: none; }
.vx-more summary::after {
    content: "+";
    font-family: var(--bx-grot);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}
.vx-more[open] summary::after { content: "−"; }
.vx-more summary:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
    .vx-more summary:hover { background: var(--bx-white); color: var(--bx-black); }
}
.vx-more-body { padding: 0.5rem 0 1.5rem; }
.vx-more-body > p {
    max-width: 70ch;
    margin: 0 0 1rem;
    padding: 0 var(--bx-pad);
    color: var(--bx-grey);
}
.vx-more .bx-table { margin-top: 1.5rem; }

/* ── Essai ──────────────────────────────────────────────────────────────── */
.vx-intro { margin-bottom: 1.5rem; }
.vx-screen { position: relative; }
.vx-screen-stamp { position: absolute; top: 0; right: 0; z-index: 2; }

/* ── Chiffres, limites ──────────────────────────────────────────────────── */
.vx-numbers { margin-top: clamp(3rem, 8vw, 6rem); }

.vx-no details summary {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.vx-no details summary::-webkit-details-marker { display: none; }
.vx-no details summary::after {
    content: "+ Détail";
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--bx-grey);
}
.vx-no details[open] summary::after { content: "− Fermer"; }
.vx-no details p { margin: 0.75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
    .vx-seq-toggle { display: none; }
}