/* E-learning ——————————————————————— */

/* Section e-learning (même pattern que .archives-section) */
.elearning-section {
  padding: var(--space-8);

  > .elearning-section__wrapper {
    background-color: var(--color-surface-light);
    border-radius: var(--radius-md);
    padding: var(--space-12);
  }

  /* Réinitialise les marges de .results-actions dans ce contexte */
  .results-actions {
    background-color: var(--color-clear-bg);
    margin: 0 0 var(--space-8);
  }
}

/* Grille des éléments e-learning */
ul.elearning-grid {
  container-name: elearning-grid;
  container-type: inline-size;
  display: grid;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    max-width: 100%;
  }

  /* max(296px, 50% − 4px) garantit toujours 1 ou 2 colonnes au maximum :
     3 × (50% − 4px) + 2 × 8px dépasse toujours 100% → 3e colonne impossible.
     Transition 1 → 2 colonnes exactement à 600px de grille (2 × 296px + 8px). */
  @media (width > 500px) {
    grid-template-columns: repeat(auto-fill, minmax(max(296px, 50% - 4px), 1fr));
  }
}

/* ——— Carte e-learning ——————————————————————— */

.elearning-card {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: box-shadow 150ms ease-out;

  &:hover {
    box-shadow: var(--shadow-border-hover);
  }

  a {
    color: var(--color-primary);
    text-decoration: none;

    &:hover p {
      color: var(--color-primary);
    }    
  }

  .elearning-card__title {
    font-size: var(--fs-heading-2);
    line-height: 1.25;
  }
}

/* Layout horizontal — 4 phases :
   Phase 1 (< 440px)    : vertical — 1 colonne, mobile étroit
   Phase 2 (440–600px)  : horizontal — 1 colonne, espace suffisant
   Phase 3 (600–888px)  : vertical — 2 colonnes viennent d'apparaître, chaque carte ~296px
   Phase 4 (≥ 888px)    : horizontal — 2 colonnes, chaque carte ~440px

   Seuil 2 colonnes : 2 × 296px + 8px (gap) = 600px de grille
   Seuil phase 4    : grille 888px → (888 − 8) ÷ 2 = 440px par colonne */

/* Phase 2 : 1 colonne, horizontal */
@container elearning-grid (440px <= width < 600px) {
  .elearning-card:has(.elearning-card__thumbnail) {
    flex-direction: row;

    /* Le thumbnail s'étire sur toute la hauteur de la carte (stretch par défaut) */
    .elearning-card__thumbnail {
      max-width: 220px;
    }

    /* Aligne le contenu avec le haut du thumbnail (margin-top: var(--space-12)) */
    .elearning-card__content {
      padding-block-start: var(--space-12);
    }
  }
}

/* Phase 4 : 2 colonnes, horizontal */
@container elearning-grid (width >= 888px) {
  .elearning-card:has(.elearning-card__thumbnail) {
    flex-direction: row;

    .elearning-card__thumbnail {
      max-width: 220px;
    }
  }
}

/* Miniature (vidéo uniquement) */
.elearning-card__thumbnail {
  aspect-ratio: 5 / 4;
  background-color: var(--color-surface-light);
  border-radius: 2px;
  flex-shrink: 0;
  margin: var(--space-12);
  overflow: hidden;
  position: relative;
  width: calc(100% - var(--space-24));

  img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
  }

  &::after {
    background-color: orangered;
    content: "";
    display: block;
    inset: 0;
    opacity: .15;
    position: absolute;
    mix-blend-mode: color;
  }
}

/* Contenu */
.elearning-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-block-start: 0;
  min-width: 0;
  padding: var(--space-12);
}

/* Ligne du haut : type de média + durée + favori */
.elearning-card__top {
  align-items: flex-start;
  display: flex;
  gap: var(--space-8);
  justify-content: space-between;
  margin-block-end: var(--space-8);
}

.elearning-card__media-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Icône du type de média (vidéo ou audio) */
.elearning-card__media-icon {
  color: var(--color-body-dimmed-text);
  display: flex;
  flex-shrink: 0;
}

/* Badge durée */
.elearning-card__duration {
  align-items: center;
  background-color: var(--color-secondary-100);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-secondary-dark);
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: var(--space-4);
  line-height: 1;
  padding: 1px var(--space-8) 1px 1px;
  white-space: nowrap;
}

/* Bouton favori */
.elearning-card__bookmark {
  background: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-body-text);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  opacity: 0.4;
  padding: var(--space-4);
  transition-duration: 150ms;
  transition-property: opacity, border-color;
  transition-timing-function: ease-out;

  &:hover {
    border-color: var(--color-primary);
    opacity: 1;
  }
}

