/* ============================================================
   AFEBAS — page « Vidéos » ([afebas_videos])

   Toutes les classes commencent par « afv- » : aucune règle du thème
   ne les vise. Le thème pose en revanche des styles génériques sur le
   contenu (liens soulignés, h2 en capitales bleues, img{height:auto}) :
   les sélecteurs sont donc préfixés par .afv-browser (spécificité 0,2,x)
   pour l'emporter sans !important.

   Pas de largeur en style inline : le thème écrase à max-width:100%
   tout attribut style contenant « width: 2… » ou « width: 3… ».
   ============================================================ */

.afv-browser{
  --afv-bleu:#003153;
  --afv-bleu-fonce:#00233b;
  --afv-bleu-clair:#e9f1f8;
  --afv-or:#FFD100;
  --afv-rouge:#d7263d;
  --afv-texte:#13233a;
  --afv-doux:#5a6b82;
  --afv-ligne:#e2e8f0;
  --afv-rayon:14px;
  --afv-ombre:0 8px 22px rgba(0,49,83,.10);
  --afv-ombre-forte:0 14px 34px rgba(0,49,83,.18);
  --afv-titre:var(--afb-font-display,'Barlow Condensed','Arial Narrow',sans-serif);
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 32px;
  color:var(--afv-texte);
  font-size:15px;
  line-height:1.5;
}
.afv-browser *,
.afv-browser *::before,
.afv-browser *::after{ box-sizing:border-box; }

/* ── Lecteur ─────────────────────────────────────────────── */
.afv-browser .afv-stage{
  margin:0 0 26px;
  padding:18px 18px 20px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--afv-bleu) 0%,var(--afv-bleu-fonce) 100%);
  box-shadow:var(--afv-ombre-forte);
  scroll-margin-top:120px; /* en-tête collant du thème */
}
.afv-browser .afv-stage-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin:0 0 14px;
}
.afv-browser .afv-stage-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--afv-or);
  color:var(--afv-bleu);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.afv-browser .afv-stage-kicker--direct{ background:var(--afv-rouge); color:#fff; }
.afv-browser .afv-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  animation:afv-pulsation 1.4s ease-in-out infinite;
}
@keyframes afv-pulsation{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(.7); }
}
.afv-browser .afv-stage-title{
  margin:0;
  color:#fff;
  font-family:var(--afv-titre);
  font-size:clamp(20px,2.2vw,28px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
  text-transform:none;
  overflow-wrap:anywhere;
}
.afv-browser .afv-player{
  position:relative;
  width:100%;
  height:0;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:12px;
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.afv-browser .afv-player-frame{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* Sur ordinateur, le lecteur ne prend plus toute la largeur (demande de
   l'utilisateur, 15/09/2026) : 960 px au plus, centré, et assez bas pour
   tenir dans l'écran sous l'en-tête collant du thème (560 px au moins).
   La première déclaration sert aux navigateurs qui ignorent min()/max(). */
@media (min-width:1024px){
  .afv-browser .afv-stage{
    max-width:960px;
    max-width:min(960px, max(560px, calc((100vh - 250px) * 16 / 9 + 36px)));
    margin-left:auto;
    margin-right:auto;
  }
}

/* ── Onglets de saison (visibles seulement avec JavaScript) ─ */
.afv-browser .afv-tabs{ display:none; }
.afv-browser.afv-js-actif .afv-tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  margin:0 0 18px;
  padding:4px 2px 8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.afv-browser .afv-tab{
  flex:0 0 auto;
  margin:0;
  padding:9px 16px;
  border:1px solid var(--afv-ligne);
  border-radius:999px;
  background:#fff;
  color:var(--afv-bleu);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.afv-browser .afv-tab:hover{
  border-color:var(--afv-bleu);
  box-shadow:0 2px 8px rgba(0,49,83,.12);
}
.afv-browser .afv-tab[aria-selected="true"]{
  border-color:var(--afv-bleu);
  background:var(--afv-bleu);
  color:var(--afv-or);
}
.afv-browser .afv-tab:focus-visible,
.afv-browser a:focus-visible,
.afv-browser .afv-more:focus-visible{
  outline:3px solid var(--afv-bleu);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--afv-or);
}

/* ── Saisons ─────────────────────────────────────────────── */
.afv-browser .afv-season{ margin:0 0 30px; }
.afv-browser.afv-js-actif .afv-season.afv-masque{ display:none !important; }
.afv-browser .afv-season-title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin:0 0 16px;
  padding:0 0 8px;
  border-bottom:3px solid var(--afv-or);
  color:var(--afv-bleu);
  font-family:var(--afv-titre);
  font-size:24px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.afv-browser .afv-season-count{
  color:var(--afv-doux);
  font-family:var(--afb-font-body,'Inter','Helvetica Neue',Arial,sans-serif);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

/* ── Grille : 1 colonne sur téléphone, 2-3 sur tablette, 3-4 sur ordinateur ─ */
.afv-browser .afv-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
@media (min-width:600px){
  .afv-browser .afv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:960px){
  .afv-browser .afv-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1360px){
  .afv-browser .afv-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ── Carte d'événement ───────────────────────────────────── */
.afv-browser .afv-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid var(--afv-ligne);
  border-radius:var(--afv-rayon);
  background:#fff;
  box-shadow:var(--afv-ombre);
  transition:transform .2s ease,box-shadow .2s ease;
}
.afv-browser .afv-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--afv-ombre-forte);
}
.afv-browser a.afv-card-cover{
  position:relative;
  display:block;
  width:100%;
  height:0;
  padding-top:56.25%;
  overflow:hidden;
  background:var(--afv-bleu-fonce);
  text-decoration:none;
}
.afv-browser .afv-card-img{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:cover; /* rogne les bandes noires des vignettes 4:3 */
  object-position:center;
  transition:transform .35s ease;
}
.afv-browser .afv-card:hover .afv-card-img{ transform:scale(1.04); }
.afv-browser .afv-card-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,35,59,.88);
  color:var(--afv-or);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.02em;
}
.afv-browser .afv-card-play{
  position:absolute;
  top:50%;
  left:50%;
  width:54px;
  height:54px;
  margin:-27px 0 0 -27px;
  border-radius:50%;
  background:rgba(255,209,0,.95);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:.92;
  transition:transform .2s ease,opacity .2s ease;
}
.afv-browser .afv-card-play::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  margin:-9px 0 0 -5px;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--afv-bleu);
}
.afv-browser a.afv-card-cover:hover .afv-card-play{
  opacity:1;
  transform:scale(1.08);
}
.afv-browser .afv-card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding:14px 16px 16px;
}
.afv-browser .afv-card-title{
  margin:0 0 4px;
  color:var(--afv-bleu);
  font-family:var(--afv-titre);
  font-size:20px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
  text-transform:none;
  overflow-wrap:anywhere;
}
.afv-browser .afv-card-date{
  margin:0 0 10px;
  padding-left:10px;
  border-left:3px solid var(--afv-or);
  color:var(--afv-doux);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}

