.v2-avis { position: relative; z-index: 2; background: var(--fond); padding: 56px 0 110px; overflow-x: clip; }
.v2-avis-scene { position: relative; height: 300vh; }
.v2-avis-colle { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; --w: clamp(150px, min(18.5vw, 33vh), 300px); }
.v2-avis-fond { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gout); text-align: center; transform-origin: 50% 50%; will-change: transform; }
.v2-avis-fond .v2-sur { margin-bottom: clamp(10px, 1.6vh, 20px); }
.v2-avis-fond .v2-h2 { font-size: clamp(52px, 13.4vw, 260px); line-height: .9; }
.v2-avis-fond .v2-h2 .l { white-space: nowrap; }

.v2-avis-fenetre { position: absolute; inset: 0; display: flex; align-items: center; }
.v2-avis-rang { display: flex; align-items: flex-start; width: max-content; margin: 0 auto; padding: 0 40px; }

.v2-avis-carte { position: relative; flex: none; width: var(--w); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #1c1b19; color: #fff; isolation: isolate;
  box-shadow: 0 26px 50px -26px rgba(20,19,18,.55);
  rotate: var(--rot, 0deg); translate: 0 var(--dy, 0px); scale: 1;
  transition: rotate .55s var(--ease), translate .55s var(--ease), scale .55s var(--ease), box-shadow .55s var(--ease); }
.v2-avis-pose { flex: none; will-change: transform; }
.v2-avis-pose + .v2-avis-pose { margin-left: calc(var(--w) * -.31); }
.v2-avis-pose:has(.v2-avis-carte:hover, .v2-avis-carte:focus-within) { z-index: 10; }
.v2-avis-pose:has(.v2-avis-carte.v2-joue) { z-index: 12; }
.v2-avis-carte:hover, .v2-avis-carte:focus-within { rotate: 0deg; translate: 0 -14px; z-index: 10; }
.v2-avis-carte.v2-joue { rotate: 0deg; translate: 0 -10px; scale: 1.06; z-index: 12; box-shadow: 0 40px 70px -28px rgba(20,19,18,.7); }
.v2-avis-video, .v2-avis-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-user-drag: none; }
.v2-avis-video { background: #000; opacity: 0; object-position: 50% 50%; }
.v2-avis-affiche { z-index: 1; }
.v2-avis-carte.v2-joue .v2-avis-video { opacity: 1; }
.v2-avis-carte.v2-joue .v2-avis-affiche { visibility: hidden; }

.v2-avis-carte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(20,19,18,.82), rgba(20,19,18,.4) 55%, rgba(20,19,18,0)); transition: height .5s var(--ease), opacity .4s; }
.v2-avis-carte.v2-joue::after { height: 38%; background: linear-gradient(to top, rgba(20,19,18,.88), rgba(20,19,18,.45) 60%, rgba(20,19,18,0)); }
.v2-avis-carte.v2-joue.v2-lecture:not(:hover):not(:focus-within)::after { opacity: .75; }
.v2-avis-legende { position: absolute; left: 18px; right: 18px; bottom: 20px; z-index: 3; pointer-events: none; transition: opacity .35s; }
.v2-avis-nom { font-family: var(--texte); font-size: 18px; font-weight: 500; line-height: 1.15; }
.v2-avis-role { margin-top: 3px; font-family: var(--texte); font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.8); }
.v2-avis-zone { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.v2-avis-zone:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.v2-avis-lire { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--orange); transition: opacity .3s, scale .4s var(--ease); box-shadow: 0 10px 24px -10px rgba(255,65,7,.7); }
.v2-avis-lire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; }
.v2-avis-lire .p { stroke-width: 7; }
.v2-avis-lire .q { display: none; fill: none; stroke-width: 7; }
.v2-avis-zone:hover .v2-avis-lire { scale: 1.08; }

.v2-avis-carte.v2-joue .v2-avis-lire { opacity: 0; }
.v2-avis-carte.v2-joue .v2-avis-legende { opacity: 0; }
.v2-avis-flash { position: absolute; left: 50%; top: 50%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; scale: .8; }
.v2-avis-flash svg { width: 30px; height: 30px; fill: none; stroke: #F9F7F2; stroke-width: 2.2; stroke-linecap: round; }
.v2-avis-flash.v2-on { animation: v2-avis-flash .9s var(--ease) both; }
@keyframes v2-avis-flash { 0% { opacity: 0; scale: .8; } 18% { opacity: 1; scale: 1; } 62% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.12; } }

