/* ===== SyndiLibre — page Vidéos, charte DA06 =====
   Propre à videos.html : vidéo à la une, filtres, bibliothèque, popup de lecture.
   Le socle (jetons, sections, sol, pied) vient de site-da06.css. */

/* ---------- VIDÉO À LA UNE ---------- */
.une{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;border-top:1px solid var(--filet);border-bottom:3px solid var(--or)}
.une-vue{position:relative;display:block;width:100%;padding:0;aspect-ratio:16/9;background:var(--encre);border:0;border-right:1px solid var(--filet);cursor:pointer;overflow:hidden}
.une-vue img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .2s}
.une-vue:hover img{opacity:1}
.une-pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;display:grid;place-items:center;background:var(--or);border-radius:50%;color:var(--encre);transition:background .16s,color .16s}
.une-vue:hover .une-pl{background:var(--blanc);color:var(--violet)}
.une-pl svg{width:26px;height:26px;margin-left:3px}
.une-l{position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;background:rgba(27,20,38,.78);color:var(--creme);padding:4px 8px;border-radius:2px}
.une-b{padding:30px clamp(20px,2.4vw,34px)}
.une-k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.une-b h2{margin:14px 0 10px;font-size:clamp(25px,2.7vw,34px);line-height:1.06;letter-spacing:-.026em;color:var(--navy)}
.une-b p{margin:0;font-size:15.5px;color:var(--encre-2)}
.une-go{margin-top:22px}
@media(max-width:900px){.une{grid-template-columns:1fr}.une-vue{border-right:none;border-bottom:1px solid var(--filet)}}

/* ---------- FILTRES ---------- */
.vf{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--filet)}
.vf-b{min-height:44px;padding:0 15px;background:none;border:1px solid var(--filet);border-radius:var(--r);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2);cursor:pointer}
.vf-b:hover{border-color:var(--navy);color:var(--navy)}
.vf-b[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.vf-n{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3)}
.vf[hidden]{display:none}

/* ---------- BIBLIOTHÈQUE ---------- */
/* Cartes détachées : chacune porte son cadre, la gouttière respire (arbitrage du 25 sept. 2026). */
.biblio{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.bc{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--filet);border-radius:var(--r);overflow:hidden;color:inherit;font-family:inherit;cursor:pointer;transition:border-color .18s}
.bc:hover{border-color:var(--navy);border-top-color:var(--violet)}
.bc-th{position:relative;aspect-ratio:16/9;background:var(--creme-2);overflow:hidden}
/* Partage sur la vignette : la vidéo n'est pas en lecture ici, le bouton reste donc
   visible en permanence. Dans la popup, c'est l'inverse (voir plus bas). */
.bc-sh{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:rgba(27,20,38,.78);color:var(--creme);border-radius:2px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.bc-sh svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bc-sh:hover,.bc-sh:focus-visible{background:var(--violet);color:#fff;outline:none}
.bc-sh.is-ok{background:var(--or);color:var(--encre)}
.bc-sh .pg-t{white-space:nowrap}
@media(max-width:820px){.bc-sh .pg-t{display:none}.bc-sh{padding:0 9px}}
/* Popup de lecture : pendant la lecture le bouton s'efface pour ne pas encombrer,
   et revient dès que la souris entre dans la boîte (ou au clavier, par le focus). */
.vid.en-lecture #vpShare{opacity:0;pointer-events:none;transition:opacity .18s}
.vid.en-lecture .vid-box:hover #vpShare,.vid.en-lecture #vpShare:focus-within{opacity:1;pointer-events:auto}
.bc-th img{width:100%;height:100%;object-fit:cover}
.bc-pl{position:absolute;left:10px;bottom:10px;width:32px;height:32px;display:grid;place-items:center;background:var(--or);border-radius:2px;color:var(--encre)}
.bc-pl svg{width:14px;height:14px;margin-left:1px}
.bc:hover .bc-pl{background:var(--navy);color:var(--creme)}
.bc-l{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;background:rgba(27,20,38,.78);color:var(--creme);padding:3px 6px;border-radius:2px}
.bc-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.bc-g{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.bc-t{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;letter-spacing:-.02em;color:var(--navy)}
.bc-d{margin:0;font-size:14.5px;line-height:1.55;color:var(--encre-2)}
.bc-d-long{display:none}
.bc-d.open .bc-d-court{display:none}
.bc-d.open .bc-d-long{display:inline}
.bc-more{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--violet);cursor:pointer;white-space:nowrap}
.bc-more:hover,.bc-more:focus-visible{text-decoration:underline}
.bc-soon{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin-top:auto;padding-top:6px}
@media(max-width:1000px){.biblio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.biblio{grid-template-columns:1fr;gap:16px}}
.biblio-vide{margin-top:40px;padding:30px;background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);font-size:15.5px;color:var(--encre-2)}
.biblio-vide[hidden],.biblio[hidden]{display:none}

/* ---------- POPUP DE LECTURE (même lecteur que l'accueil) ---------- */
.vid{position:fixed;inset:0;z-index:96;background:rgba(27,20,38,.72);display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,32px)}
.vid[hidden]{display:none}
.vid-box{width:min(1600px,85vw,100%);max-height:90vh;overflow-y:auto;background:var(--creme);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);color:var(--encre)}
.vid-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px clamp(16px,2vw,26px);border-bottom:1px solid var(--filet)}
.vid-eyebrow{margin:0;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--or-f)}
.vid-title{margin:6px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,30px);line-height:1.1;letter-spacing:-.024em;color:var(--navy)}
.vid-close{width:44px;height:44px;flex:none;background:none;border:1px solid var(--filet);border-radius:var(--r);color:var(--navy);font-size:24px;line-height:1;cursor:pointer}
.vid-close:hover{background:var(--creme-2);color:var(--violet)}
.vid-main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(14px,1.8vw,24px);padding:clamp(16px,2vw,26px);align-items:start}
.vid-frame{position:relative;background:var(--encre);border:1px solid var(--filet);border-radius:2px;aspect-ratio:16/9;max-height:calc(90vh - 210px);margin-inline:auto;overflow:hidden}
.vid-frame video{width:100%;height:100%;display:block;object-fit:contain;background:var(--encre)}
.vid-frame iframe{width:100%;height:100%;border:0;display:block;background:var(--encre)}
.vid-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;background:rgba(27,20,38,.82);color:var(--creme)}
.vid-soon p{margin:0;font-family:var(--serif);font-size:clamp(19px,1.8vw,26px);line-height:1.12;letter-spacing:-.022em;color:var(--blanc)}
.vid-soon .vid-soon-d{font-family:var(--sans);font-size:14px;line-height:1.6;letter-spacing:0;color:rgba(251,246,236,.68);max-width:46ch}
/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus, sinon le voile
   reste posé sur le lecteur et avale les clics. */
