/* Fond vidéo derrière la phrase de conclusion de la fiche Tapis magique.
   Vignettage sombre, pas de voile crème. La vidéo ne bouge que dans ce bloc. */

.tm-bande {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #141312;
  color: var(--r-on-dark);
  width: min(100%, 72rem);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}

.tm-bande__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.tm-bande__fond video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.78) saturate(1.08);
}

.tm-bande__voile {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70%, rgba(20, 19, 18, .15) 0%, rgba(20, 19, 18, .55) 75%, rgba(20, 19, 18, .8) 100%);
}

.tm-bande__texte {
  position: relative;
  z-index: 1;
  max-width: 48ch;
  margin: 0 auto;
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-variation-settings: var(--rf-settings);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--r-on-dark);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .tm-bande__fond video { display: none; }
}

/* Bande plein cadre sous la fiche : la vidéo de la chambre joue une fois. */
.tm-film {
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}

.tm-film__stage {
  position: relative;
  min-height: clamp(20rem, 44vw, 36rem);
  overflow: hidden;
  isolation: isolate;
  background: #141312;
  display: flex;
  align-items: flex-end;
}

.tm-film__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.tm-film__fond video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(1.05);
}

.tm-film__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 19, 18, .45) 0%, rgba(20, 19, 18, 0) 50%);
}

.tm-film__texte {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 4vw, 3rem);
  padding-bottom: clamp(1.8rem, 4.5vw, 3.2rem);
}

/* Carte de papier lilas, décalée d'un aplat mint : l'esprit des tampons de la marque. */
.tm-film__carte {
  max-width: 26ch;
  padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.4rem);
  background: var(--lavis-1);
  box-shadow: .5rem .5rem 0 var(--arc-2);
}

.tm-film__griffe {
  margin: 0 0 .35rem;
  font-family: 'Reenie Beanie', cursive;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--encre-1);
}

.tm-film__accroche {
  margin: 0;
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-variation-settings: var(--rf-settings);
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1.18;
  color: var(--r-ink);
  text-shadow: none;
}

/* Le stabilo : un trait jaune de la charte sous « sans plastique ». */
.tm-film__stabilo {
  background: linear-gradient(transparent 52%, rgba(255, 198, 21, .72) 52%, rgba(255, 198, 21, .72) 92%, transparent 92%);
  padding: 0 .08em;
}

@media (prefers-reduced-motion: reduce) {
  .tm-film__fond video { display: none; }
}

/* Bande de conclusion : vidéo plus claire, texte sur une carte de papier avec
   le même aplat menthe que la carte du haut de la fiche. */
.tm-bande {
  background: var(--lavis-1);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem);
}
.tm-bande__voile {
  background: linear-gradient(90deg, rgba(252, 251, 250, .25) 0%, rgba(252, 251, 250, 0) 60%);
}
.tm-bande__texte {
  max-width: 60ch;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3.2vw, 2.6rem);
  background: var(--r-bg);
  color: var(--r-ink);
  text-shadow: none;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  box-shadow: .5rem .5rem 0 var(--arc-2);
  text-align: left;
}

/* Pictogrammes de la fiche : même style que le site (trait encre douce,
   aplat teinté à 9 % de la couleur du trait), en plus grand. */
.r-socle__points .icon {
  width: 56px;
  height: 56px;
  color: var(--r-ink-soft);
}
.r-socle__points li {
  font-size: .95rem;
  color: var(--r-ink);
  font-weight: 500;
}