/* Section « témoignage Renault » de la homepage (préfixe vtm). Hébergée dans la médiathèque Webflow.
   Le titre (h2) garde le style des titres du site : aucune police ni taille déclarée ici.
   Masquée par défaut : le script l'affiche sur le staging (*.webflow.io) ou avec ?vtm=1, tant que LIVE = false. */
.vtm,.vtm__stage,.vtm__title,.vtm__frame{box-sizing:border-box}
.vtm{display:none;position:relative;--open:160vh;--hold:100vh;--vtm-blue:#294afb;--vtm-ink:#1d1f29;--vtm-glass:rgba(29,31,41,.55);
  height:calc(100vh + var(--open) + var(--hold));font-family:'DM Sans',system-ui,sans-serif}
html.vtm-on .vtm{display:block}
.vtm__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.vtm__title{position:absolute;left:50%;top:14vh;transform:translateX(-50%);width:min(760px,88vw);margin:0;text-align:center;text-wrap:balance}
.vtm__frame{position:absolute;left:50%;top:58%;border-radius:16px;overflow:hidden;background:#0d0e13;z-index:2;container-type:size}
.vtm__poster,.vtm__player{position:absolute;display:block;border:0}
.vtm__poster{inset:0;width:100%;height:100%;object-fit:cover}
/* Le lecteur est dimensionné pour couvrir le cadre (16:9 recadré), comme object-fit: cover */
.vtm__player{left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));
  visibility:hidden;pointer-events:none}
.vtm__frame.is-ready .vtm__player{visibility:visible}
.vtm__shade{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(13,14,19,.82),rgba(13,14,19,0));
  opacity:0;transition:opacity .3s;pointer-events:none}
.vtm__frame.playing .vtm__shade{opacity:1}
.vtm__cc{position:absolute;left:50%;bottom:calc(5.5rem + 3vh);transform:translateX(-50%);width:min(1100px,80%);text-align:center;
  font-weight:600;font-size:clamp(20px,2.5vw,42px);line-height:1.15;color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);pointer-events:none;opacity:0;transition:opacity .15s,bottom .35s}
.vtm__cc.on{opacity:1}
.vtm__frame:not(.ui-on) .vtm__cc{bottom:calc(2rem + 3vh)}   /* contrôles masqués : les sous-titres descendent */

/* Bouton de lecture (état « fenêtre ») */
.vtm__big{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.9rem;color:#fff;z-index:3;transition:opacity .25s;
  background:none;border:0;cursor:pointer;font:inherit}
