/* V54: misma anchura, solo 30 px de alto; dos mitades iguales. */
@property --mcp-progress{syntax:"<number>";inherits:true;initial-value:0}
#mcViewer .mc-preference{--mcp-progress:0;--mcp-glow:0;--mcp-flow:to left;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;isolation:isolate;overflow:hidden;box-sizing:border-box;width:100%;height:30px;min-height:30px;margin-top:8px;padding:0;border:1px solid #ffffff30;border-radius:8px;background:#08131e9e;color:#fff;pointer-events:auto;touch-action:pan-y;box-shadow:none;user-select:none;-webkit-user-select:none;transition:--mcp-progress 240ms cubic-bezier(.22,1,.36,1),opacity 180ms ease,transform 180ms ease}
#mcViewer .mc-preference[hidden]{display:none!important}
#mcViewer .mc-preference::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,#087bc5,#258dd0);-webkit-mask-image:linear-gradient(var(--mcp-flow),#000 0%,#000 max(0%,calc(var(--mcp-progress)*100% - 18%*(1 - var(--mcp-progress)))),transparent calc(var(--mcp-progress)*100%),transparent 100%);mask-image:linear-gradient(var(--mcp-flow),#000 0%,#000 max(0%,calc(var(--mcp-progress)*100% - 18%*(1 - var(--mcp-progress)))),transparent calc(var(--mcp-progress)*100%),transparent 100%)}
#mcViewer .mc-preference[data-direction="right"]{--mcp-flow:to right}
#mcViewer .mc-preference[data-direction="left"]::before{background:linear-gradient(100deg,#b9364d,#ce5d6c)}
#mcViewer .mc-preference::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at var(--mcp-glow-x,50%) 50%,#fff 0%,#fff6 15%,transparent 68%);opacity:var(--mcp-glow);transition:opacity 180ms ease;pointer-events:none}
#mcViewer .mc-preference.mcp-dragging{transition:none}
#mcViewer .mc-preference.mcp-dragging::after{transition:none}
#mcViewer .mcp-choice{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:28px;min-height:28px;padding:0 6px;border:0;border-radius:0;background:transparent;color:#fff;font:600 9px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.1px;white-space:nowrap;cursor:pointer;text-shadow:0 1px 2px #0008;touch-action:pan-y;box-sizing:border-box}
#mcViewer .mcp-choice:focus-visible{outline:1px solid #fff;outline-offset:-3px;border-radius:7px}
#mcViewer .mcp-choice:disabled{cursor:wait;opacity:1}
#mcViewer .mcp-label{display:inline-block;transform:none}
#mcViewer .mcp-chevron{display:inline-block;font:400 10px/1 system-ui;flex:none;transform:none}
#mcViewer .mcp-divider{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);font:300 13px/1 system-ui;color:#ffffff8f;pointer-events:none}
#mcViewer .mcp-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#mcViewer .mc-preference.mcp-leaving{opacity:0;transform:translateY(4px);pointer-events:none}
@media(min-width:400px){#mcViewer .mcp-choice{font-size:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){#mcViewer .mc-preference,#mcViewer .mc-preference::after{transition:none}#mcViewer .mc-preference.mcp-leaving{transform:none}}

/* Barre pleine largeur, deux moities egales. Demonstration sans enregistrement. */
#mcViewer .mc-copy{padding-left:0;padding-right:0;max-width:none;width:100%}
#mcViewer .mc-copy> :not(.mc-preference){margin-left:20px;margin-right:76px}
#mcViewer .mc-copy>.mc-progress{width:calc(100% - 96px)}
#mcViewer .mc-preference{width:100%;border-radius:0}
#mcViewer .mc-preference.mcp-demo{animation:mcpExample 2s ease-in-out both}
#mcViewer .mc-preference.mcp-demo::before{background:linear-gradient(100deg,#087bc5,#258dd0);animation:mcpExampleColor 2s steps(1,end) both}
@keyframes mcpExample{0%,45%,50%,95%,100%{--mcp-progress:0}25%,75%{--mcp-progress:.85}}
@keyframes mcpExampleColor{0%{background:#087bc5;--mcp-flow:to right}50%,100%{background:#b9364d;--mcp-flow:to left}}
@media(prefers-reduced-motion:reduce){#mcViewer .mc-preference.mcp-demo,#mcViewer .mc-preference.mcp-demo::before{animation:none}}

/* V57: textos flotantes al inicio; el gesto revela el degradado. */
#mcViewer .mc-preference{background:transparent;border-color:transparent;box-shadow:none}
#mcViewer .mc-preference:focus-within{box-shadow:none}
#mcViewer .mc-preference::before{border-radius:inherit}

/* V58: capsule, alignement optique et direction coherente. */
#mcViewer .mc-preference{border-radius:999px!important;clip-path:inset(0 round 999px);height:30px;min-height:30px;width:100%;margin-left:0;margin-right:0}
#mcViewer .mc-preference::before,#mcViewer .mc-preference::after{border-radius:999px}
#mcViewer .mc-preference[data-direction="right"]{--mcp-flow:to right}
#mcViewer .mc-preference[data-direction="right"]::before{background:linear-gradient(100deg,#087bc5,#258dd0)}
#mcViewer .mc-preference[data-direction="left"]{--mcp-flow:to left}
#mcViewer .mc-preference[data-direction="left"]::before{background:linear-gradient(100deg,#b9364d,#ce5d6c)}
#mcViewer .mcp-choice{display:block;position:relative;width:100%;padding:0;height:28px;min-height:28px;text-align:center;font-size:9px;letter-spacing:.1px}
#mcViewer .mcp-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap}
#mcViewer .mcp-chevron{position:absolute;top:50%;transform:translateY(-50%);font-size:9px}
#mcViewer .mcp-dislike .mcp-chevron{left:8px}
#mcViewer .mcp-like .mcp-chevron{right:8px}
#mcViewer .mcp-divider{left:50%;margin:0}
#mcViewer .mc-preference.mcp-demo,#mcViewer .mc-preference.mcp-demo::before{animation:none}

/* V59: centres geometriques 25%, 50%, 75% du Clip. */
#mcViewer .mc-copy{left:0!important;right:0!important;width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
#mcViewer .mc-copy>.mc-preference{position:relative!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;display:block!important}
#mcViewer .mc-preference>.mcp-choice{position:absolute!important;top:0!important;width:50%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
#mcViewer .mc-preference>.mcp-dislike{left:0!important;right:auto!important}
#mcViewer .mc-preference>.mcp-like{left:50%!important;right:0!important}
#mcViewer .mc-preference .mcp-label{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:max-content!important;text-align:center!important}
#mcViewer .mc-preference>.mcp-divider{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:auto!important}

/* V60: marge gauche commune et lecture centree sur le Clip. */
#mcViewer .mc-copy{--mc-content-inset:20px}
#mcViewer .mc-copy>.mc-eyebrow,
#mcViewer .mc-copy>h2,
#mcViewer .mc-copy>.mc-description{
 margin-left:var(--mc-content-inset)!important;
 margin-right:76px!important;
 width:calc(100% - var(--mc-content-inset) - 76px)!important;
 max-width:none!important;
 box-sizing:border-box!important;
 padding-left:0!important;
 padding-right:0!important;
 text-align:left!important;
}
#mcViewer .mc-copy>.mc-progress{
 display:block!important;
 width:calc(100% - 2 * var(--mc-content-inset))!important;
 max-width:none!important;
 margin-left:var(--mc-content-inset)!important;
 margin-right:var(--mc-content-inset)!important;
 padding-left:0!important;
 padding-right:0!important;
 box-sizing:border-box!important;
}
#mcViewer .mc-copy>.mc-clock{
 margin-left:var(--mc-content-inset)!important;
 margin-right:var(--mc-content-inset)!important;
 text-align:left!important;
}