<template>
  <div class="scolaire--page">
      <!-- ================== -->
      <!-- FILS D'ARIANE -->
      <!-- ================== -->
      <PageSection tone="" content-size="default" class="breadcrum_wp">
        <Breadcrumb/>
      </PageSection>

      <!-- ================== -->
      <!-- EN-TêTE -->
      <!-- ================== -->
      <section class="fiche_header_wp">
        <div class="fiche_header_wp_gauche"></div>

        <div class="fiche_header_inner">
          <div class="fiche_header_titres">
            <div>
              <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
                ACTIONS CULTURELLES POUR LES SCOLAIRES
              </DsHeading>
            </div>
      
            <DsText as="p" align="justify">
                Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. 
            </DsText>
          </div>
          <div class="fiche_header_img">
            <DsMedia
              v-if="missions?.image_illustration_header?.url"
              :src="missions.image_illustration_header.url"
              :alt="missions.image_illustration_header.alternativeText || ''"
              fit="cover"
              ratio="square"
            />

            <div v-else class="img_placeholder" aria-hidden="true" />
          </div>
          
        </div>
        <div class="fiche_header_wp_droite"></div>

      </section>

      <!-- ================== -->
      <!-- CHIFFRES -->
      <!-- ================== -->
      <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
          <Chiffres />
      </PageSection>

      <!-- ================== -->
      <!-- decalage_gauche 1 -->
      <!-- ================== -->
      <PageSection :content="false">
        <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache" ensavoirplus-group="scolaires-details">
            <template #title>
                Lycées - Tous à l'Orchestre !
            </template>
            <DsText as="p" tone="invert" align="justify">
                Découvrir l’univers de l’orchestre, entrer dans la peau d’un professionnel du spectacle, organisez avec vos élèves un concert au sein de votre établissement, sont autant d'apprentissage que l'Orchestre amènent auprès des jeunes lycéens en devenir.
            </DsText>
          </Decalage>
      </PageSection>

      <PageSection id="texte_cache" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
        <SectionContent class="description_wp">
          <div class="strapi-blocks">
            <!-- Paragraph -->
            <!-- Heading -->
            <h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
            <!-- Paragraph --><!-- Heading -->
            <h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
          </div>
        </SectionContent>
      </PageSection>

      <!-- ================== -->
      <!-- decalage_droite_2 -->
      <!-- ================== -->
      <PageSection :content="false">
        <Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache_2" ensavoirplus-group="scolaires-details">
            <template #title>
                Collège
            </template>
            <DsText as="p" align="justify">
              Développer une écoute active, acquérir le vocabulaire spécifique, mettre en perspective la musique qu’ils écoutent et la musique symphonique sont des objectifs des sessions organisées pour les collégiens.
            </DsText>
          </Decalage>
      </PageSection>

      <PageSection id="texte_cache_2" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
        <SectionContent class="description_wp">
          <div class="strapi-blocks">
            <!-- Paragraph -->
            <!-- Heading -->
            <h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
            <!-- Paragraph --><!-- Heading -->
            <h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
            <!-- Paragraph -->
            <p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
          </div>
        </SectionContent>
      </PageSection>
  </div>
</template>

<script setup>
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
</script>

<style lang="scss">
  // =======================
  // SPÉCIFIQUE À CETTE PAGE
  // =======================
  .scolaire--page {
    .chiffres_wp {
      background-color: var(--c-background-jaune);
      margin-bottom: 50px;
    }
  }


</style>
