/**
 * UniversHome : page d'accueil d'un domaine, en pleine largeur
 * (taxonomy-term--book-category--univers-home.html.twig).
 *
 * - UniversHero : carrousel plein écran des livres à la une ;
 * - UniversTiles : rubriques (mosaïque, grille, liste ; carrousel :
 *   UniversRail--tiles), avec ou sans leurs actualités ;
 * - UniversNews : actualités à la une, mêmes modes (UniversRail--news) ;
 * - UniversRail : rails de livres d'un bord à l'autre de l'écran ;
 * - .Full : contenu aligné sur la gouttière fluide (--page-gutter).
 */
.Full {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Les rails débordent jusqu'au bord ; leur premier livre reste aligné sur .Full */
.UniversHome {
  --rail-inset: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
  padding-bottom: 120px;
  overflow-x: clip;
}

.UniversHome-kicker {
  margin: 0 0 10px;
  color: var(--u-accent-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.UniversHome-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.05;
}

.UniversHome-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.UniversHome-section {
  margin-top: clamp(72px, 9vw, 128px);
}

/* Boutons ronds (flèches, pause) */
.UniversRound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--u-ink);
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.UniversRound svg {
  display: block;
  fill: currentColor;
}
.UniversRound--prev svg {
  transform: rotate(180deg);
}
.UniversRound:hover {
  color: var(--u-accent);
}
.UniversRound:disabled {
  opacity: 0.3;
  cursor: default;
}

/* 1. Carrousel plein écran ------------------------------------------ */
/* Comme celui de l'accueil (HomeHero) : couvertures en haut (mobile) ou à
   droite (desktop) qui glissent ; textes superposés qui changent en fondu. */
.UniversHero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  /* Le premier écran = en-tête + barre d'univers (--bar-height) + carrousel */
  min-height: clamp(560px, calc(100svh - var(--site-header-height, var(--header-height)) - var(--bar-height, 0px)), 900px);
  background: var(--u-surface);
  color: var(--u-ink);
  border-bottom: 1px solid var(--u-rule);
}

.UniversHero-track {
  grid-row: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.UniversHero-track::-webkit-scrollbar {
  display: none;
}

.UniversHero-slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--page-gutter) 24px;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Aplat derrière la couverture : du bas jusqu'au bord droit de l'écran */
.UniversHero-slide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: var(--u-hero-panel, var(--u-surface-alt));
}
.UniversHero-panels {
  display: grid;
  grid-row: 2;
}
.UniversHero-text {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px var(--page-gutter) 150px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.UniversHero-text.is-active {
  opacity: 1;
  transform: none;
}

.UniversHero-title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.UniversHero-title a {
  color: inherit;
  text-decoration: none;
}
.UniversHero-title a:hover {
  color: var(--u-accent);
}
.UniversHero-author {
  margin: 14px 0 0;
  font-family: var(--u-font-title);
  font-size: clamp(18px, 1.6vw, 24px);
  opacity: 0.8;
}
.UniversHero-summary {
  max-width: 52ch;
  margin: 24px 0 32px;
  font-size: 17px;
  line-height: 1.55;
}

.UniversHero-cover {
  position: relative;
  z-index: 1;
}
.UniversHero-cover img {
  display: block;
  width: auto;
  height: clamp(240px, 34svh, 300px);
  border-radius: var(--u-cover-radius);
  box-shadow: var(--u-cover-shadow);
}
.UniversHero-slide:not([inert]) .UniversHero-cover img {
  animation: universHeroIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes universHeroIn {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(2deg);
  }
}

/* Navigation : puces titrées et flèches, en bas du carrousel */
.UniversHero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}
.UniversHero-dots {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.UniversHero-dot {
  position: relative;
  flex: 1;
  max-width: 220px;
  min-width: 0;
  padding: 14px 0 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.6;
}
.UniversHero-dot::before,
.UniversHero-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 2px;
}
.UniversHero-dot::before {
  right: 0;
  background: currentColor;
  opacity: 0.25;
}
.UniversHero-dot[aria-current] {
  opacity: 1;
}
.UniversHero-dot[aria-current]::after {
  width: 100%;
  background: var(--u-accent);
  transform-origin: left;
}
/* Progression du défilement : transform (pas width), sans recalcul de mise
   en page à chaque image pendant 7 s */
