/* ------------------------------------------------------------------
   Facette · onglet YouTube
   Le calendrier de la chaîne et le poste de dépôt. Reprend les couleurs
   et les rayons du tableau de bord (styles.css), rien d'autre.
   ------------------------------------------------------------------ */

#vue-youtube .yt-tete{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
#vue-youtube .yt-tete h2{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em}
#vue-youtube .yt-tete p{color:var(--texte-doux);font-size:14px;margin-top:3px}
#vue-youtube .yt-tete a{color:var(--bleu)}

#vue-youtube .yt-compteurs{display:flex;flex-wrap:wrap;gap:8px}
#vue-youtube .yt-compteur{display:flex;flex-direction:column;gap:1px;padding:7px 13px;border-radius:12px;border:1px solid var(--trait);background:var(--carte);font-size:11.5px;color:var(--texte-doux);min-width:84px}
#vue-youtube .yt-compteur b{font-family:var(--display);font-size:19px;color:var(--texte);line-height:1.1}

#vue-youtube .yt-rappel{margin:0 0 16px;padding:11px 14px;border-radius:12px;border:1px solid var(--trait);background:rgba(79,125,247,0.08);color:var(--texte-doux);font-size:13px;line-height:1.5}

#vue-youtube .yt-liste{display:flex;flex-direction:column;gap:10px}

#vue-youtube .yt-carte{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);overflow:hidden}
#vue-youtube .yt-carte.ouvert{border-color:var(--trait-fort)}
#vue-youtube .yt-carte-tete{display:flex;align-items:center;gap:14px;width:100%;padding:12px;text-align:left}
#vue-youtube .yt-carte-tete:hover{background:rgba(255,255,255,0.03)}
#vue-youtube .yt-mini{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--trait);flex:0 0 auto;background:var(--nuit)}
#vue-youtube .yt-carte-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#vue-youtube .yt-carte-titre{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.3}
#vue-youtube .yt-carte-infos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--texte-doux)}
#vue-youtube .yt-chevron{color:var(--texte-faible);font-size:14px;padding:0 4px}

#vue-youtube .yt-etat{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
#vue-youtube .yt-gris{background:rgba(246,242,255,0.10);color:var(--texte-doux)}
#vue-youtube .yt-orange{background:rgba(255,154,61,0.16);color:var(--orange)}
#vue-youtube .yt-bleu{background:rgba(79,125,247,0.18);color:#9DB6FF}
#vue-youtube .yt-violet{background:rgba(110,58,247,0.20);color:#C0A8FF}
#vue-youtube .yt-vert{background:rgba(47,211,165,0.16);color:var(--vert)}
#vue-youtube .yt-manque{color:var(--orange)}

#vue-youtube .yt-panneau{padding:4px 12px 16px;border-top:1px solid var(--trait);display:flex;flex-direction:column;gap:14px}
#vue-youtube .yt-panneau h4{font-family:var(--display);font-weight:600;font-size:13px;margin-bottom:6px}

#vue-youtube .yt-alerte{margin-top:12px;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,154,61,0.35);background:rgba(255,154,61,0.08);font-size:13px;color:var(--texte-doux)}
#vue-youtube .yt-alerte b{color:var(--orange);display:block;margin-bottom:5px}
#vue-youtube .yt-alerte ul{margin:0 0 6px 18px}
#vue-youtube .yt-alerte p{margin:0;font-size:12.5px;color:var(--texte-faible)}

#vue-youtube .yt-champ-tete{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#vue-youtube .yt-aide{flex:1;font-size:12px;color:var(--texte-faible)}
#vue-youtube .yt-texte{margin:0;padding:11px 13px;border-radius:12px;border:1px solid var(--trait);background:var(--nuit-2);font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--texte-doux);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}

#vue-youtube .yt-bouton{padding:5px 12px;border-radius:999px;border:1px solid var(--trait-fort);background:var(--nuit-2);color:var(--texte-doux);font-size:12px;font-weight:600;display:inline-block;text-decoration:none}
#vue-youtube .yt-bouton:hover{color:var(--texte);border-color:var(--texte-faible)}

#vue-youtube .yt-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
#vue-youtube .yt-mini-grande{width:100%;border-radius:12px;border:1px solid var(--trait);margin-bottom:8px;display:block}
#vue-youtube .yt-etapes{margin:0 0 0 18px;font-size:13px;line-height:1.7;color:var(--texte-doux)}
#vue-youtube .yt-note{margin-top:9px;font-size:12.5px;color:var(--texte-faible)}
#vue-youtube .yt-note a{color:var(--bleu)}

#vue-youtube .yt-pied{margin-top:14px;font-size:12px;color:var(--texte-faible)}
#vue-youtube .yt-attente,#vue-youtube .yt-erreur{color:var(--texte-doux);font-size:14px}
#vue-youtube code{font-family:var(--mono);font-size:12px}

@media (max-width:720px){
  #vue-youtube .yt-deux{grid-template-columns:1fr}
  #vue-youtube .yt-mini{width:104px}
  #vue-youtube .yt-carte-tete{gap:10px;padding:10px}
}

/* Shorts (05/10/2026) : un par jour, liste compacte au-dessus des épisodes. */
.yt-shorts { margin: 0 0 18px; }
.yt-shorts h3 { margin: 0 0 4px; font-size: 1rem; }
.yt-shorts p { margin: 0 0 10px; opacity: .8; font-size: .9rem; }
.yt-shorts ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.yt-short { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px; border-radius: 10px; }
a.yt-short:hover { background: rgba(127,127,127,.12); }
.yt-short-mini { width: 40px; height: 71px; object-fit: cover; border-radius: 6px; flex: none; }
.yt-short-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yt-short-texte b { font-weight: 600; font-size: .92rem; }
.yt-short-texte span { font-size: .82rem; opacity: .85; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
