/* =========================================================================
   VooX — Le grand bloc du fil : un visuel haut, sur toute la largeur, qu'on
   fait défiler d'un visuel à l'autre. Il coupe la grille de vignettes pour
   donner du rythme. Charte inchangée (voox.css).
   ========================================================================= */
/* Le bloc traverse la grille : les colonnes s'arrêtent au-dessus et
   reprennent en dessous, sans trou ni vignettes collées. */
.vb{
  column-span:all;-webkit-column-span:all;break-inside:avoid;
  margin:6px 0 26px;
}

/* Le défilement : un visuel à la fois, qui s'accroche. */
.vb-pager{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;
}
.vb-pager::-webkit-scrollbar{display:none}
.vb-slide{
  flex:0 0 100%;max-width:100%;scroll-snap-align:center;min-width:0;
  display:flex;flex-direction:column;
}

.vb-visuel{
  position:relative;display:block;border-radius:var(--voox-radius-card,18px);overflow:hidden;
  background:#E5E7EB;line-height:0;
}
.vb-visuel img,
.vb-visuel video{
  /* Carré sur mobile ; sur grand écran, la carte haute du fil (voir plus bas). */
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#E5E7EB;
}
.vb-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.85);color:#fff;
  backdrop-filter:blur(3px);transition:transform .25s,background .25s;
}
.vb-visuel:hover .vb-play{transform:translate(-50%,-50%) scale(1.07);background:rgba(0,0,0,.72)}

/* La légende, sous le visuel. */
/* La légende occupe le bas de la carte : les « En savoir plus » s'alignent
   d'une carte à l'autre, même quand la phrase manque. */
.vb-info{padding:12px 2px 0;line-height:1.35;flex:1;display:flex;flex-direction:column}
.vb-info-lien{margin-top:auto}
.vb-info-titre{
  display:block;font:600 17px/1.3 var(--voox-font-title,inherit);color:var(--voox-title,#0B0F14);
  text-decoration:none;
}
.vb-info-titre:hover{text-decoration:underline}
.vb-info-texte{
  margin:5px 0 0;font-size:14px;line-height:1.45;color:var(--voox-text,#46536A);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vb-info-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.vb-info-note{margin:0;font-size:13.5px;color:var(--voox-text,#46536A)}
.vb-etiquette{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  background:var(--voox-soft,#F2F5F9);border:1px solid var(--voox-line,rgba(11,15,20,.1));
  font:600 11px/1.5 var(--voox-font-text,inherit);letter-spacing:.05em;text-transform:uppercase;
  color:var(--voox-title,#0B0F14);
}
.vb-info-lien{
  display:inline-flex;align-items:center;align-self:flex-start;gap:6px;padding-top:8px;text-decoration:none;
  font:600 13.5px/1 var(--voox-font-text,inherit);color:var(--voox-title,#0B0F14);
}
.vb-info-lien:hover{text-decoration:underline}

/* Les points et les flèches. */
.vb-barre{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.vb-points{display:flex;gap:7px}
.vb-points button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--voox-line,rgba(11,15,20,.22));transition:width .25s,background .25s;
}
.vb-points button.est-actif{width:22px;border-radius:999px;background:var(--voox-title,#0B0F14)}
.vb-fleches{display:flex;gap:8px}
.vb-fleche{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--voox-line,rgba(11,15,20,.18));background:#fff;color:var(--voox-title,#0B0F14);
  transition:background .2s,color .2s;
}
.vb-fleche:hover{background:var(--voox-title,#0B0F14);color:#fff}
.vb-fleche:disabled{opacity:.35;cursor:default}
.vb-fleche:disabled:hover{background:#fff;color:var(--voox-title,#0B0F14)}

/* Les repères d'une vidéo : durée en bas à gauche, son en haut à droite. */
.voox-tile-duree{
  position:absolute;left:12px;bottom:12px;z-index:3;padding:5px 10px;border-radius:999px;
  background:rgba(11,15,20,.68);color:#fff;font:600 12px/1 var(--voox-font-text,inherit);pointer-events:none;
}
.voox-tile-son{
  position:absolute;top:12px;right:12px;z-index:4;display:grid;place-items:center;
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(11,15,20,.62);color:#fff;transition:background .2s,transform .2s;
}
.voox-tile-son:hover{background:rgba(11,15,20,.85);transform:scale(1.06)}
.voox-tile-son.est-allume svg path:last-child{display:none}

/* ------------------------------------------------------------------ */
/* Le fil en mosaïque : une grille, pas des colonnes. Les colonnes CSS  */
/* laissaient de grands blancs sous une vignette très haute.            */
/* ------------------------------------------------------------------ */
.voox-feed .voox-masonry{columns:auto;column-gap:normal;display:block}
.vf-segment{display:flex;align-items:flex-start;gap:20px}
.vf-colonne{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.voox-feed .voox-masonry .voox-tile{margin:0;break-inside:auto;width:100%}
/* La bande coupe le fil : elle respire de la même gouttière que les
   vignettes, au-dessus comme en dessous. Elle avait 6 px d'un côté et
   22 px de l'autre, et le fil paraissait irrégulier à cet endroit.
   (Seules les marges haut et bas sont posées ici : sur mobile la bande
   déborde de 16 px à gauche et à droite, plus bas.) */
.voox-feed .vb{column-span:auto;margin-top:20px;margin-bottom:20px}
@media (max-width:700px){
  .vf-segment{gap:12px}
  .vf-colonne{gap:12px}
  .voox-feed .vb{margin-top:12px;margin-bottom:12px}
}

/* Les vidéos jouent aussi dans les vignettes de la grille. */
.voox-masonry .voox-tile.a-video{position:relative;line-height:0}
.voox-masonry .voox-tile video{
  display:block;width:100%;height:auto;border-radius:var(--voox-radius-card,18px);background:#E5E7EB;
}

/* Sur grand écran, les blocs se rangent côte à côte, à la taille des cartes
   du fil : on en voit quatre ou cinq, et on fait défiler. */
@media (min-width:901px){
  .vb-slide{flex:0 0 250px}
  .vb-visuel img,.vb-visuel video{aspect-ratio:9/16}
  .vb-info{padding-top:10px}
  .vb-info-titre{font-size:15px}
  .vb-info-note{font-size:12.5px}
  .vb-info-texte{font-size:13px;-webkit-line-clamp:2}
  .vb-info-lien{font-size:12.5px}
  .vb-play{width:52px;height:52px}
}
@media (max-width:900px){
  /* Sur mobile, le bloc prend toute la largeur du fil, bord à bord. */
  .vb{margin-left:-16px;margin-right:-16px}
  .vb-pager{padding-left:16px;padding-right:16px;gap:16px}
  .vb-slide{flex:0 0 100%}
  .vb-barre{padding:0 16px}
  .vb-fleches{display:none}
  .vb-info-titre{font-size:16px}
}

/* Une vignette étirée pour que sa colonne finisse à la même hauteur que les
   autres : l'image est recadrée, jamais déformée. */
.voox-masonry .voox-tile img.est-etiree,
.voox-masonry .voox-tile video.est-etiree{object-fit:cover;width:100%}

/* Un flyer reste lisible en entier : pas de dégradé ni de titre posés sur
   son texte, ils n'apparaissent qu'au survol. */
.voox-tile.est-entier .caption{background:none}
.voox-tile.est-entier .caption .title{display:none}
.voox-tile.est-entier:hover .caption{background:rgba(0,0,0,.7)}
.voox-tile.est-entier:hover .caption .title{display:block}