{% extends 'base.html.twig' %}
{% block metadata %}
  {# ============================
   METADATA / SEO
   ============================ #}

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Parcours artistique et engagement culturel arts-ticule'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : 'Mon parcours professionnel et artistique à l’origine de projets culturels et pédagogiques destinés aux écoles, collectivités et structures d’accueil.'
  %}
  {% set meta_image = meta_image is defined
    ? meta_image
    : asset('images/logo.png')
  %}
  {% set meta_url = meta_url is defined
    ? meta_url
    : app.request.uri|replace({
      'http://': 'https://'
    })
  %}
  {% set meta_site_name = meta_site_name is defined
    ? meta_site_name
    : 'Nom du site'
  %}
  {% set meta_type = meta_type is defined ? meta_type : 'website' %}

  <title>
    {{ meta_title }}
  </title>

  <meta name="description" content="{{ meta_description }}" />
  <meta name="robots" content="index, follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="canonical" href="{{ meta_url }}" />

  {# ============================
   OPEN GRAPH (Facebook, LinkedIn…)
   ============================ #}

  <meta property="og:title" content="{{ meta_title }}" />
  <meta property="og:description" content="{{ meta_description }}" />
  <meta property="og:type" content="{{ meta_type }}" />
  <meta property="og:url" content="{{ meta_url }}" />
  <meta property="og:image" content="{{ meta_image }}" />
  <meta property="og:site_name" content="{{ meta_site_name }}" />
  <meta property="og:locale" content="fr_FR" />

  {# Optionnel mais recommandé #}
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  {# ============================
   TWITTER CARDS
   ============================ #}

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ meta_title }}" />
  <meta name="twitter:description" content="{{ meta_description }}" />
  <meta name="twitter:image" content="{{ meta_image }}" />
{% endblock %}
{% block body %}
  <main class="isolate">
    <!-- Hero section -->
    <div class="relative isolate -z-10">
      <svg
        aria-hidden="true"
        class="absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] stroke-gray-200"
      >
        <defs>
          <pattern
            id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
            width="200"
            height="200"
            x="50%"
            y="-1"
            patternUnits="userSpaceOnUse"
          >
            <path d="M.5 200V.5H200" fill="none" />
          </pattern>
        </defs>
        <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
          <path
            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
            stroke-width="0"
          />
        </svg>
        <rect
          width="100%"
          height="100%"
          fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
          stroke-width="0"
        />
      </svg>
      <div
        aria-hidden="true"
        class="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
      >
        <div
          style="clip-path: polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)"
          class="aspect-801/1036 w-200.25 bg-linear-to-tr from-[#ff80b5] to-[#F59E0B] opacity-30"
        ></div>
      </div>
      <div class="overflow-hidden">
        <div
          class="mx-auto max-w-7xl px-6 pt-36 pb-32 sm:pt-60 lg:px-8 lg:pt-32"
        >
          <div
            class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center"
          >
            <div class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
              <h1
                class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
              >
                Compétences artistiques techniques et relationnelles
              </h1>

              <p
                class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none"
              >
                Grâce à ma formation de professeur d’éducation manuelle et
                technique je maîtrise les bases dans différentes disciplines
                dont le cartonnage et la couture. Enseignante j’ai initié de
                nombreux projets artistiques et culturels et notamment avec des
                élèves les plus en difficulté. Coordinatrice de l’éducation
                artistique à la DSDEN de l’Ain j’ai travaillé en étroite
                collaboration avec des compagnies artistiques et des partenaires
                institutionnels.
              </p>

              <p
                class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none"
              >
                Etude du solfège et piano durant plus de 10 ans. Création du
                trio « Sans rendez-vous » : chansons françaises (C. Trenet, R.
                Barrier...) et mise en scène. Création d’un one woman show «
                j’ai trouvé ma voix, euhh ??!!! ma voie » : écriture des textes,
                jeu scénique, accompagnement à la création, Nathalie Stora et
                Sylvie Delom atelier du Réverbère, Ambérieu en Bugey.
                Participation à des formations clown (Christine Girod, Cie
                théâtre-Montroyal), formation au jeu scénique (Master class
                Sylvie Delom, Nathalie Stora), écriture de chansons (les
                Trapettistes). Initiation de jeunes enfants à la création
                artistique, « le chevalier de la Chalaronne ».
              </p>
            </div>
            <div
              class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0"
            >
              <div
                class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80"
              >
                <div class="relative">
                  <img
                    src="images/about/M-One-man-show.JPG"
                    alt=""
                    class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
                  />
                  <div
                    class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
                  ></div>
                </div>
              </div>
              <div
                class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36"
              >
                <div class="relative">
                  <img
                    src="images/about/mp-carton-invitation-4.jpg"
                    alt=""
                    class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
                  />
                  <div
                    class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
                  ></div>
                </div>
                <div class="relative">
                  <img
                    src="images/about/MP-chevalier-chalaronne.jpg"
                    alt=""
                    class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
                  />
                  <div
                    class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
                  ></div>
                </div>
              </div>
              <div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
                <div class="relative">
                  <img
                    src="images/about/sans-rendez-vous-concert-MJC-2004.jpg"
                    alt=""
                    class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
                  />
                  <div
                    class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
                  ></div>
                </div>
                <div class="relative">
                  <img
                    src="images/about/sans-rendez-vous-duo-recadré.jpg"
                    alt=""
                    class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
                  />
                  <div
                    class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock %}