/* ══════════════════════════════════════════════════════════
   FSF YouTube — frontend.css v3.0
   Responsive : Desktop 4col → Tablette 3col → Mobile 2col → XS 1col
══════════════════════════════════════════════════════════ */

:root {
  --fy-vert:    #00843D;
  --fy-vert-d:  #005a2b;
  --fy-jaune:   #FDEF00;
  --fy-rouge:   #E2001A;
  --fy-yt:      #FF0000;
  --fy-noir:    #111;
  --fy-gris:    #888;
  --fy-border:  #e5e5e5;
  --fy-t:       .22s ease;
}

/* Base */
.fsfy-wrap { font-family: 'Lato', Arial, sans-serif; width: 100%; }
.fsfy-wrap *, .fsfy-wrap *::before, .fsfy-wrap *::after { box-sizing: border-box; }
.fsfy-empty { color: var(--fy-gris); text-align: center; padding: 40px; font-style: italic; }

/* ══════════════════════════════════════════════
   EN-TÊTE SECTION
══════════════════════════════════════════════ */
.fsfy-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
  margin-bottom:   24px;
  padding-bottom:  16px;
  border-bottom:   2px solid #f0f0f0;
}
.fsfy-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fsfy-badge {
  display:         inline-block;
  background:      var(--fy-yt);
  color:           #fff;
  font-family:     'Oswald', 'Impact', sans-serif;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  1.5px;
  text-transform:  uppercase;
  padding:         4px 10px;
  flex-shrink:     0;
  line-height:     1.4;
}
.fsfy-badge-playlist { background: var(--fy-vert); }
.fsfy-titre {
  font-family:  'Oswald', 'Impact', sans-serif;
  font-size:    24px;
  font-weight:  700;
  color:        var(--fy-noir);
  margin:       0;
  line-height:  1.2;
}
.fsfy-sous-titre { font-size: 13px; color: var(--fy-gris); margin: 4px 0 0; }
.fsfy-voir-chaine {
  font-family:     'Oswald', sans-serif;
  font-size:       12px;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           var(--fy-vert-d);
  text-decoration: none;
  border:          2px solid var(--fy-vert-d);
  padding:         6px 14px;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      all var(--fy-t);
}
.fsfy-voir-chaine:hover { background: var(--fy-vert-d); color: #fff; }

/* ══════════════════════════════════════════════
   GRILLE — système à colonnes explicites
   On utilise des classes .fsfy-grille-Xcol
   pour que le shortcode contrôle précisément
══════════════════════════════════════════════ */
.fsfy-grille {
  display: grid;
  gap:     20px;
  width:   100%;
}
.fsfy-grille-1col { grid-template-columns: repeat(1, 1fr); }
.fsfy-grille-2col { grid-template-columns: repeat(2, 1fr); }
.fsfy-grille-3col { grid-template-columns: repeat(3, 1fr); }
.fsfy-grille-4col { grid-template-columns: repeat(4, 1fr); }
.fsfy-grille-5col { grid-template-columns: repeat(5, 1fr); }
.fsfy-grille-6col { grid-template-columns: repeat(6, 1fr); }

/* ══════════════════════════════════════════════
   CARTE VIDÉO
══════════════════════════════════════════════ */
.fsfy-card {
  background:  #fff;
  border:      1px solid var(--fy-border);
  overflow:    hidden;
  display:     flex;
  flex-direction: column;
  transition:  box-shadow var(--fy-t), transform var(--fy-t);
}
.fsfy-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform:  translateY(-3px);
}

/* Thumbnail — ratio 16:9 strict */
.fsfy-card-thumb {
  position:   relative;
  width:       100%;
  padding-top: 56.25%;
  overflow:    hidden;
  background:  #111;
  flex-shrink: 0;
  cursor:      pointer;
}
.fsfy-card-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .4s ease, opacity .25s;
}
.fsfy-card:hover .fsfy-card-img { transform: scale(1.05); opacity: .85; }

/* Overlay bouton play */
.fsfy-card-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0);
  transition:      background var(--fy-t);
}
.fsfy-card:hover .fsfy-card-overlay { background: rgba(0,0,0,.3); }

/* Bouton play — partagé carte + hero */
.fsfy-play-btn {
  background:      rgba(220, 0, 0, .92);
  border:          none;
  color:           #fff;
  border-radius:   50%;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      transform var(--fy-t), background var(--fy-t);
  flex-shrink:     0;
  width:  52px;
  height: 52px;
}
.fsfy-play-btn:hover { transform: scale(1.15); background: var(--fy-yt); }
.fsfy-play-icon { font-size: 20px; padding-left: 3px; line-height: 1; }

