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

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'À propos – Parcours artistique et engagement culturel'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : 'Découvrez le 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.jpg')
  %}
  {% set meta_url = meta_url is defined ? meta_url : app.request.uri %}
  {% 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"
              >
                A titre professionnel
              </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"
              >
                Après une carrière au sein de l’Education Nationale, je souhaite
                poursuivre mon activité et mettre au service de chacun mes
                expériences acquises. 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
                approché le fonctionnement des compagnies artistiques et
                rencontré des partenaires institutionnels.
              </p>
              <h2
                class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl mt-5"
              >
                A titre personnel
              </h2>
              <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"
              >
                J’ai étudié solfège et piano durant plusieurs années. Avec deux
                amies nous avons créé le Trio « Sans rendez-vous », chants et
                mise en scène J’ai créé un One woman show : j’ai perdu ma voie :
                écriture des textes, jeu scénique, accompagnement à la création,
                Sylvie Delom atelier du Réverbère Passionnée par les arts
                vivants, j’ai participé à plusieurs formations autour du clown
                (Christine Girod), du jeu scénique (Sylvie Delom, Nathalie
                Stora), l’écriture de chansons (les Trapettistes)
              </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"
              >
                Très manuelle, je cherche à donner vie et exploiter les
                matériaux qui sont à ma disposition et à moindre coût.
                Initiation à la création artistique avec de jeunes enfants « 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/mp-photo-affiche.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/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/mp-photo-affiche.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/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/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 %}
