/* Variantes de hero (index1.html, index2.html) : le livre apparait en premier, a droite.
   Telephone d'abord : le livre est en haut a droite, le texte en bas ; a partir de 768 px, composition en deux colonnes. */
.hero__books { position: absolute; z-index: 2; right: 4vw; top: 76px; width: 38vw; max-width: 250px; aspect-ratio: 2 / 3; pointer-events: none; }
.hero__books::before { content: ""; position: absolute; inset: -35%; z-index: -1; background: radial-gradient(circle, rgba(255, 186, 120, .3), transparent 62%); }
.hbook { position: absolute; inset: 0; padding: 0; border: 0; background: none; border-radius: 4px; pointer-events: auto; transform-origin: 50% 100%; }
.hbook__cover { position: absolute; inset: 0; display: block; border-radius: 3px 8px 8px 3px; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .92), 0 8px 24px -8px rgba(0, 0, 0, .6); }
.hbook .cover { border-radius: 3px 8px 8px 3px; }
.hbook:focus-visible { outline-offset: 8px; }
.hero--books .hero__inner { max-width: 100%; }
@media (min-width: 768px) {
  .hero__books { right: clamp(32px, 14vw, 280px); top: 50%; width: auto; max-width: none; height: min(68vh, 660px); translate: 0 -46%; }
  .hero--books .hero__inner { max-width: min(640px, 50vw); }
}
@media (hover: hover) { .hbook:hover .cover__shine { transform: translateX(110%); } }

/* variante 2 : trois livres en eventail qui sortent du bas de l'ecran */
body[data-hero="2"] .hero__books { top: auto; bottom: 28vh; right: 2vw; width: 46vw; max-width: 250px; }
@media (min-width: 768px) {
  body[data-hero="2"] .hero__books { top: auto; bottom: -16vh; right: clamp(24px, 6vw, 110px); height: min(78vh, 720px); translate: none; }
}
body[data-hero="2"] .hero__scrim { background:
  radial-gradient(circle 55vmax at 78% 60%, rgba(8, 11, 16, 0) 0%, rgba(8, 11, 16, .5) 60%, rgba(8, 11, 16, .86) 100%),
  linear-gradient(0deg, rgba(8, 11, 16, .9) 0%, rgba(8, 11, 16, .35) 55%, rgba(8, 11, 16, .45) 100%); }
@media (min-width: 768px) { body[data-hero="2"] .hero__scrim { background:
  radial-gradient(circle 50vmax at 76% 60%, rgba(8, 11, 16, 0) 0%, rgba(8, 11, 16, .5) 60%, rgba(8, 11, 16, .86) 100%),
  linear-gradient(90deg, rgba(8, 11, 16, .86) 0%, rgba(8, 11, 16, .4) 45%, rgba(8, 11, 16, .1) 80%); } }