/* ============================================================================
   Login — panneau visuel gauche « chaîne de preuve »
   Reproduction HTML/CSS/SVG du visuel img/login_certilead_providers.png :
   sources de leads → carte « Preuve de consentement » (inclinée) → preuve
   transmise. Composition sur une scène fixe 1160×800 mise à l'échelle par
   LoginVisual.js (zoom → texte net à toute résolution).
   ============================================================================ */

.login-visual-panel {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(1100px 700px at 68% 30%, #141e44 0%, #0c1230 46%, #070b1e 100%);
}

/* --- Scène (repère fixe 1160×800) ---------------------------------------- */
.clv-stage {
    position: relative;
    width: 1160px;
    height: 800px;
    flex: 0 0 auto;
    font-family: inherit;
    user-select: none;
}

/* --- Plan 3D commun : perspective « fuyante » ------------------------------
   Toute la scène (sources, connecteurs, carte, sortie, badges) partage la
   même fuite : gauche proche de l'écran, droite qui s'éloigne. La carte
   ajoute un léger surplus d'inclinaison dans le même sens. Les étoiles
   restent hors du plan (profondeur de fond). */
.clv-scene {
    position: absolute;
    inset: 0;
    /* Décalage global de 60px vers la droite SANS changer la largeur
       (left seul rétrécirait la boîte → le SVG 100% se compresse et les
       jonctions lignes/cartes se désalignent). */
    left: 60px;
    right: -60px;
    /* --clv-rx / --clv-ry : offsets de parallaxe souris (LoginVisual.js, lissés). */
    transform: perspective(600px)
        rotateY(calc(8deg + var(--clv-ry, 0deg)))
        rotateX(calc(1.5deg + var(--clv-rx, 0deg)));
    transform-origin: 46% 50%;
}

/* --- Étoiles / poussière lumineuse ---------------------------------------- */
.clv-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.clv-stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8fb3ff;
    opacity: 0.35;
    animation: clv_twinkle 5s ease-in-out infinite;
}
.clv-stars i:nth-child(2n)  { animation-delay: 1.2s; width: 2px; height: 2px; }
.clv-stars i:nth-child(3n)  { animation-delay: 2.4s; opacity: 0.22; }
.clv-stars i:nth-child(5n)  { animation-delay: 3.6s; background: #63e6a8; opacity: 0.18; }
@keyframes clv_twinkle {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.45; }
}