/* Titre */
.elearning-card__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding-block-end: var(--space-20);

  a {
    color: var(--color-body-text);
    text-decoration: none;

    &:hover {
      color: var(--color-accent);
    }
  }
}

/* Pied de carte : auteur + date + bouton lecture */
.elearning-card__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 1.2;
  margin-block-start: auto;
}

.elearning-card__author {
  font-size: var(--fs-smallest);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.elearning-card__date {
  color: var(--color-body-dimmed-text);
  font-size: var(--fs-smallest);
  margin: 0;
}

/* ——— Vue single e-learning ——————————————————————— */

/* Lien de retour */
.elearning-back-nav {
  padding: var(--space-16) var(--space-20);

  .back-link {
    align-items: center;
    color: var(--color-body-text);
    display: inline-flex;
    font-size: var(--fs-small);
    font-weight: 500;
    gap: var(--space-8);
    text-decoration: none;

    &:hover {
      color: var(--color-accent);
    }
  }
}

/* La section vidéo doit avoir overflow:hidden pour que la <video> soit clippée au border-radius de la carte */
.elearning-single__video-section {
  overflow: hidden;
}

/* Figure : vidéo + légende */
.elearning-single__figure {
  background-color: var(--color-surface-light);
  border-radius: var(--radius-md);
  margin: var(--space-8);
  padding: var(--space-12);
}

/* Lecteur audio pleine largeur */
.elearning-single__audio {
  display: block;
  width: 100%;
}

/* Lecteur vidéo pleine largeur */
.elearning-single__video {
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-lighter);
  border-radius: var(--radius-sm);
  display: block;
  width: 100%;
}

/* Note de téléchargement sous la vidéo */
.elearning-single__download {
  color: var(--color-body-dimmed-text);
  font-size: var(--fs-small);
  padding-block-start: var(--space-12);
  max-width: 100%;
}

/* Section métadonnées */
.elearning-single__info {
  padding: var(--space-16) var(--space-20);
}

/* Ligne : favori + type de média + auteur */
.elearning-single__meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block: var(--space-12) var(--space-4);
}

/* Bloc auteur + date séparé du reste par un trait vertical */
.elearning-single__author-block {
  border-left: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-start: var(--space-12);
}

/* Titre principal de la vidéo */
.elearning-single__title {
  font-family: var(--ff-headings);
  font-size: var(--fs-heading-1);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

/* Bouton de lecture circulaire */
.elearning-card__play {
  align-items: center;
  background: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  padding: 0;
  transition-duration: 150ms;
  transition-property: background-color, color;
  transition-timing-function: ease-out;
  width: 2rem;

  & svg {
    fill: transparent;
    margin-inline-start: 3px;
    stroke: var(--color-primary);
    stroke-width: 1px;
  }

  &:hover {
    & svg {
      fill: var(--color-primary);
    }
  }
}

/* ——— Lecteur audio personnalisé ——————————————————————— */

.audio-player {
  align-items: center;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-surface-medium) 25%, var(--color-clear-bg)),
    color-mix(in srgb, var(--color-surface-medium) 40%, var(--color-clear-bg))
  );
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
}

/* Bouton lecture / pause */
.audio-player__play {
  align-items: center;
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  transition: background-color 150ms ease-out;
  width: 2.5rem;

  /* Compense l'asymétrie visuelle du triangle lecture */
  &:has(svg[viewBox="0 0 11 13"]) svg {
    margin-inline-start: 2px;
  }

  &:hover {
    background-color: var(--color-accent);
  }
}

/* Affichage du temps courant / durée */
.audio-player__time {
  color: var(--color-body-text);
  display: flex;
  flex-shrink: 0;
  font-family: var(--ff-headings);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  gap: var(--space-4);
  white-space: nowrap;
}

/* Barre de progression */
.audio-player__scrubber {
  --progress: 0%;

  appearance: none;
  background: linear-gradient(
    to right,
    var(--color-primary) var(--progress),
    color-mix(in srgb, var(--color-primary) 18%, transparent) var(--progress)
  );
  border-radius: var(--radius-full);
  cursor: pointer;
  flex: 1;
  height: 4px;
  outline-offset: 6px;

  /* Thumb — WebKit */
  &::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    height: 14px;
    width: 14px;
  }

  /* Thumb — Firefox */
  &::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    height: 14px;
    width: 14px;
  }
}

/* Bouton volume */
.audio-player__volume {
  background: none;
  border: none;
  color: var(--color-body-text);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  opacity: 0.5;
  padding: var(--space-4);
  transition: opacity 150ms ease-out;

  &:hover {
    opacity: 1;
  }

  &.is-muted {
    color: var(--color-accent);
    opacity: 1;
  }
}