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

    <!-- ================== -->
    <!-- TITRE -->
    <!-- ================== -->
    <section class="fiche_header_titre_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">
              Nos partenaires
            </DsHeading>
          </div>
          <DsText as="p" align="justify">
              L’Orchestre national d’Île-de-France est subventionné et missionné par le Conseil régional d’Île-de-France et la Direction régionale des Affaires Culturelles d’Île-de-France qu’il remercie pour leur soutien.
          </DsText>
        </div>
      </div>
      <div class="fiche_header_wp_droite"></div>
    </section>
    
    <!-- ================== -->
    <!-- AFFICHAGE DES CARDS MECENES -->
      <!-- ================== -->
    <PageSection padded_size="" class="theme_ppt_cards_wp">
      <SectionContent
        class="theme_ppt"
        :style="themePptCardsBgStyle"
      >
      <RoundedCardList >
        <RoundedCard
          v-for="card in cards_subvention"
          :key="card.id"
          :id="card.id"
          :imgSrc="card.imgSrc"
          :imgAlt="card.imgAlt"
          :title="card.title"
          :description="card.description"
          :url="card.url"
          ratio="square"
        ></RoundedCard>
      </RoundedCardList>
      </SectionContent>
    </PageSection>

    <!-- ================== -->
    <!-- TITRE -->
    <!-- ================== -->
    <section class="fiche_header_titre_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">
              MERCI À NOS PARTENAIRES INSTITUTIONNELS ET ASSOCIATIONS
            </DsHeading>
          </div>
    
          <DsText as="p" align="justify">
              
          </DsText>
        </div>
        
      </div>
      <div class="fiche_header_wp_droite"></div>
    </section>

    <!-- ================== -->
    <!-- AFFICHAGE DES CARDS INSTITUTIONNELS ET ASSOCIATIONS -->
      <!-- ================== -->
    <PageSection padded_size="" class="theme_ppt_cards_wp">
      <SectionContent
        class="theme_ppt"
        :style="themePptCardsBgStyle"
      >
      <RoundedCardList >
        <RoundedCard
          v-for="card in cards_inst_ass"
          :key="card.id"
          :id="card.id"
          :imgSrc="card.imgSrc"
          :imgAlt="card.imgAlt"
          :title="card.title"
          :description="card.description"
          :url="card.url"
          ratio="5-4"
        ></RoundedCard>
      </RoundedCardList>
      </SectionContent>
    </PageSection>

    <!-- ================== -->
    <!-- TITRE -->
    <!-- ================== -->
    <section class="fiche_header_titre_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">
              MERCI À NOS PARTENAIRES PRIVÉS
            </DsHeading>
          </div>
    
          <DsText as="p" align="justify">
              
          </DsText>
        </div>
        
      </div>
      <div class="fiche_header_wp_droite"></div>
    </section>

    <!-- ================== -->
    <!-- AFFICHAGE DES CARDS PARTENAIRES PRIVÉS -->
      <!-- ================== -->
    <PageSection padded_size="" class="theme_ppt_cards_wp">
      <SectionContent
        class="theme_ppt"
        :style="themePptCardsBgStyle"
      >
      <RoundedCardList >
        <RoundedCard
          v-for="card in cards_prives"
          :key="card.id"
          :id="card.id"
          :imgSrc="card.imgSrc"
          :imgAlt="card.imgAlt"
          :title="card.title"
          :description="card.description"
          :url="card.url"
          ratio="5-4"
        ></RoundedCard>
      </RoundedCardList>
      </SectionContent>
    </PageSection>

    <!-- ================== -->
    <!-- TITRE -->
    <!-- ================== -->
    <section class="fiche_header_titre_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">
              MERCI A NOS PARTENAIRES DE L’ENSEIGNEMENT SUPERIEUR
            </DsHeading>
          </div>
          <DsText as="p" align="justify">
          </DsText>
        </div>
      </div>
      <div class="fiche_header_wp_droite"></div>
    </section>

    <!-- ================== -->
    <!-- AFFICHAGE DES CARDS PARTENAIRES PRIVÉS -->
      <!-- ================== -->
    <PageSection padded_size="" class="theme_ppt_cards_wp">
      <SectionContent
        class="theme_ppt"
        :style="themePptCardsBgStyle"
      >
      <RoundedCardList >
        <RoundedCard
          v-for="card in cards_ensei_sup"
          :key="card.id"
          :id="card.id"
          :imgSrc="card.imgSrc"
          :imgAlt="card.imgAlt"
          :title="card.title"
          :description="card.description"
          :url="card.url"
          ratio="5-4"
        ></RoundedCard>
      </RoundedCardList>
      </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'
  import { computed } from 'vue'


  //--------------------------------------------------------------------------
  // DONNÉES POUR LES CARTES SUBVENTIONS
  //--------------------------------------------------------------------------

  const cards_subvention = ref([
    {
      id: '1',
      imgSrc: '/contenus/region_idf.webp',
      imgAlt: 'logo',
      title: "",
      description: ``,
      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
    },
    {
      id: '2',
      imgSrc: '/contenus/prefet_idf.webp',
      imgAlt: 'logo',
      title: "",
      description: ``,
      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
    },
  ])



  //--------------------------------------------------------------------------
  // DONNÉES POUR LES CARTES INSTITUTIONNELS ET ASSOCIATIONS
  //--------------------------------------------------------------------------

  const cards_inst_ass = ref([
    {
      id: '1',
      imgSrc: '/contenus/musique_contemporaine.webp',
      imgAlt: 'logo',
      title: "Maison de la Musique Contemporaine",
      description: ``,
      url:"https://musiquecontemporaine.org/",
    },
    {
      id: '2',
      imgSrc: '/contenus/copie_privee.webp',
      imgAlt: 'logo',
      title: "La copie privée",
      description: ``,
      url:"https://www.copieprivee.org/",
    },
    {
      id: '3',
      imgSrc: '/contenus/commision_film_idf.webp',
      imgAlt: 'logo',
      title: "Commission du film Île-de-France",
      description: ``,
      url:"https://www.filmparisregion.com/fr",
    },
    {
      id: '4',
      imgSrc: '/contenus/ircam.webp',
      imgAlt: 'logo',
      title: "Ircam",
      description: ``,
      url:"https://www.ircam.fr/",
    },
  ])


  //--------------------------------------------------------------------------
  // DONNÉES POUR LES CARTES INSTITUTIONNELS ET ASSOCIATIONS
  //--------------------------------------------------------------------------

  const cards_prives = ref([
    {
      id: '1',
      imgSrc: '/contenus/ca_idf.png',
      imgAlt: 'logo',
      title: "Crédit Agricole d’Île de France",
      description: ``,
      url:"https://www.credit-agricole.fr/",
    },
    {
      id: '2',
      imgSrc: '/contenus/ag2r.jpeg',
      imgAlt: 'logo',
      title: "Fondation d’entreprise AG2R La Mondiale pour la vitalité artistique",
      description: ``,
      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
    },
    {
      id: '3',
      imgSrc: '/contenus/bp.png',
      imgAlt: 'logo',
      title: "Banque populaire Rives de Paris",
      description: ``,
      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
    },
    {
      id: '4',
      imgSrc: '/contenus/caisse_depot.png',
      imgAlt: 'logo',
      title: "Caisse des dépôts",
      description: ``,
      url:"https://www.caissedesdepots.fr/mecenat",
    },
    {
      id: '5',
      imgSrc: '/contenus/adp.png',
      imgAlt: 'logo',
      title: "Fondation Groupe ADP",
      description: ``,
      url:"https://www.parisaeroport.fr/groupe/rse/fondation",
    },
    {
      id: '6',
      imgSrc: '/contenus/norma.jpeg',
      imgAlt: 'logo',
      title: "Cabinet Norma Avocats",
      description: ``,
      url:"https://www.norma-avocats.com/",
    },
  ])

  //--------------------------------------------------------------------------
  // DONNÉES POUR LES CARTES ENSEIGNEMENT SUPERIEUR
  //--------------------------------------------------------------------------

  const cards_ensei_sup = ref([
    {
      id: '1',
      imgSrc: '/contenus/daac.jpg',
      imgAlt: 'logo',
      title: "Délégation Académique aux Arts et à la Culture des académies Créteil (DAAC)",
      description: ``,
      url:"https://daac.ac-creteil.fr/",
    },
    {
      id: '2',
      imgSrc: '/contenus/academie_versailles.png',
      imgAlt: 'logo',
      title: "Académie de Versailles (DAAC)",
      description: ``,
      url:"https://www.ac-versailles.fr/l-education-artistique-et-culturelle-121623",
    },
    {
      id: '3',
      imgSrc: '/contenus/academie_paris.png',
      imgAlt: 'logo',
      title: "Académie de Paris (DAAC)",
      description: ``,
      url:"https://www.ac-paris.fr/education-artistique-et-culturelle-122839",
    },
    {
      id: '4',
      imgSrc: '/contenus/pole_sup_93.png',
      imgAlt: 'logo',
      title: "Pôle Sup’93",
      description: ``,
      url:"https://polesup93.fr/",
    },

  ])

</script>

<style lang="scss">
  // =======================
  // SPÉCIFIQUE À CETTE PAGE
  // =======================
  .partenaires--page {
    .chiffres_wp {
      background-color: var(--c-background-vert);
      margin-bottom: 50px;
    }
    .fiche_description {
      display: flex;
      justify-content: center;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      > * {
        max-width: 640px;
        display: flex;
        flex-direction: column;
      }
    }
    .contact_spe_wp {
      background-color: var(--c-background-jaune-clair);
      margin-top: 50px;
      margin-bottom: 40px;
    }
    .theme_ppt_cards_wp {
      

      padding-top: 30px;
      padding-bottom: 80px;
      img {
        object-fit: contain;
      }
    }
    .rounded-card__content {
      margin-top: 3px !important;
    }
    .ds-heading--md2 {
      font-size: 18px;
    }
  }

  /* ============================ */
  /* GALERIES */
  /* ============================ */



</style>
