/* ===== Propositions de vidéothèque (page de présentation) ===== */
.vm{--orange:#BE4F33;--vert:#0A2D1E;font-family:Inter,sans-serif;margin:10px 0 30px}
.vm-vig{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0!important;padding:0!important;background:#111!important;border-radius:10px;overflow:hidden;cursor:pointer}
.vm-vig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.vm-vig:hover img{transform:scale(1.05)}
.vm-play{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.vm-play svg{width:24px;height:24px;fill:var(--vert);margin-left:3px}
.vm-play.grand{width:84px;height:84px}.vm-play.grand svg{width:38px;height:38px}
.vm-txt h4{font-size:16px!important;font-weight:700!important;line-height:1.35!important;color:var(--vert)!important;margin:12px 0 10px!important}
.vm-pied{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vm-pied time{font-size:13px;color:#595959}
.vm .vid-cat{font-size:12px;padding:4px 10px}
/* 1. Grille */
.vm-tabs{margin-bottom:24px;display:flex;flex-wrap:wrap;gap:8px}
.vm-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.vm-carte[hidden],.vm-plus-w[hidden]{display:none}
.vm-plus-w{text-align:center;margin:30px 0 0}
.vm-plus{background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:6px;padding:12px 26px!important;font:600 15px Inter,sans-serif!important;cursor:pointer}
.vm-plus:hover{background:#9e4630!important}
/* 2. Vedette + playlist */
.vm-vedette-w{display:grid;grid-template-columns:1.8fr 1fr;gap:24px;align-items:start}
.vm-ecran{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;cursor:pointer}
.vm-ecran img{width:100%;height:100%;object-fit:cover;display:block}
.vm-ecran iframe,.vm-ecran video,.vm-modal-ecran iframe,.vm-modal-ecran video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vm-scene-txt h4{font-size:22px!important;margin:16px 0 12px!important;color:var(--vert)!important;font-weight:700!important}
.vm-playlist{background:#fff;border:1px solid #EADFD6;border-radius:12px;padding:12px;max-height:520px;overflow-y:auto}
.vm-pl-t{font-weight:600;color:var(--vert);margin:4px 6px 10px!important;font-size:14px}
.vm-ligne{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;padding:8px;border-radius:8px;cursor:pointer;transition:background .2s}
.vm-ligne:hover,.vm-ligne.on{background:#F9EEEB}
.vm-ligne .vm-vig{border-radius:6px;pointer-events:none}
.vm-ligne .vm-play{width:30px;height:30px}.vm-ligne .vm-play svg{width:14px;height:14px}
.vm-ligne .vm-txt h4{font-size:13px!important;margin:0 0 6px!important}
.vm-ligne .vm-pied time{font-size:11px}.vm-ligne .vid-cat{font-size:12px;padding:2px 8px}
/* 3. Rangées par catégorie */
.vm-rangee{margin-bottom:34px}
.vm-r-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.vm-r-tete h4{font-size:20px!important;font-weight:700!important;color:var(--vert)!important;margin:0!important}
.vm-r-tete h4 span{font-size:13px;font-weight:600;color:#fff;background:var(--orange);border-radius:20px;padding:2px 9px;margin-left:6px;vertical-align:middle}
.vm-r-fl{width:38px;height:38px;border:1px solid var(--orange)!important;background:#fff!important;color:var(--orange)!important;border-radius:6px;font-size:22px!important;line-height:1!important;cursor:pointer;margin-left:6px;padding:0!important}
.vm-r-piste{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.vm-r-piste .vm-carte{scroll-snap-align:start}
/* Fenêtre de lecture */
.vm-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.vm-modal[hidden]{display:none}
.vm-modal-fond{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.vm-modal-c{position:relative;width:min(1000px,100%);background:#fff;border-radius:14px;padding:46px 20px 18px}
.vm-modal-ecran{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.vm-x{position:absolute;top:8px;right:10px;border:0!important;background:none!important;font-size:30px!important;line-height:1!important;color:#0A2D1E!important;cursor:pointer;padding:0 6px!important}
.vm-modal-t{margin:14px 4px 0!important;font-weight:600;color:#0A2D1E}
@media (max-width:1024px){
  .vm-grille{grid-template-columns:1fr 1fr;gap:20px 14px}
  .vm-vedette-w{grid-template-columns:1fr}
  .vm-playlist{max-height:none}
  .vm-r-piste{grid-auto-columns:46%}
}
@media (max-width:600px){
  .vm-grille{grid-template-columns:1fr}
  .vm-r-piste{grid-auto-columns:78%}
  .vm-txt h4{font-size:14px!important}
  .vm-scene-txt h4{font-size:17px!important}
}
@media (max-width:1024px){.vm-playlist{max-height:420px!important;overflow-y:auto}.vm-ligne{grid-template-columns:110px 1fr}}
.vm-m-vedette .vm-tabs{margin-bottom:18px}.vm-ligne[hidden]{display:none!important}