.UniversHero:not(.is-paused) .UniversHero-dot[aria-current]::after {
  animation: universHeroProgress 7s linear both;
}
@keyframes universHeroProgress {
  from {
    transform: scaleX(0);
  }
}
.UniversHero-dotTitle {
  display: none;
}
.UniversHero-arrows {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Bouton pause : deux barres, ou triangle quand c'est en pause */
.UniversHero-pauseIcon {
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) calc(50% - 4px) 50% / 3px 12px no-repeat,
    linear-gradient(currentColor, currentColor) calc(50% + 4px) 50% / 3px 12px no-repeat;
}
.UniversHero.is-paused .UniversHero-pauseIcon {
  background: none;
  position: relative;
}
.UniversHero.is-paused .UniversHero-pauseIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translate(-35%, -50%);
}

/* 2. Rubriques : mosaïque, grille, carrousel, liste ------------------ */
.UniversTiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Le lien couvre toute la tuile (fond, nom, visuels) ; les actualités, à
   part, se posent dessus dans la seconde rangée (subgrid). */
.UniversTile {
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform 0.2s ease;
}
.UniversTile:hover {
  transform: translateY(-3px);
}
.UniversTile-link {
  position: relative;
  grid-area: 1 / 1 / -1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 20px;
  overflow: hidden;
  background: var(--u-surface-alt);
  border-radius: var(--u-radius-card);
  color: var(--u-ink);
  text-decoration: none;
}
.UniversTile-name {
  position: relative;
  z-index: 1;
  max-width: 70%;
  font-family: var(--u-font-title);
  font-weight: var(--u-title-weight);
  text-transform: var(--u-title-transform);
  font-size: 22px;
  line-height: 1.1;
}
.UniversTile-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 64px;
  height: auto;
  mix-blend-mode: multiply;
}
.UniversTile-covers {
  position: absolute;
  right: 16px;
  bottom: -24px;
  display: flex;
}
.UniversTile-covers img {
  width: 78px;
  height: auto;
  border-radius: var(--u-cover-radius);
  box-shadow: var(--u-cover-shadow);
  transition: transform 0.25s ease;
}
.UniversTile-covers img + img {
  margin-left: -36px;
}
.UniversTile-covers img:nth-child(1) { transform: rotate(-8deg); }
.UniversTile-covers img:nth-child(2) { transform: translateY(-10px); }
.UniversTile-covers img:nth-child(3) { transform: rotate(8deg); }
.UniversTile:hover .UniversTile-covers img:nth-child(1) { transform: rotate(-12deg) translateX(-8px); }
.UniversTile:hover .UniversTile-covers img:nth-child(3) { transform: rotate(12deg) translateX(8px); }

/* Actualités de la rubrique, dans la tuile : deux au plus, sans les
   couvertures qui les masqueraient */
