/* ============================================================
   PAGE MASSAGES — écran de choix (pavés illustrés)
   Chargé par home/templates/home/massages_hub_page.html.
   Reprend la grammaire d'obsidian.css : photo assombrie au même
   filtre que .lm-page-hero__bg, texte crème, trait doré qui s'allonge.
   obsidian.css n'est pas modifié.
   ============================================================ */

.lm-choix {
  padding: 3.5rem 4rem 7rem;
  background: var(--bg);
}

.lm-choix__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.lm-choix__intro {
  font-size: .82rem;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 1.4rem;
}

/* auto-fit : deux pavés occupent chacun la moitié, et si Charlotte en ajoute
   un troisième la ligne se redivise au lieu de laisser un pavé orphelin. */
.lm-choix__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.6rem;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Le pavé ───────────────────────────────────────────────── */

.lm-choix-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 30rem;
  padding: 3.2rem 3rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}

.lm-choix-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lm-choix-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.58) saturate(.82);
  transform: scale(1.01);
  transition: transform 1.4s cubic-bezier(.22,.7,.28,1), filter .6s;
}

html[data-theme="light"] .lm-choix-card__bg img {
  filter: brightness(.62) saturate(.78);
}

.lm-choix-card:hover .lm-choix-card__bg img {
  transform: scale(1.07);
  filter: brightness(.66) saturate(.9);
}

html[data-theme="light"] .lm-choix-card:hover .lm-choix-card__bg img {
  filter: brightness(.7) saturate(.86);
}

/* Voile bas → haut : garde le texte lisible quelle que soit la photo */
.lm-choix-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,.88) 0%, rgba(10,9,8,.72) 32%, rgba(10,9,8,.34) 62%, rgba(10,9,8,.06) 100%);
}

/* En thème clair la photo reste plus lumineuse : le voile doit donc être plus
   dense sous le texte, sinon le mot en italique doré perd son contraste. Le
   haut du pavé, lui, garde sa lumière pour ne pas trouer la page claire. */
html[data-theme="light"] .lm-choix-card__bg::after {
  background: linear-gradient(to top, rgba(10,9,8,.94) 0%, rgba(10,9,8,.84) 38%, rgba(10,9,8,.42) 66%, rgba(10,9,8,.06) 100%);
}

/* Liseré doré révélé au survol */
.lm-choix-card__frame {
  position: absolute;
  inset: 1.1rem;
  z-index: 1;
  border: 1px solid rgba(201,169,110,.32);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}

.lm-choix-card:hover .lm-choix-card__frame {
  opacity: 1;
  transform: scale(1);
}

.lm-choix-card__body {
  position: relative;
  z-index: 2;
  max-width: 30rem;
}

.lm-choix-card__line {
  width: 42px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.8rem;
  transition: width .4s;
}

.lm-choix-card:hover .lm-choix-card__line {
  width: 65px;
}

.lm-choix-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 2.8vw, 2.9rem);
  font-weight: 300;
  line-height: 1.1;
  color: #f7f2e8;
  margin-bottom: .9rem;
  /* Charlotte changera les photos : l'ombre garantit la lisibilité du titre
     même si l'image posée derrière est claire. */
  text-shadow: 0 1px 28px rgba(10, 9, 8, .6);
}

.lm-choix-card__name em {
  font-style: italic;
  color: var(--gold-p);
}

.lm-choix-card__desc {
  font-size: .82rem;
  line-height: 1.9;
  color: rgba(247,242,232,.72);
  margin-bottom: 2rem;
  text-shadow: 0 1px 18px rgba(10, 9, 8, .55);
}

.lm-choix-card__tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,169,110,.38);
  padding: .55rem 1.2rem;
  transition: background .3s, border-color .3s, gap .3s;
}

.lm-choix-card:hover .lm-choix-card__tag {
  background: rgba(201,169,110,.12);
  border-color: var(--gold);
  gap: 1.1rem;
}

.lm-choix-card__tag svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .lm-choix { padding: 4.5rem 1.5rem 5.5rem; }
  .lm-choix__grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .lm-choix-card { min-height: 24rem; padding: 2.4rem 2rem; }
  .lm-choix-card__frame { inset: .75rem; }
  .lm-choix-card__bg::after {
    background: linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.82) 42%, rgba(10,9,8,.5) 72%, rgba(10,9,8,.12) 100%);
  }
}