/* --- Connecteurs SVG ------------------------------------------------------- */
.clv-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.clv-link-base {
    stroke: rgba(102, 140, 235, 0.20);
    stroke-width: 1.6;
    fill: none;
}
.clv-link-flow {
    stroke: url(#clv_grad_blue);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 16 148;
    animation: clv_dash 3.6s linear infinite;
    filter: drop-shadow(0 0 4px rgba(110, 168, 255, 0.55));
}
/* Un flux d'entrée reste discret tant que son élément n'est pas capturé. */
.clv-link-flow.in {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}
.clv-link-flow.in.is-on { opacity: 1; }
/* Les flux de sortie n'existent qu'une fois la preuve scellée. */
.clv-link-flow.out {
    stroke: url(#clv_grad_green);
    filter: drop-shadow(0 0 4px rgba(58, 212, 138, 0.5));
    opacity: 0;
    transition: opacity 0.5s ease;
}
.clv-stage[data-phase="sent"] .clv-link-flow.out { opacity: 1; }
.clv-link-flow.d1 { animation-delay: 0.0s; }
.clv-link-flow.d2 { animation-delay: 0.9s; }
.clv-link-flow.d3 { animation-delay: 1.7s; }
.clv-link-flow.d4 { animation-delay: 2.5s; }
@keyframes clv_dash {
    from { stroke-dashoffset: 164; }
    to   { stroke-dashoffset: 0; }
}

/* --- Colonne sources ------------------------------------------------------- */
.clv-sources-label {
    position: absolute;
    left: 36px;
    top: 64px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(148, 172, 230, 0.55);
}
.clv-source {
    position: absolute;
    left: 30px;
    width: 250px;
    height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(22, 32, 66, 0.75), rgba(12, 18, 42, 0.85));
    border: 1px solid rgba(110, 140, 220, 0.14);
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.8);
    /* En attente de capture : la fiche est en retrait, elle s'affirme au passage. */
    opacity: 0.5;
    transition: opacity 0.5s ease, border-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
.clv-source.is-captured {
    opacity: 1;
    border-color: rgba(120, 170, 255, 0.4);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.85), 0 0 24px -8px rgba(77, 124, 254, 0.45);
    transform: translateX(6px);
}
.clv-source.p1 { top: 108px; }
.clv-source.p2 { top: 248px; }
.clv-source.p3 { top: 388px; }
.clv-source.p4 { top: 528px; }
.clv-source-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(77, 124, 254, 0.12);
    border: 1px solid rgba(110, 156, 255, 0.22);
}
.clv-source-ico svg {
    width: 22px;
    height: 22px;
    stroke: #7fa7ff;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.clv-source-body { flex: 1 1 auto; min-width: 0; }
.clv-source-name {
    color: #e8eeff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 8px;
}
/* Le squelette gris cède la place à la donnée réellement capturée, au même
   endroit : avant la capture, il n'y a rien à afficher — c'est le propos. */
.clv-source-slot {
    position: relative;
    display: block;
    height: 14px;
}
.clv-source-line {
    position: absolute;
    left: 0;
    top: 5px;
    width: 72%;
    height: 4px;
    border-radius: 2px;
    background: rgba(142, 166, 220, 0.18);
    transition: opacity 0.3s ease;
}
.clv-source-val {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    color: #8fb4ff;
    font-size: 10.5px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.clv-source.is-captured .clv-source-line { opacity: 0; }
.clv-source.is-captured .clv-source-val { opacity: 1; transform: translateY(0); }

/* Pastille d'état, en haut à droite de la fiche */
.clv-source-tick {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 148, 215, 0.3);
    transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.clv-source-tick svg {
    width: 10px;
    height: 10px;
    stroke: #6fe3ad;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.clv-source.is-captured .clv-source-tick {
    border-color: rgba(58, 212, 138, 0.8);
    background: rgba(58, 212, 138, 0.12);
    box-shadow: 0 0 14px -2px rgba(58, 212, 138, 0.5);
}
.clv-source.is-captured .clv-source-tick svg { opacity: 1; }

/* Point de connexion lumineux au bord droit de chaque source */
.clv-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9cc0ff;
    box-shadow: 0 0 10px 2px rgba(110, 168, 255, 0.75);
}
.clv-node::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(110, 168, 255, 0.5);
    animation: clv_pulse 2.6s ease-out infinite;
}
.clv-node.n1 { left: 276px; top: 152px; }
.clv-node.n2 { left: 276px; top: 292px; }
.clv-node.n3 { left: 276px; top: 432px; }
.clv-node.n4 { left: 276px; top: 572px; }
.clv-node.n2::after { animation-delay: 0.6s; }
.clv-node.n3::after { animation-delay: 1.2s; }
.clv-node.n4::after { animation-delay: 1.8s; }
@keyframes clv_pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* --- Carte centrale « Preuve de consentement » ----------------------------- */
.clv-card-wrap {
    position: absolute;
    left: 425px;
    top: 104px;
    width: 330px;
    height: 580px;
    perspective: 1600px;
    transform-style: preserve-3d;
    animation: clv_float 7s ease-in-out infinite;
}
@keyframes clv_float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
/* Aura lumineuse ambiante derrière la carte, qui « respire » lentement.
   Bleue pendant la capture, elle vire au vert quand la preuve est scellée. */
