<template>
  <div class="content-wrapper">
    <ContentRenderer :value="doc" />
  
  </div>
  <video controls width="640">
      <source src="/videos/video.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
</template>

<script setup>
// Charger le fichier Markdown
const { data: doc } = await useAsyncData('markdownDoc', () =>
  queryContent('markdown').findOne()
)
</script>
<style scoped>
.content-wrapper {
  column-count: 2;  /* Divise le contenu en 2 colonnes */
  column-gap: 20px; /* Espacement entre les colonnes */
}

/* Ajuster les titres pour occuper toute la largeur */
.content-wrapper h1, 
.content-wrapper h2 {
  break-inside: avoid; /* Évite les coupures de titres entre colonnes */
  width: 100%;         /* Étend les titres sur toute la largeur */
  margin-top: 10px;
}

/* Ajuste les paragraphes pour éviter les coupures */
.content-wrapper p {
  break-inside: avoid; /* Évite les coupures dans les paragraphes */
  margin: 0 0 10px 0;  /* Ajoute un espacement entre les paragraphes */
}
</style>