/* ── Liste des vidéos d'un événement ─────────────────────── */
.afv-browser .afv-list{
  margin:0;
  padding:0;
  border-top:1px solid var(--afv-ligne);
  list-style:none;
}
.afv-browser .afv-item{
  margin:0;
  padding:0;
  border-bottom:1px solid var(--afv-ligne);
  list-style:none;
}
.afv-browser .afv-item::before{ content:none; }
.afv-browser a.afv-item-link{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 10px;
  margin:0 -6px;
  padding:8px 6px;
  border-radius:8px;
  color:var(--afv-texte);
  font-size:14px;
  line-height:1.3;
  text-decoration:none;
}
.afv-browser a.afv-item-link:hover{
  background:var(--afv-bleu-clair);
  color:var(--afv-bleu);
  text-decoration:none;
}
.afv-browser a.afv-item-link[aria-current="true"]{
  background:#fff6cc;
  box-shadow:inset 3px 0 0 var(--afv-or);
}
.afv-browser .afv-item-label{
  flex:1 1 auto;
  min-width:0;
  font-weight:700;
  overflow-wrap:anywhere;
}
.afv-browser .afv-item-meta{
  display:inline-flex;
  flex:0 0 auto;
  align-items:baseline;
  gap:8px;
  margin-left:auto;
  color:var(--afv-doux);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.afv-browser .afv-item-duree{
  color:var(--afv-bleu);
  font-weight:700;
}
.afv-browser .afv-item-live{
  padding:1px 7px;
  border-radius:999px;
  background:var(--afv-rouge);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Au-delà de six vidéos, la liste se replie (avec JavaScript seulement). */
.afv-browser.afv-js-actif .afv-card:not(.afv-deplie) .afv-item--suite{ display:none; }
.afv-browser .afv-more{ display:none; }
.afv-browser.afv-js-actif .afv-more{
  display:block;
  align-self:flex-start;
  margin:10px 0 0;
  padding:6px 12px;
  border:1px solid var(--afv-bleu);
  border-radius:999px;
  background:#fff;
  color:var(--afv-bleu);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}
.afv-browser.afv-js-actif .afv-more:hover{
  background:var(--afv-bleu);
  color:var(--afv-or);
}

/* ── Messages, lien vers la chaîne, débogage ─────────────── */
.afv-browser .afv-notice{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid #f1d770;
  border-radius:12px;
  background:#fff8d6;
  color:#4a3b00;
}
.afv-browser .afv-footer{
  margin:8px 0 0;
  text-align:center;
}
.afv-browser a.afv-footer-link{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:var(--afv-bleu);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
.afv-browser a.afv-footer-link:hover{
  background:var(--afv-bleu-fonce);
  color:var(--afv-or);
}
.afv-browser .afv-debug{
  margin:16px 0 0;
  padding:10px;
  border:1px solid #c00;
  color:#c00;
  font-family:monospace;
  font-size:13px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* ── Téléphones ──────────────────────────────────────────── */
@media (max-width:599px){
  .afv-browser .afv-stage{
    margin-bottom:20px;
    padding:12px 12px 14px;
    border-radius:14px;
  }
  .afv-browser .afv-player{ border-radius:8px; }
  .afv-browser .afv-season-title{ font-size:21px; }
  .afv-browser .afv-card-title{ font-size:19px; }
}

@media (prefers-reduced-motion:reduce){
  .afv-browser *,
  .afv-browser *::before,
  .afv-browser *::after{
    animation:none !important;
    transition:none !important;
  }
  .afv-browser .afv-card:hover,
  .afv-browser .afv-card:hover .afv-card-img{ transform:none; }
}