.clv-card-wrap::before {
    content: "";
    position: absolute;
    inset: -55px -70px;
    transform: translateZ(-90px);
    background:
        radial-gradient(55% 60% at 18% 40%, rgba(77, 124, 254, 0.5), transparent 70%),
        radial-gradient(50% 55% at 85% 30%, rgba(88, 122, 235, 0.32), transparent 70%),
        radial-gradient(60% 50% at 50% 85%, rgba(56, 92, 190, 0.28), transparent 72%);
    filter: blur(34px);
    animation: clv_glow 6s ease-in-out infinite;
    transition: background 0.8s ease;
    pointer-events: none;
}
.clv-stage[data-phase="sealed"] .clv-card-wrap::before,
.clv-stage[data-phase="sent"] .clv-card-wrap::before {
    background:
        radial-gradient(55% 60% at 18% 40%, rgba(77, 124, 254, 0.45), transparent 70%),
        radial-gradient(50% 55% at 85% 30%, rgba(58, 212, 138, 0.36), transparent 70%),
        radial-gradient(60% 50% at 50% 85%, rgba(58, 212, 138, 0.22), transparent 72%);
}
@keyframes clv_glow {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.9; }
}
/* Plaque arrière : épaisseur de la dalle de verre (décalée en profondeur). */
.clv-card-wrap::after {
    content: "";
    position: absolute;
    inset: 14px -12px -14px 12px;
    border-radius: 26px;
    transform: rotateY(calc(4deg + var(--clv-ry, 0deg) * 1.2))
        rotateX(calc(2deg + var(--clv-rx, 0deg) * 1.2))
        translateZ(-52px);
    background: linear-gradient(160deg, rgba(16, 24, 52, 0.85), rgba(6, 9, 22, 0.92));
    border: 1px solid rgba(90, 120, 200, 0.12);
    box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.95);
    pointer-events: none;
}
/* La carte elle-même ne porte plus le verre : overflow/backdrop-filter
   « aplatiraient » la 3D de ses enfants. Elle porte la rotation + preserve-3d,
   le verre vit dans la couche .clv-card-bg, le contenu flotte en translateZ. */
.clv-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px 26px 0;
    border-radius: 24px;
    transform: rotateY(calc(4deg + var(--clv-ry, 0deg) * 1.2))
        rotateX(calc(2deg + var(--clv-rx, 0deg) * 1.2));
    transform-style: preserve-3d;
}
/* Couche verre (fond, flou, ombres, clip de la vague) */
.clv-card-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    transform: translateZ(0);
    background: linear-gradient(160deg, rgba(28, 40, 82, 0.62), rgba(10, 15, 34, 0.78));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        -55px 12px 110px -28px rgba(77, 124, 254, 0.55),
        55px 24px 110px -28px rgba(88, 122, 235, 0.34),
        0 45px 80px -28px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 46px rgba(80, 122, 235, 0.12);
    transition: box-shadow 0.8s ease;
    overflow: hidden;
    pointer-events: none;
}
/* Une fois scellée, la carte porte la lumière verte de la validation. */
.clv-stage[data-phase="sealed"] .clv-card-bg,
.clv-stage[data-phase="sent"] .clv-card-bg {
    box-shadow:
        -55px 12px 110px -28px rgba(77, 124, 254, 0.5),
        55px 24px 110px -28px rgba(58, 212, 138, 0.38),
        0 45px 80px -28px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 46px rgba(58, 212, 138, 0.12);
}
/* Reflet « verre » : sheen en haut + halo qui suit la souris
   (--clv-mx / --clv-my posées par LoginVisual.js sur la carte). */
.clv-card-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(160px 130px at var(--clv-mx, 30%) var(--clv-my, 0%),
            rgba(170, 200, 255, 0.14), transparent 70%),
        linear-gradient(178deg, rgba(255, 255, 255, 0.07), transparent 16%),
        radial-gradient(70% 30% at 22% 0%, rgba(150, 185, 255, 0.1), transparent 65%);
    pointer-events: none;
}
/* Profondeur interne : le contenu flotte à des altitudes différentes,
   la parallaxe interne apparaît dès que la scène tourne (souris). */