.vid-soon[hidden],.vid-side[hidden]{display:none}
/* grande flèche de lecture au centre du lecteur */
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:84px;height:84px;display:grid;place-items:center;padding:0;background:rgba(27,20,38,.62);border:1px solid rgba(251,246,236,.34);border-radius:50%;color:var(--creme);cursor:pointer;transition:background .15s,transform .15s}
.vid-play[hidden]{display:none}
.vid-play svg{width:34px;height:34px;margin-left:4px}
.vid-play:hover,.vid-play:focus-visible{background:var(--violet);border-color:var(--violet);color:#fff;transform:translate(-50%,-50%) scale(1.06)}
.vid-bar{display:flex;align-items:center;gap:16px;margin-top:14px}
.vid-desc{margin:0;font-size:15px;color:var(--encre-2);max-width:none;flex:1}
.vid-frame.is-fs{position:fixed;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;z-index:9999}
/* vignette de la vidéo en cours : elle reste en place et se signale */
.vc.is-on{background:var(--creme);border-color:var(--navy);box-shadow:inset 3px 0 0 var(--or)}
.vc.is-on .vc-pl{background:var(--violet);color:#fff}
.vc-now{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.vid-side{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.vid-side-t{margin:0;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--or-f);flex:none}
/* la liste défile dans son cadre, sans entraîner la page */
.vid-list{display:grid;gap:8px;align-content:start;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;max-height:calc(90vh - 210px);padding-right:4px;scrollbar-width:thin}
.vc{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:8px;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);cursor:pointer;color:inherit;font-family:inherit}
.vc:hover{border-color:var(--navy)}
.vc[aria-current="true"]{border-color:var(--violet)}
.vc-th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--creme-2);border-radius:2px}
.vc-th img{width:100%;height:100%;object-fit:cover;display:block}
.vc-pl{position:absolute;left:6px;bottom:6px;width:22px;height:22px;display:grid;place-items:center;background:var(--or);border-radius:2px;color:var(--encre)}
.vc-pl svg{width:12px;height:12px}
.vc-l{position:absolute;right:5px;top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;background:rgba(27,20,38,.78);color:var(--creme);padding:2px 5px;border-radius:2px}
.vc-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.vc-g{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.vc-t{font-family:var(--serif);font-size:17px;line-height:1.14;letter-spacing:-.018em;color:var(--navy)}
@media(max-width:1100px){.vid-box{width:min(1600px,94vw,100%)}}
@media(max-width:920px){.vid-main{grid-template-columns:1fr}.vid-side{order:2}.vid-frame{max-height:calc(90vh - 320px)}.vid-list{max-height:46vh}}
@media(max-width:560px){.vid-bar{flex-direction:column;align-items:flex-start}.vc{grid-template-columns:92px minmax(0,1fr)}}