/* La page Le Mot Fin : ce qui lui est propre. Le reste est dans site.css.
   Accent : le crème de la marque (le rouge est déjà celui des romans). Le point rouge
   de la marque Le Mot Fin signe les titres, comme sur la chaîne et sur les livres.
   Pas d'image réaliste générée sur cette page : la couverture du livre est composée. */

.lemotfin { --accent: #f2ebdf; --accent-fond: #f2ebdf; --sur-accent: #16120f; --marque-lmf: #d04a3c; }
.lemotfin .point { color: var(--marque-lmf); }

.lemotfin 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 : le nom, l'accroche, la couverture à côté ─────────────────── */
.lmf-ouverture {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: center; gap: clamp(2rem, 6vw, 5rem);
  padding-top: clamp(3rem, 8vw, 6rem);
}
.lmf-ouverture h1 {
  margin: 0;
  font-family: var(--didone); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(3rem, 8vw, 6.2rem); line-height: 1; letter-spacing: -.015em;
}
.lmf-accroche {
  margin: .9rem 0 1.6rem;
  font-family: var(--didone); font-optical-sizing: auto; font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.25; color: var(--texte);
}
.lmf-chapeau { max-width: 38rem; font-size: 1.08em; color: #e6e1d5; }
.lmf-couverture img {
  width: 100%; max-width: 20rem; margin-inline: auto; border-radius: .15rem;
  box-shadow: 0 2rem 3.2rem -1.2rem rgba(0, 0, 0, .9), 0 .2rem .6rem rgba(0, 0, 0, .5);
}

/* ── La vidéo : une carte sans image, un bouton de lecture ────────────────── */
.lmf-video {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.2rem, 3.6vw, 2.6rem);
  padding: clamp(1.5rem, 3.6vw, 2.8rem);
  color: var(--texte); text-decoration: none; transition: border-color .25s;
}
.lmf-video:hover, .lmf-video:focus-visible { border-color: var(--accent); }
.lmf-lecture {
  display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  border: 1.5px solid var(--accent); transition: background-color .2s;
}
.lmf-lecture::after { content: ""; margin-left: .3rem; border-left: 1.2rem solid var(--accent); border-top: .75rem solid transparent; border-bottom: .75rem solid transparent; }
.lmf-video:hover .lmf-lecture { background: var(--accent); }
.lmf-video:hover .lmf-lecture::after { border-left-color: var(--sur-accent); }
.lmf-video h3, .lmf-offre h3 {
  margin: .95rem 0 .55rem;
  font-family: var(--didone); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.12; text-wrap: balance;
}
.lmf-video p:not(.etat) { max-width: 38rem; margin: 0; color: var(--doux); }
.lmf-suite { margin-top: 1.2rem; }

/* ── Le livre et l'avis ───────────────────────────────────────────────────── */
.lmf-offre { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); overflow: hidden; }
.lmf-offre + .lmf-offre { margin-top: clamp(1.2rem, 2.6vw, 2rem); }
.lmf-offre--seule { grid-template-columns: minmax(0, 1fr); }
.lmf-visuel {
  display: grid; place-items: center;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: radial-gradient(120% 90% at 50% 35%, #2d333e 0%, #181c24 60%, #12151b 100%);
}
.lmf-visuel img { width: auto; max-height: 22rem; border-radius: .15rem; box-shadow: 0 2rem 3.2rem -1.2rem rgba(0, 0, 0, .9), 0 .2rem .6rem rgba(0, 0, 0, .5); }
.lmf-texte { padding: clamp(1.5rem, 3.6vw, 2.8rem); }
.lmf-texte > p:not(.etat):not(.actions) { max-width: 38rem; color: var(--doux); }

/* ── Écrans étroits ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lmf-ouverture { grid-template-columns: minmax(0, 1fr); }
  .lmf-couverture img { max-width: 13rem; margin-inline: 0; }
  .lmf-video { grid-template-columns: minmax(0, 1fr); }
  .lmf-offre { grid-template-columns: minmax(0, 1fr); }
  .lmf-visuel img { max-height: 18rem; }
}