.v2-avis-cmd { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 9px; pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .35s, visibility .35s, translate .45s var(--ease); }
.v2-avis-carte.v2-joue .v2-avis-cmd { opacity: 1; visibility: visible; translate: 0 0; }
.v2-avis-cmd > * { pointer-events: auto; }
.v2-avis-qui { pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
.v2-avis-qnom { font-family: var(--texte); font-size: 16px; font-weight: 500; line-height: 1.15; color: #F9F7F2; }
.v2-avis-qrole { font-family: var(--texte); font-size: 11.5px; line-height: 1.3; color: rgba(249,247,242,.74); }
.v2-avis-barre { position: relative; height: 16px; margin: 0; cursor: pointer; --p: 0; }
.v2-avis-barre::before { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 3px; border-radius: 3px; background: rgba(249,247,242,.3); transition: top .25s var(--ease), height .25s var(--ease); }
.v2-avis-prog { position: absolute; left: 0; top: 6.5px; height: 3px; width: 100%; border-radius: 3px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); transition: top .25s var(--ease), height .25s var(--ease); }
.v2-avis-cur { position: absolute; left: calc(var(--p) * 100%); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #F9F7F2; box-shadow: 0 0 0 3px rgba(255,65,7,.35); opacity: 0; scale: .4; transition: opacity .25s, scale .3s var(--ease); pointer-events: none; }
.v2-avis-barre:hover::before, .v2-avis-barre:focus-visible::before { top: 6px; height: 4px; }
.v2-avis-barre:hover .v2-avis-prog, .v2-avis-barre:focus-visible .v2-avis-prog { top: 6px; height: 4px; }
.v2-avis-barre:hover .v2-avis-cur, .v2-avis-barre:focus-visible .v2-avis-cur, .v2-avis-barre.v2-tire .v2-avis-cur { opacity: 1; scale: 1; }
.v2-avis-barre:focus-visible { outline: 1px solid rgba(249,247,242,.8); outline-offset: 3px; border-radius: 4px; }
.v2-avis-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-avis-temps { font-family: var(--texte); font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(249,247,242,.78); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.v2-avis-btns { display: flex; gap: 6px; }
.v2-avis-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #F9F7F2; cursor: pointer;
  background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(249,247,242,.14);
  transition: background .25s, scale .3s var(--ease), box-shadow .25s; }
.v2-avis-btn:hover, .v2-avis-btn:focus-visible { background: rgba(20,19,18,.8); scale: 1.08; }
.v2-avis-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.v2-avis-btn svg { width: 18px; height: 18px; }
.v2-avis-son .x { display: none; }
.v2-avis-son[aria-pressed="true"] .o1, .v2-avis-son[aria-pressed="true"] .o2 { display: none; } .v2-avis-son[aria-pressed="true"] .x { display: inline; }
.v2-avis-son[data-niv="bas"] .o2 { display: none; }

.v2-avis-vol { position: relative; display: block; }
.v2-avis-vpan { position: absolute; left: 50%; bottom: 100%; width: 40px; margin-left: -20px; padding: 0 0 8px; display: grid; justify-items: center;
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .25s, visibility .25s, translate .35s var(--ease); }
.v2-avis-vol:hover .v2-avis-vpan, .v2-avis-vol:focus-within .v2-avis-vpan, .v2-avis-vol.v2-glisse .v2-avis-vpan { opacity: 1; visibility: visible; translate: 0 0; }
.v2-avis-vol-piste { position: relative; display: block; width: 32px; height: 104px; border-radius: 16px; cursor: pointer; touch-action: none; --v: 1;
  background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(249,247,242,.14); }
.v2-avis-vol-piste::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: rgba(249,247,242,.3); }
.v2-avis-vol-rempli { position: absolute; left: 50%; bottom: 12px; width: 3px; margin-left: -1.5px; height: calc((100% - 24px) * var(--v)); border-radius: 3px; background: var(--orange); }
.v2-avis-vol-cur { position: absolute; left: 50%; bottom: calc(12px + (100% - 24px) * var(--v)); width: 11px; height: 11px; margin: 0 0 -5.5px -5.5px; border-radius: 50%; background: #F9F7F2; box-shadow: 0 0 0 3px rgba(255,65,7,.35); pointer-events: none; }
.v2-avis-vol-piste:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.v2-avis-cc[aria-pressed="false"] { color: rgba(249,247,242,.6); } .v2-avis-cc[aria-pressed="true"] { color: #F9F7F2; box-shadow: inset 0 0 0 1.5px var(--orange); }
.v2-avis-carte.v2-sans-cc .v2-avis-cc { display: none; }
.v2-avis-carte video::cue { font-family: var(--texte); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .v2-avis-flash.v2-on { animation-duration: .01s; } }

.v2-final .v2-avis-scene { height: auto; }
.v2-final .v2-avis-colle { position: relative; height: auto; min-height: 0; overflow: visible; padding-top: clamp(70px, 9vw, 130px); }
.v2-final .v2-avis-fond { position: relative; inset: auto; will-change: auto; }
.v2-final .v2-avis-fenetre { position: relative; inset: auto; overflow-x: auto; margin-top: -4vw; padding: 30px 0 44px; pointer-events: auto; }
.v2-final .v2-avis-pose, .v2-final .v2-avis-fond { will-change: auto; }
@media (max-width: 991px) { .v2-avis-fond .v2-h2 { font-size: clamp(42px, 12.2vw, 104px); } }

@media (max-width: 1024px) {
  .v2-avis { padding-top: clamp(64px, 12vw, 104px); padding-bottom: clamp(72px, 12vw, 110px); }
  .v2-avis .v2-avis-scene { height: auto; }
  .v2-avis .v2-avis-colle { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding-top: 0; --w: clamp(196px, 56vw, 268px); }
  .v2-avis .v2-avis-fond { position: relative; inset: auto; padding-bottom: 0; will-change: auto; }
  .v2-avis .v2-avis-fenetre { position: relative; inset: auto; display: block; margin-top: clamp(14px, 3vw, 28px); padding: 28px 0 40px; }
  .v2-avis .v2-avis-rang { margin: 0; padding: 0 var(--gout); gap: 14px; }
  .v2-avis .v2-avis-pose + .v2-avis-pose { margin-left: 0; }
  .v2-avis-carte { rotate: calc(var(--rot, 0deg) * .5); translate: 0 0; }

  .v2-sortie--fini .v2-sortie-nuit { pointer-events: none; }
}
.v2-avis-video::-webkit-media-text-track-container { transform: translateY(-116px); }