/* Version : 1.1 */
/* =====================================================================
   QuantumSite — page Vidéos
   Complète css/style.css (en-tête, couleurs du site).
   Une carte par lien : cyan, or et rouge (couleurs de l'image d'accueil,
   comme les paradigmes de la page Philosophie), plus un violet.
   ===================================================================== */

.page-videos {
  --serif: "Spectral", "Cambria Math", "STIX Two Text", Georgia, serif;
  --trait: rgba(159, 179, 214, 0.22);
  --or: #f2c879;
  --violet: #b79cff;
}

.v1 { --couleur: var(--cyan);  --couleur-voile: rgba(95, 212, 255, 0.12); }
.v2 { --couleur: var(--or);    --couleur-voile: rgba(242, 200, 121, 0.12); }
.v3 { --couleur: var(--rouge); --couleur-voile: rgba(255, 90, 110, 0.12); }
.v4 { --couleur: var(--violet); --couleur-voile: rgba(183, 156, 255, 0.12); }

/* L'image de l'accueil, floutée et assombrie, fixée derrière le contenu */
.page-videos::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -1;
  background: url("../images/fond-accueil.jpeg") center / cover no-repeat;
  filter: blur(30px) brightness(0.32) saturate(1.2);
}

.videos {
  padding: calc(var(--hauteur-entete) + 2.75rem) clamp(1rem, 3vw, 3.5rem) 4rem;
}

/* ---------- Titre ---------- */

.videos-titre {
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  padding-left: 1.1rem;
  border-left: 3px solid var(--cyan);
}

.videos-titre h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--texte);
}

.videos-titre .sous-titre {
  margin: 0.45rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--texte-doux);
}

/* ---------- Grille des cartes ---------- */

.grille-videos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* les quatre cartes sur une ligne */
  gap: clamp(1rem, 2vw, 1.75rem);
}

.video {
  position: relative;            /* toute la carte est cliquable (lien du titre étiré) */
  display: flex;
  flex-direction: column;
  padding: 0 0 1.1rem;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-top: 2px solid var(--couleur);
  border-radius: 10px;
  background: rgba(8, 20, 48, 0.6);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
  scroll-margin-top: calc(var(--hauteur-entete) + 1rem);
}

.video:hover,
.video:focus-within {
  background: var(--couleur-voile);
  border-color: var(--couleur);
  transform: translateY(-3px);
}

/* Aperçu 16:9 (les miniatures YouTube sont en 4:3 avec bandes noires : on recadre) */
.apercu {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.9rem;
  overflow: hidden;
  background: #020713;
}

.apercu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(5, 13, 34, 0.72);
  box-shadow: 0 0 0 2px var(--couleur), 0 0 24px var(--couleur-voile);
  transition: transform 0.2s;
}
.lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--couleur);
  transform: translate(-50%, -50%);
}
.video:hover .lecture { transform: scale(1.1); }

/* Carte « chaîne » : illustration au lieu d'une miniature */
.apercu-chaine {
  display: grid;
  place-items: center;
  color: var(--couleur);
  background:
    radial-gradient(circle at 40% 50%, var(--couleur-voile), transparent 65%),
    #050d22;
}
.apercu-chaine svg { width: 72%; height: auto; }

/* ---------- Textes ---------- */

.video .genre,
.video h2,
.video .resume,
.video .regarder { padding: 0 1.1rem; }

.video .genre {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--couleur);
}

.video h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
}

.video h2 a {
  color: var(--texte);
  text-decoration: none;
}
.video h2 a::after {              /* étire le lien sur toute la carte */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.video h2 a:focus-visible { outline: none; }
.video:has(h2 a:focus-visible) { outline: 2px solid var(--couleur); outline-offset: 3px; }

.video .resume {
  flex: 1;
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.55;
  color: #d5e0f5;
}

.video .regarder {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--couleur);
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 1250px) {
  .grille-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .videos { padding-top: calc(var(--hauteur-entete) + 1.75rem); }
}

@media (max-width: 640px) {
  .grille-videos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .video, .lecture { transition: none; }
  .video:hover, .video:focus-within { transform: none; }
}