.UniversTile-news {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 16px 20px 20px;
  list-style: none;
}
.UniversTile-news li:nth-child(n + 3) {
  display: none;
}
.UniversTile-news a {
  display: -webkit-box;
  overflow: hidden;
  padding-left: 14px;
  border-left: 2px solid var(--u-accent);
  color: var(--u-ink);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.UniversTile-news a:hover {
  color: var(--u-accent);
  text-decoration: underline;
}
.UniversTile.has-news .UniversTile-covers {
  display: none;
}

/* Carrousel : tuiles de largeur fixe dans un rail pleine largeur */
.UniversRail--tiles {
  grid-auto-columns: clamp(220px, 24vw, 320px);
}
.UniversRail--tiles .UniversTile {
  min-height: 210px;
  scroll-snap-align: start;
}

/* Liste compacte : noms et actualités, sans visuels */
.UniversTiles--list {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  column-gap: 48px;
  row-gap: 0;
}
.UniversTiles--list .UniversTile:hover {
  transform: none;
}
.UniversTiles--list .UniversTile-link {
  padding: 18px 0;
  background: none;
  border-bottom: 1px solid var(--u-rule);
  border-radius: 0;
}
.UniversTiles--list .UniversTile:hover .UniversTile-name {
  color: var(--u-accent);
}
.UniversTiles--list .UniversTile-name {
  max-width: none;
  padding-right: 48px;
  font-size: 20px;
}
.UniversTiles--list .UniversTile-icon {
  top: 10px;
  right: 0;
  width: 40px;
}
.UniversTiles--list .UniversTile-covers {
  display: none;
}
.UniversTiles--list .UniversTile-news {
  padding: 0 0 18px;
}
.UniversTiles--list .UniversTile-news li:nth-child(n + 3) {
  display: list-item;
}

/* Actualités à la une : mosaïque, grille, carrousel, liste ------------ */
.UniversNews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.UniversNewsCard {
  min-width: 0;
}
.UniversNewsCard-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  color: var(--u-ink);
  text-decoration: none;
}
.UniversNewsCard-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--u-radius-card);
  background: var(--u-surface-alt);
  aspect-ratio: 4 / 3;
}
.UniversNewsCard-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.UniversNewsCard-link:hover .UniversNewsCard-image img {
  transform: scale(1.04);
}
.UniversNewsCard-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.UniversNewsCard-tag {
  color: var(--u-accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.UniversNewsCard-title {
  font-family: var(--u-font-title);
  font-size: 19px;
  line-height: 1.2;
}
.UniversNewsCard-link:hover .UniversNewsCard-title {
  color: var(--u-accent);
}
.UniversNewsCard-summary {
  display: none;
  color: var(--u-ink-muted);
  font-size: 15px;
  line-height: 1.45;
}
.UniversNewsCard-date {
  color: var(--u-ink-muted);
  font-size: 13px;
}

/* Grille : résumé sous chaque titre */
.UniversNews--grid .UniversNewsCard-summary {
  display: block;
}

/* Carrousel */
.UniversRail--news {
  grid-auto-columns: clamp(260px, 28vw, 380px);
}
.UniversRail--news .UniversNewsCard {
  scroll-snap-align: start;
}

/* Liste compacte : vignette à gauche, titre et date */
.UniversNews--list {
  grid-template-columns: 1fr;
  column-gap: 48px;
  row-gap: 0;
}
.UniversNews--list .UniversNewsCard-link {
  flex-direction: row;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--u-rule);
}
.UniversNews--list .UniversNewsCard-image {
  flex: 0 0 96px;
  aspect-ratio: 1;
}
.UniversNews--list .UniversNewsCard-title {
  font-size: 17px;
}

/* 3. Rails pleine largeur --------------------------------------------- */
.UniversRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 15vw, 230px);
  gap: clamp(16px, 2.2vw, 36px);
  margin: 0;
  /* En haut : place pour la couverture qui s'ouvre au survol */
  padding: 20px var(--rail-inset) 24px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-inset);
  scrollbar-width: none;
}
.UniversRail::-webkit-scrollbar {
  display: none;
}
.UniversRail-controls {
  display: none;
  gap: 4px;
}