/* Wrapper iframe (lecture inline) */
.fsfy-iframe-wrap {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}
.fsfy-iframe-wrap iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}

/* Corps de la carte */
.fsfy-card-body {
  padding:        12px 14px 14px;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.fsfy-card-titre {
  font-family:           'Oswald', sans-serif;
  font-size:             14px;
  font-weight:           600;
  margin:                0;
  line-height:           1.35;
  color:                 var(--fy-noir);
  display:               -webkit-box;
  -webkit-line-clamp:    3;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}
.fsfy-meta {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  font-size:  11px;
  color:      #aaa;
  margin-top: auto;
}

/* ══════════════════════════════════════════════
   POPUP — lecteur en modale
══════════════════════════════════════════════ */
.fsfy-popup-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.88);
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .25s;
}
.fsfy-popup-overlay.open { opacity: 1; pointer-events: auto; }
.fsfy-popup-inner {
  position:   relative;
  width:       100%;
  max-width:   900px;
}
.fsfy-popup-ratio {
  position:    relative;
  padding-top: 56.25%;
  background:  #000;
}
.fsfy-popup-ratio iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}
.fsfy-popup-close {
  position:   absolute;
  top:        -40px;
  right:      0;
  background: none;
  border:     none;
  color:      #fff;
  font-size:  28px;
  cursor:     pointer;
  line-height: 1;
  padding:    4px 8px;
}
.fsfy-popup-close:hover { color: var(--fy-jaune); }

/* ══════════════════════════════════════════════
   HERO LAYOUT
══════════════════════════════════════════════ */
.fsfy-hero-layout {
  display:     grid;
  grid-template-columns: 1fr 280px;
  gap:         16px;
  align-items: start;
}

/* Lecteur principal */
.fsfy-player-wrap { width: 100%; }
.fsfy-ratio {
  position:    relative;
  padding-top: 56.25%;
  background:  #000;
  overflow:    hidden;
}
.fsfy-player-thumb {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: opacity var(--fy-t);
}
.fsfy-player-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,.2);
  transition:      background var(--fy-t);
}
.fsfy-player-wrap:hover .fsfy-player-overlay { background: rgba(0,0,0,.38); }
.fsfy-hero-player .fsfy-play-btn { width: 72px; height: 72px; }
.fsfy-hero-player .fsfy-play-icon { font-size: 28px; }

.fsfy-hero-info  { padding: 12px 0; }
.fsfy-hero-titre {
  font-family: 'Oswald', sans-serif;
  font-size:   20px;
  font-weight: 700;
  margin:      0 0 8px;
  color:       var(--fy-noir);
  line-height: 1.3;
}