.clv-card-check { transform: translateZ(46px); }
.clv-card-title { transform: translateZ(38px); }
.clv-card-pill  { transform: translateZ(30px); }
.clv-row        { transform: translateZ(18px); }
/* Bordure en dégradé dessinée par masque — bleue, puis verte au scellement */
.clv-card-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(120deg,
        rgba(130, 180, 255, 1) 0%,
        rgba(110, 168, 255, 0.3) 30%,
        rgba(90, 130, 220, 0.25) 70%,
        rgba(140, 185, 255, 0.9) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: background 0.7s ease;
    pointer-events: none;
}
.clv-stage[data-phase="sealed"] .clv-card-bg::before,
.clv-stage[data-phase="sent"] .clv-card-bg::before {
    background: linear-gradient(120deg,
        rgba(130, 180, 255, 1) 0%,
        rgba(110, 168, 255, 0.28) 30%,
        rgba(58, 212, 138, 0.3) 70%,
        rgba(126, 232, 180, 1) 100%);
}
.clv-card-check {
    width: 64px;
    height: 64px;
    margin: 6px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(110, 168, 255, 0.8);
    box-shadow: 0 0 34px rgba(110, 168, 255, 0.65), inset 0 0 18px rgba(110, 168, 255, 0.28);
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.clv-stage[data-phase="sealed"] .clv-card-check,
.clv-stage[data-phase="sent"] .clv-card-check {
    border-color: rgba(58, 212, 138, 0.85);
    box-shadow: 0 0 34px rgba(58, 212, 138, 0.6), inset 0 0 18px rgba(58, 212, 138, 0.26);
}
.clv-card-check svg {
    width: 28px;
    height: 28px;
    stroke: #cfe0ff;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* La coche se trace au moment du scellement, elle n'est pas là d'emblée. */
.clv-card-check svg path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    transition: stroke-dashoffset 0.55s ease 0.1s;
}
.clv-stage[data-phase="sealed"] .clv-card-check svg path,
.clv-stage[data-phase="sent"] .clv-card-check svg path { stroke-dashoffset: 0; }
.clv-card-title {
    margin: 0 0 14px;
    text-align: center;
    color: #f2f6ff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
/* Pilule d'état : bleue et « en cours » pendant la capture, verte au scellement.
   C'est elle qui porte le statut — le titre au-dessus nomme l'objet. */
.clv-card-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 6px 8px;
    padding: 8px 0;
    border-radius: 9px;
    background: rgba(110, 168, 255, 0.12);
    border: 1px solid rgba(110, 168, 255, 0.28);
    color: #9dc0ff;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}
.clv-stage[data-phase="sealed"] .clv-card-pill,
.clv-stage[data-phase="sent"] .clv-card-pill {
    background: rgba(58, 212, 138, 0.14);
    border-color: rgba(58, 212, 138, 0.3);
    color: #7fe6b4;
}
.clv-pill-spin {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(157, 192, 255, 0.3);
    border-top-color: #9dc0ff;
    animation: clv_spin 0.85s linear infinite;
}
@keyframes clv_spin {
    to { transform: rotate(360deg); }
}
.clv-pill-check {
    display: none;
    width: 14px;
    height: 14px;
    stroke: #7fe6b4;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.clv-stage[data-phase="sealed"] .clv-pill-spin,
.clv-stage[data-phase="sent"] .clv-pill-spin { display: none; }
.clv-stage[data-phase="sealed"] .clv-pill-check,
.clv-stage[data-phase="sent"] .clv-pill-check { display: block; }
.clv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px;
    border-top: 1px solid rgba(130, 155, 215, 0.12);
}
.clv-row:first-of-type { border-top: 0; }
.clv-row-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(122, 148, 215, 0.1);
}
.clv-row-ico svg {
    width: 16px;
    height: 16px;
    stroke: #92a8d8;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.clv-row-label {
    flex: 1 1 auto;
    color: #93a5cd;
    font-size: 12px;
}
/* Tant que la preuve n'est pas scellée, la place de la valeur est tenue par
   un trait sourd — même principe que sur les fiches d'éléments. */
.clv-row-skel {
    position: absolute;
    right: 2px;
    top: 50%;
    width: 92px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 3px;
    background: rgba(142, 166, 220, 0.16);
    transition: opacity 0.35s ease;
}
.clv-row.is-on .clv-row-skel { opacity: 0; }
.clv-row-val {
    text-align: right;
    color: #e9efff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    /* La valeur ne s'inscrit qu'au moment où la preuve la fige. */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.clv-row.is-on .clv-row-val {
    opacity: 1;
    transform: translateY(0);
}
.clv-row-val small {
    display: block;
    color: #7286b3;
    font-size: 10px;
    font-weight: 400;
}
.clv-row-val .mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.3px;
}
/* Vague de points en pied de carte */
.clv-card-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 74px;
    opacity: 0.55;
}
.clv-card-wave path {
    stroke: rgba(110, 168, 255, 0.65);
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0.1 9;
}
.clv-card-wave path.w2 { stroke: rgba(110, 168, 255, 0.3); }
.clv-card-wave path.w3 { stroke: rgba(58, 212, 138, 0.3); }