.vtm__big i{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:transform .25s,background .25s}
.vtm__big:hover i,.vtm__big:focus-visible i{transform:scale(1.06);background:var(--vtm-blue)}
.vtm__big span{font-weight:500;font-size:1rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.vtm__big.off{opacity:0;pointer-events:none}
.vtm__big svg{width:30px;height:30px;margin-left:4px}

/* Contrôles */
/* padding gauche : laisse libre le bouton flottant des cookies (en bas à gauche, ~16 à 60 px) */
.vtm__ui{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(1rem,3vw,3rem) clamp(1rem,3vh,2.2rem) max(88px,clamp(1rem,3vw,3rem));z-index:4;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s;color:#fff}
.vtm__ui.on{opacity:1;pointer-events:auto;transform:none}
.vtm__segs{display:flex;gap:6px;margin-bottom:.9rem}
.vtm__seg{position:relative;height:18px;display:flex;align-items:center;min-width:0;background:none;border:0;padding:0;cursor:pointer}
.vtm__seg::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:height .15s}
.vtm__seg b{position:absolute;left:0;height:3px;width:0;border-radius:2px;background:var(--vtm-blue);transition:height .15s,width .25s linear;box-shadow:0 0 0 .5px #fff}
.vtm__seg:hover::before,.vtm__seg:hover b,.vtm__seg:focus-visible::before,.vtm__seg:focus-visible b{height:6px}
.vtm__seg::after{content:attr(data-label);position:absolute;bottom:26px;left:0;white-space:nowrap;padding:.35rem .7rem;border-radius:8px;
  background:var(--vtm-ink);color:#fff;font-size:.8rem;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.vtm__seg:hover::after,.vtm__seg:focus-visible::after{opacity:1;transform:none}
.vtm__bar{display:flex;align-items:center;gap:.75rem}
.vtm__btn--end{margin-left:auto}
.vtm__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;min-width:44px;padding:0 .8rem;border-radius:12px;border:0;cursor:pointer;color:#fff;font:inherit;
  background:var(--vtm-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.9rem;font-weight:600;transition:background .2s}
.vtm__btn:hover,.vtm__btn:focus-visible{background:var(--vtm-blue)}
.vtm__btn svg{width:20px;height:20px;flex:none}
.vtm__btn[aria-pressed="false"]{opacity:.6}
.vtm__time{font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:500;opacity:.9;min-width:6.2em}
.vtm__chap{display:inline-flex;align-items:center;height:32px;padding:0 .85rem;border-radius:999px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.85rem;font-weight:500;white-space:nowrap}

/* Mode « en ligne » : téléphone, « réduire les animations », ou GSAP absent */
.vtm-inline .vtm{height:auto;padding:3.5rem 1rem 4rem}
.vtm-inline .vtm__stage{position:static;height:auto;overflow:visible}
.vtm-inline .vtm__title{position:static;transform:none;margin:0 auto 1.8rem}
.vtm-inline .vtm__frame{position:relative;left:auto;top:auto;width:100%;max-width:1100px;aspect-ratio:16/9;height:auto;margin:0 auto}
.vtm-inline .vtm__ui{padding:0 .7rem .7rem}
.vtm-inline .vtm__shade{opacity:1}
.vtm-inline .vtm__cc{bottom:5.9rem;width:92%;font-size:clamp(13px,3.7vw,22px)}
.vtm-inline .vtm__frame:not(.ui-on) .vtm__cc{bottom:1rem}
.vtm-inline .vtm__btn{height:40px;min-width:40px}
@media (max-width:900px){.vtm__chap,.vtm__time{display:none}}
@media (prefers-reduced-motion:reduce){.vtm__big i,.vtm__ui,.vtm__seg::after{transition:none}}

/* Repli si le kit du lecteur ne se charge pas : lecteur Stream avec ses propres contrôles */
.vtm__frame.is-fallback .vtm__player{visibility:visible;pointer-events:auto}
.vtm__frame.is-fallback .vtm__ui,.vtm__frame.is-fallback .vtm__cc,.vtm__frame.is-fallback .vtm__shade,.vtm__frame.is-fallback .vtm__big{display:none}

/* Plein écran : natif (:fullscreen) ou, sur iPhone, plein écran « maison » */
.vtm__frame:fullscreen{border-radius:0;width:100%;height:100%}
.vtm__frame.is-pseudo-fs{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;
  transform:none!important;border-radius:0!important;aspect-ratio:auto!important;margin:0!important;z-index:2147483000!important}
html.vtm-fs{overflow:hidden}

/* Plein écran sur téléphone : paysage obligatoire pour ne pas rogner l'image.
   En portrait, la vidéo est affichée entière (bandes noires) avec un message qui invite à tourner le téléphone. */
.vtm__rotate{display:none;position:absolute;z-index:5;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translateX(-50%);align-items:center;gap:.7rem;
  padding:.65rem 1.1rem;border-radius:999px;background:var(--vtm-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;
  font-size:.85rem;font-weight:500;line-height:1.25;width:max-content;max-width:calc(100% - 2rem);pointer-events:none}
.vtm__rotate svg{width:26px;height:26px;flex:none;animation:vtm-rotate 2.6s ease-in-out infinite}
@keyframes vtm-rotate{0%,25%{transform:rotate(0)}65%,100%{transform:rotate(-90deg)}}
@media (pointer:coarse){   /* téléphone et tablette : image entière dans les deux sens (le montage a des incrustations dans les coins) */
  .vtm__frame:fullscreen .vtm__player,.vtm__frame.is-pseudo-fs .vtm__player{width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16))}
  .vtm__frame:fullscreen .vtm__poster,.vtm__frame.is-pseudo-fs .vtm__poster{object-fit:contain}
}
@media (orientation:portrait) and (pointer:coarse){
  .vtm__frame:fullscreen .vtm__rotate,.vtm__frame.is-pseudo-fs .vtm__rotate{display:flex}
  .vtm__frame:fullscreen .vtm__cc,.vtm__frame.is-pseudo-fs .vtm__cc{bottom:7.5rem}
}
@media (prefers-reduced-motion:reduce){.vtm__rotate svg{animation:none;transform:rotate(-45deg)}}