.UniversCard {
  scroll-snap-align: start;
}
.UniversCard-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--u-ink);
  text-decoration: none;
}
.UniversCard-cover {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 2 / 3;
  margin-bottom: 10px;
}
.UniversCard-cover img {
  /* La boîte de l'image = la couverture (voir .BookTeaser-cover img) */
  display: block;
  width: 100%;
  height: auto;
}
/* Survol : couverture qui s'entrouvre, coin corné (base.css, .BookCover) */
.UniversCard-rubrique {
  color: var(--u-accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.UniversCard-title {
  font-family: var(--u-font-title);
  font-size: 17px;
  line-height: 1.2;
}
.UniversCard-link:hover .UniversCard-title {
  color: var(--u-accent);
}
.UniversCard-author {
  color: var(--u-ink-muted);
  font-size: 14px;
}
.UniversCard-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--u-accent);
}
.UniversCard-day {
  font-family: var(--u-font-title);
  font-size: 40px;
  line-height: 1;
}
.UniversCard-month {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 4. Bandeau pleine largeur (à paraître) ------------------------------ */
.UniversHome-band {
  margin-top: clamp(72px, 9vw, 128px);
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  background: var(--u-surface-alt);
}

/* Tablette ------------------------------------------------------------ */
@media (min-width: 700px) {
  .UniversTiles--mosaic,
  .UniversTiles--grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(210px, auto);
  }
  .UniversTiles--grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .UniversTiles--list {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Mosaïque : la première rubrique en grand, avec ses couvertures même
     quand ses actualités s'affichent (elles restent à gauche) */
  .UniversTiles--mosaic .UniversTile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-name {
    font-size: 36px;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-covers {
    display: flex;
    right: 32px;
    bottom: -32px;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-covers img {
    width: 180px;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-covers img + img {
    margin-left: -74px;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-icon {
    width: 120px;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-news {
    max-width: 55%;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-news li:nth-child(n + 3) {
    display: list-item;
  }
  .UniversTiles--mosaic .UniversTile:first-child .UniversTile-news a {
    font-size: 16px;
  }
  /* Actualités : la première en grand */
  .UniversNews--mosaic,
  .UniversNews--grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .UniversNews--grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .UniversNews--list {
    grid-template-columns: repeat(2, 1fr);
  }
  .UniversNews--mosaic > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .UniversNews--mosaic > :first-child .UniversNewsCard-image {
    aspect-ratio: 4 / 3.4;
  }
  .UniversNews--mosaic > :first-child .UniversNewsCard-title {
    font-size: clamp(24px, 2.4vw, 36px);
  }
  .UniversNews--mosaic > :first-child .UniversNewsCard-summary {
    display: block;
  }
  /* Les petites actualités s'alignent sur la grande : leur image prend la
     place qui reste, leur titre tient sur deux lignes. */
  .UniversNews--mosaic > :not(:first-child) .UniversNewsCard-image {
    flex: 1 1 0;
    min-height: 110px;
    aspect-ratio: auto;
  }
  .UniversNews--mosaic > :not(:first-child) .UniversNewsCard-image img {
    position: absolute;
    inset: 0;
  }
  .UniversNews--mosaic > :not(:first-child) .UniversNewsCard-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .UniversRail-controls {
    display: flex;
  }
  .UniversHero-dotTitle {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Desktop ------------------------------------------------------------- */
@media (min-width: 1100px) {
  .UniversHero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: 1fr;
  }
  .UniversHero-panels {
    grid-row: 1;
    grid-column: 1;
  }
  .UniversHero-track {
    grid-row: 1;
    grid-column: 2;
  }
  /* Le carrousel tient exactement dans le reste du premier écran
     (en-tête + bandeau mesurés) ; son contenu se règle sur sa hauteur
     (unités cqh). Au-dessous de 360px de haut, on accepte de défiler. */
  .UniversHero {
    container-type: size;
    height: clamp(360px, calc(100svh - var(--site-header-height, var(--header-height)) - var(--bar-height, 0px)), 900px);
    min-height: 0;
  }
  .UniversHero-panels,
  .UniversHero-track {
    min-height: 0;
  }
  .UniversHero-text {
    justify-content: center;
    overflow: hidden;
    padding: clamp(24px, 7cqh, 64px) clamp(32px, 4vw, 72px) 112px var(--rail-inset);
  }
  .UniversHero-slide {
    padding: clamp(24px, 7cqh, 64px) var(--page-gutter) 112px;
  }
  .UniversHero-title {
    font-size: clamp(32px, min(5.4vw, 10cqh), 84px);
  }
  .UniversHero-summary {
    display: -webkit-box;
    overflow: hidden;
    margin: clamp(12px, 3cqh, 24px) 0 clamp(16px, 4cqh, 32px);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  /* Rien ne se tasse : on raccourcit le résumé selon la hauteur, puis on
     le retire sur les écrans très bas */
  .UniversHero-text > * {
    flex-shrink: 0;
  }
  @container (max-height: 560px) {
    .UniversHero-summary {
      -webkit-line-clamp: 2;
    }
  }
  @container (max-height: 440px) {
    .UniversHero-summary {
      display: none;
    }
    .UniversHero-text > :last-child {
      margin-top: 20px;
    }
  }
  .UniversHero-nav {
    right: auto;
    width: calc(6 / 11 * 100%);
    max-width: none;
    margin: 0;
    padding-left: var(--rail-inset);
    padding-right: clamp(32px, 4vw, 72px);
  }
  /* Aplat derrière la couverture, jusqu'au bord droit de l'écran */
  .UniversHero-slide::before {
    top: 0;
    left: 12%;
    height: auto;
  }
  /* Couverture : la hauteur disponible, marges et navigation déduites */
  .UniversHero-cover img {
    height: clamp(220px, calc(100cqh - clamp(24px, 7cqh, 64px) - 112px), 640px);
  }
  .UniversHero-summary {
    font-size: 18px;
  }
  /* 5 et 7 rubriques : la dernière tuile s'élargit pour fermer la grille */
  .UniversTiles--mosaic.UniversTiles--3 .UniversTile:not(:first-child) {
    grid-column: span 2;
  }
  .UniversTiles--mosaic.UniversTiles--5 .UniversTile:last-child,
  .UniversTiles--mosaic.UniversTiles--7 .UniversTile:last-child {
    grid-column: span 2;
  }
  .UniversTiles--grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .UniversTiles--list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .UniversHero-text {
    transition: none;
  }
  .UniversTile,
  .UniversTile-covers img,
  .UniversNewsCard-image img,
  .UniversCard-cover img {
    transition: none;
  }
  .UniversCard-link:hover .UniversCard-cover img {
    transform: none;
  }
  .UniversHero-slide:not([inert]) .UniversHero-cover img,
  .UniversHero:not(.is-paused) .UniversHero-dot[aria-current]::after {
    animation: none;
  }
}