/* --- Sortie : le cachet s'appose sur la preuve scellée ---------------------- */
.clv-out {
    position: absolute;
    left: 878px;
    top: 258px;
    width: 236px;
    text-align: center;
}
.clv-out-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(148, 172, 230, 0.55);
    margin-bottom: 26px;
}
.clv-seal {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto;
}
.clv-seal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(58, 212, 138, 0.5);
    opacity: 0;
}
.clv-stage[data-phase="sent"] .clv-seal-ring {
    animation: clv_ring 2.8s ease-out infinite;
}
.clv-stage[data-phase="sent"] .clv-seal-ring:nth-child(2) { animation-delay: 1.4s; }
@keyframes clv_ring {
    0%   { transform: scale(0.74); opacity: 0.8; }
    75%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.clv-seal-disc {
    position: absolute;
    inset: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(26, 38, 76, 0.9), rgba(10, 15, 34, 0.95));
    border: 1.5px solid rgba(122, 148, 215, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Rebond léger : le cachet est « apposé », il ne s'allume pas seulement. */
    transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clv-seal-disc svg {
    width: 38px;
    height: 38px;
    stroke: #7f92bf;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.5s ease;
}
.clv-stage[data-phase="sent"] .clv-seal-disc {
    border-color: rgba(58, 212, 138, 0.75);
    background: linear-gradient(160deg, rgba(20, 58, 46, 0.92), rgba(8, 22, 20, 0.95));
    box-shadow: 0 0 40px -6px rgba(58, 212, 138, 0.6), inset 0 0 20px rgba(58, 212, 138, 0.16);
    transform: scale(1.07);
}
.clv-stage[data-phase="sent"] .clv-seal-disc svg { stroke: #7fe6b4; }
.clv-out-state {
    margin-top: 22px;
    color: #7f92bf;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.5s ease;
}
.clv-stage[data-phase="sent"] .clv-out-state { color: #7fe6b4; }
.clv-out-sub {
    margin-top: 6px;
    color: #7286b3;
    font-size: 11px;
    line-height: 1.45;
}

/* --- Badges bas de scène ---------------------------------------------------- */
.clv-badges {
    position: absolute;
    left: 36px;
    top: 692px;
    display: flex;
    gap: 14px;
}

/* Mention de protection des données, sous les badges. */
.clv-privacy {
    position: absolute;
    left: 38px;
    top: 752px;
    width: 800px;
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    line-height: 1.55;
    text-wrap: pretty;
}
.clv-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 12px;
    background: rgba(18, 27, 56, 0.6);
    border: 1px solid rgba(120, 150, 235, 0.22);
    color: #dbe5fb;
    font-size: 13px;
    font-weight: 500;
}
.clv-badge svg {
    width: 17px;
    height: 17px;
    stroke: #8fb0f5;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Drapeau tricolore : trois aplats, donc ni stroke ni fill hérités du badge.
   L'arrondi vient du CSS (overflow), pas d'un clipPath — un id de moins. */
.clv-badge .clv-flag {
    flex: 0 0 auto;
    width: 21px;
    height: 14px;
    stroke: none;
    border-radius: 2.5px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* --- Accessibilité -----------------------------------------------------------
   !important : plusieurs animations sont posées par des sélecteurs d'état
   (.clv-stage[data-phase=…]) plus spécifiques que ce bloc. */
@media (prefers-reduced-motion: reduce) {
    .clv-link-flow,
    .clv-node::after,
    .clv-card-wrap,
    .clv-card-wrap::before,
    .clv-stars i,
    .clv-pill-spin,
    .clv-seal-ring,
    .clv-seal-disc {
        animation: none !important;
    }
    /* Pas de séquence : la scène est montrée à son aboutissement. */
    .clv-card-check svg path { stroke-dashoffset: 0 !important; }
}