/* La page des romans : ce qui lui est propre. Le reste est dans site.css.
   Accent : le rouge. Les titres sont en Didone, pour que la page reste littéraire
   dans le même décor sombre que les deux autres. Le point rouge après chaque titre
   est la signature de la maison. */

.romans { --accent: var(--rouge); --accent-fond: #cf3f2e; --sur-accent: #fff; }
.romans .point { color: var(--accent); }

.romans h2 {
  font-family: var(--didone); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.005em;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}

/* ── Ouverture ────────────────────────────────────────────────────────────── */
.romans .hero h1 {
  font-family: var(--didone); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.1; letter-spacing: -.01em; text-transform: none;
}
.romans .hero h1 span { display: block; }
.romans .hero h1 .hero-italique { font-style: italic; }
.romans .hero h1 { text-shadow: 0 .04em .35em rgba(0, 0, 0, .55); }
.romans .hero-image { object-position: 50% 55%; }
/* l'image est claire : un voile plus léger en haut qu'ailleurs sur le site */
.romans .hero-scene::after {
  background:
    linear-gradient(180deg, rgba(15, 17, 21, .62) 0%, rgba(15, 17, 21, .24) 22%, rgba(15, 17, 21, 0) 40%),
    linear-gradient(0deg, #0f1115 0%, rgba(15, 17, 21, 0) 30%);
}

/* ── Les romans ───────────────────────────────────────────────────────────── */
.roman { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); overflow: hidden; }
.roman + .roman { margin-top: clamp(1.2rem, 2.6vw, 2rem); }
.roman-visuel {
  display: grid; place-items: center;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  background: radial-gradient(120% 90% at 50% 35%, #2d333e 0%, #181c24 60%, #12151b 100%);
}
.roman-visuel img { width: auto; max-height: 25rem; border-radius: .15rem; box-shadow: 0 2rem 3.2rem -1.2rem rgba(0, 0, 0, .9), 0 .2rem .6rem rgba(0, 0, 0, .5); }
.roman-texte { padding: clamp(1.5rem, 3.6vw, 2.8rem); }
.roman-texte > p:not(.etat):not(.actions) { max-width: 36rem; color: var(--doux); }
.roman h3 {
  margin: 1.1rem 0 .8rem;
  font-family: var(--didone); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.12; text-wrap: balance;
}
.eloge { max-width: 34rem; margin: 1.5rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.eloge blockquote { margin: 0; }
.eloge blockquote p { margin: 0; font-family: var(--didone); font-optical-sizing: auto; font-style: italic; font-size: 1.16em; line-height: 1.42; color: var(--texte); }
.eloge figcaption { margin-top: .6rem; font-size: .9rem; color: var(--discret); }
.avis { margin-bottom: 0; }
.etoiles { margin-right: .35rem; color: var(--accent); letter-spacing: .18em; }

/* ── Les anthologies, alignées par le pied ────────────────────────────────── */
.rayon {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.2rem clamp(.9rem, 2vw, 1.6rem);
  margin: clamp(1.8rem, 3.6vw, 2.6rem) 0 0; padding: 0; list-style: none;
}
.rayon li { display: grid; grid-template-rows: 1fr auto; grid-row: span 2; }
@supports (grid-template-rows: subgrid) { .rayon li { grid-template-rows: subgrid; row-gap: 0; } }
.dos { align-self: end; }
.dos img { width: 100%; border-radius: .2rem; box-shadow: 0 0 0 1px var(--trait), 0 1.2rem 2rem -1rem rgba(0, 0, 0, .9); }
.cartel { margin: 0; padding-top: .85rem; font-size: .86rem; line-height: 1.38; color: var(--discret); }
.cartel-titre { display: block; margin-bottom: .15rem; font-weight: 700; color: var(--texte); }

/* ── Le film ──────────────────────────────────────────────────────────────── */
.film { position: relative; isolation: isolate; display: block; overflow: hidden; color: var(--texte); text-decoration: none; transition: border-color .25s; }
.film:hover, .film:focus-visible { border-color: var(--accent); }
.film-image { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 60% 40%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.film:hover .film-image { transform: scale(1.03); }
.film::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 17, 21, .95) 0%, rgba(15, 17, 21, .78) 30%, rgba(15, 17, 21, .1) 62%, rgba(15, 17, 21, 0) 100%);
}
.film-texte { position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 29rem; padding: clamp(1.4rem, 3.2vw, 2.6rem); }
.film h3 { margin: .95rem 0 .5rem; font-family: var(--didone); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.12; }
.film-texte p:not(.etat) { margin: 0 0 1.25rem; color: var(--doux); }
.film-lecture {
  position: absolute; z-index: 2; left: 68%; top: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(15, 17, 21, .7); border: 1.5px solid rgba(243, 239, 230, .8);
  transition: background-color .2s, border-color .2s;
}
.film-lecture::after { content: ""; margin-left: .3rem; border-left: 1.3rem solid #f3efe6; border-top: .82rem solid transparent; border-bottom: .82rem solid transparent; }
.film:hover .film-lecture { background: var(--accent-fond); border-color: var(--accent-fond); }

/* ── Biographie ───────────────────────────────────────────────────────────── */
.bio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4.5vw, 3.5rem); padding: clamp(1.5rem, 3.6vw, 2.8rem); }
.bio-portrait { width: clamp(7rem, 14vw, 11rem); border-radius: 50%; clip-path: circle(49.2%); }
.bio-texte { max-width: 38rem; color: var(--doux); }
.bio-texte p:last-child { margin-bottom: 0; }

/* ── Écrans étroits ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rayon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .romans .hero h1 { font-size: clamp(1.55rem, 7vw, 2.6rem); }
  .romans .hero-image { object-position: 72% 55%; }
  .romans .hero-scene::after { background: linear-gradient(0deg, #0f1115 0%, rgba(15, 17, 21, 0) 30%); }
  .roman { grid-template-columns: minmax(0, 1fr); }
  .roman-visuel img { max-height: 19rem; }
  .film-image { aspect-ratio: 16 / 10; }
  .film::before { display: none; }
  .film-texte { position: static; max-width: none; }
  .film-lecture { left: 50%; top: 0; margin-top: calc(31.25% - 2.5rem); }
  .bio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .rayon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}