<template>
  <AnchoredSection id="financing">
    <LayoutContainer class="alt-theme py-6 my-6">
      <v-row class="center-90">
        <LayoutUISubTitle class="ml-4">
          Financement des formations
        </LayoutUISubTitle>
      </v-row>

      <v-container>
        <v-row class="align-center center-90">
          <v-col cols="12" md="6">
            <v-img
              src="/images/pages/formations/opca/Formations_eligibles_aux_OPCA.jpg"
              alt="Hommes discutant devant des ordinateurs"
              class="opca-img"
              cover
            />
          </v-col>

          <v-col cols="12" md="6" class="col-details">
            <v-row>
              <h3 class="mt-6 mb-6 mr-6">
                Des formations éligibles par votre OPCA
              </h3>
            </v-row>

            <v-row>
              <div class="details-opca mr-6">
                <p class="mb-4">
                  Les formations dispensées par Opentalent entrent dans le cadre
                  de la formation professionnelle continue et peuvent être pris
                  en charge par votre OPCA (Uniformation, AFDAS, ...).
                </p>

                <p class="mb-4">
                  Si votre formation est prise en charge par un organisme
                  accrédité, des documents pourront vous être demandés
                  (convention de formation...). Nous pouvons vous fournir tous
                  les éléments nécessaires mais les démarches restent de votre
                  responsabilité.
                </p>

                <p>
                  Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne
                  vaut pas l’agrément de l’état.
                </p>
              </div>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
</script>

<style scoped lang="scss">
.opca-img {
  width: 80%;
  border-radius: 10%;
  margin: 16px 20% 16px 0;
}

h3 {
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: var(--on-primary-color);
  margin-top: 0.6rem;
}

.col-details {
  max-width: 550px;
}

.details-opca {
  font-size: 16px;
  line-height: 20px;
  color: var(--on-primary-color);
  width: 100%;
  margin: auto;
}

@media (max-width: 1240px) {
  .v-img {
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