/* Liste latérale */
.fsfy-hero-liste {
  display:        flex;
  flex-direction: column;
  gap:            0;
  max-height:     440px;
  overflow-y:     auto;
  border:         1px solid var(--fy-border);
  scrollbar-width: thin;
}
.fsfy-hero-item {
  display:        grid;
  grid-template-columns: 100px 1fr;
  gap:            10px;
  padding:        8px;
  cursor:         pointer;
  border-left:    3px solid transparent;
  border-bottom:  1px solid var(--fy-border);
  transition:     background var(--fy-t), border-color var(--fy-t);
}
.fsfy-hero-item:last-child { border-bottom: none; }
.fsfy-hero-item:hover, .fsfy-hero-item.active {
  background:   #f5f9f5;
  border-left-color: var(--fy-vert);
}
.fsfy-item-thumb {
  position:    relative;
  aspect-ratio: 16/9;
  overflow:    hidden;
  flex-shrink: 0;
}
.fsfy-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsfy-item-play {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,.4);
  color:           #fff;
  font-size:       14px;
  opacity:         0;
  transition:      opacity var(--fy-t);
}
.fsfy-hero-item:hover .fsfy-item-play { opacity: 1; }
.fsfy-item-info  { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.fsfy-item-titre {
  font-size:          12px;
  font-weight:        700;
  margin:             0;
  line-height:        1.3;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  color:              var(--fy-noir);
}
.fsfy-item-date { font-size: 11px; color: #aaa; }

/* ══════════════════════════════════════════════
   BANDEAU CHAÎNE
══════════════════════════════════════════════ */
.fsfy-bandeau {
  background:    linear-gradient(135deg, #005a2b 0%, #001a0d 100%);
  padding:       28px;
  margin-bottom: 20px;
}
.fsfy-bandeau-inner {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}
.fsfy-bandeau-avatar {
  width:        72px;
  height:       72px;
  border-radius: 50%;
  border:       3px solid rgba(255,255,255,.2);
  object-fit:   cover;
  flex-shrink:  0;
}
.fsfy-bandeau-infos { flex: 1; min-width: 180px; color: #fff; }
.fsfy-bandeau-nom {
  font-family: 'Oswald', sans-serif;
  font-size:   20px;
  font-weight: 700;
  margin:      0 0 4px;
}
.fsfy-bandeau-desc { font-size: 13px; opacity: .75; margin: 0 0 12px; line-height: 1.5; }
.fsfy-bandeau-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.fsfy-stat { display: flex; flex-direction: column; align-items: center; }
.fsfy-stat-val {
  font-family: 'Oswald', sans-serif;
  font-size:   22px;
  font-weight: 700;
  color:       var(--fy-jaune);
}
.fsfy-stat-lbl { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: 1px; }
.fsfy-btn-abonner {
  background:      var(--fy-yt);
  color:           #fff;
  font-family:     'Oswald', sans-serif;
  font-size:       13px;
  letter-spacing:  1px;
  text-transform:  uppercase;
  padding:         11px 22px;
  text-decoration: none;
  display:         inline-block;
  margin-left:     auto;
  flex-shrink:     0;
  white-space:     nowrap;
  transition:      background var(--fy-t);
}
.fsfy-btn-abonner:hover { background: #cc0000; color: #fff; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* Tablette large ≤ 1200px : max 3 colonnes */
@media (max-width: 1200px) {
  .fsfy-grille-4col,
  .fsfy-grille-5col,
  .fsfy-grille-6col { grid-template-columns: repeat(3, 1fr) !important; }
  .fsfy-grille      { gap: 16px; }
}

/* Tablette ≤ 900px : 2 colonnes, hero vertical */
@media (max-width: 900px) {
  .fsfy-grille-3col,
  .fsfy-grille-4col,
  .fsfy-grille-5col,
  .fsfy-grille-6col { grid-template-columns: repeat(2, 1fr) !important; }
  .fsfy-grille      { gap: 14px; }
  .fsfy-hero-layout { grid-template-columns: 1fr; }
  .fsfy-hero-liste  {
    max-height:      none;
    display:         grid;
    grid-template-columns: repeat(2, 1fr);
    gap:             10px;
    border:          none;
    overflow:        visible;
  }
  .fsfy-hero-item   { grid-template-columns: 80px 1fr; border: 1px solid var(--fy-border); }
  .fsfy-hero-liste .fsfy-hero-item { border-left: 3px solid transparent; }
  .fsfy-hero-liste .fsfy-hero-item.active,
  .fsfy-hero-liste .fsfy-hero-item:hover { border-left-color: var(--fy-vert); }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
  .fsfy-grille-2col,
  .fsfy-grille-3col,
  .fsfy-grille-4col,
  .fsfy-grille-5col,
  .fsfy-grille-6col { grid-template-columns: repeat(2, 1fr) !important; }
  .fsfy-grille      { gap: 10px; }

  /* Carte compacte */
  .fsfy-card-body  { padding: 8px 10px 10px; gap: 4px; }
  .fsfy-card-titre { font-size: 12px; line-height: 1.3; }
  .fsfy-play-btn   { width: 40px; height: 40px; }
  .fsfy-play-icon  { font-size: 16px; }

  /* Header section */
  .fsfy-titre      { font-size: 18px; }
  .fsfy-voir-chaine { padding: 5px 10px; font-size: 11px; }

  /* Bandeau */
  .fsfy-btn-abonner { margin-left: 0; width: 100%; text-align: center; }
  .fsfy-bandeau-stats { gap: 14px; }
  .fsfy-stat-val   { font-size: 18px; }

  /* Hero liste */
  .fsfy-hero-liste { grid-template-columns: 1fr 1fr; }
  .fsfy-hero-item  { grid-template-columns: 70px 1fr; }
}

/* Petit mobile ≤ 480px : 1 colonne */
@media (max-width: 480px) {
  .fsfy-grille,
  .fsfy-grille-2col,
  .fsfy-grille-3col,
  .fsfy-grille-4col,
  .fsfy-grille-5col,
  .fsfy-grille-6col { grid-template-columns: 1fr !important; gap: 14px !important; }

  .fsfy-card-titre   { font-size: 14px; -webkit-line-clamp: 2; }
  .fsfy-card-body    { padding: 10px 12px 12px; }
  .fsfy-play-btn     { width: 48px; height: 48px; }
  .fsfy-play-icon    { font-size: 20px; }
  .fsfy-hero-liste   { grid-template-columns: 1fr; }
  .fsfy-header       { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fsfy-voir-chaine  { width: 100%; text-align: center; }
  .fsfy-bandeau-inner { flex-direction: column; align-items: flex-start; }
  .fsfy-btn-abonner  { width: 100%; text-align: center; }
}