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

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Projets artistiques participatifs pour écoles et collectivités'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : 'Accompagnement et co-construction de projets artistiques pour écoles, collectivités et structures d’accueil : création, scénographie et mise en jeu adaptées à chaque public.'
  %}
  {% 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 %}
  <div class="overflow-hidden bg-white py-12 sm:py-16">
    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
      <div class="max-w-4xl">
        <p class="text-base/7 font-semibold text-amber-600">
          Projets artistiques
        </p>
        <h1
          class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
        >
          Co-construction et Accompagnement
        </h1>
        <p class="mt-6 text-xl/8 text-balance text-gray-700">
          Vous avez un projet de classe, un projet d’école, un thème défini ou
          non, des idées d’un scénario avec vos élèves, vos enfants, vos
          résidents pour une occasion spécifique, vous visualisez
          approximativement la fin du projet mais ils sont trop nombreux,
          novices, pas toujours très autonomes et vous avez peu de temps, peu de
          place, peu de moyens, vous ne savez pas comment vous y prendre… Je
          suis là pour vous aider ! Proposition d’accompagnement à la création
          et la mise en jeu de projets artistiques à destination des enfants
          dans le milieu scolaire rural ou urbain, des personnes âgées en
          structure d’accueil…
        </p>
      </div>
      <section
        class="mt-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16"
      >
        <div class="lg:pr-8">
          <h2
            class="mt-8 text-2xl font-semibold tracking-tight text-pretty text-gray-900"
          >
            Le déroulé
          </h2>
          <ul class="mt-5 text-base/7 text-gray-600">
            <li>Définition du cahier des charges</li>
            <li>Définition du calendrier et des modalités d’intervention</li>
            <li>
              Co-écriture de textes avec les acteurs du projet Recherche et
              co-construction d’éléments de décors et accessoires
            </li>
            <li>
              Mise en jeu dans un espace dédié Présentation de la fin des
              travaux ou d’un spectacle en fin de parcours
            </li>
          </ul>

          <h2
            class="mt-8 text-2xl font-semibold tracking-tight text-pretty text-gray-900"
          >
            Objectifs
          </h2>
          <p class="mt-5 text-base/7 text-gray-600">
            Faire émerger et valoriser les compétences de chaque participant,
            allier exigence et bienveillance, développer des qualités de
            rigueur, de partage, d’écoute et de concentration.
          </p>
          <h2
            class="mt-8 text-2xl font-semibold tracking-tight text-pretty text-gray-900"
          >
            Construction de soi
          </h2>
          <p class="mt-5 text-base/7 text-gray-600">
            Développer sa propre sensibilité, son imaginaire, sa créativité,
            enrichir sa culture artistique et intellectuelle, faire naître ou
            conforter l’estime de soi, la confiance en soi.
          </p>
        </div>
        <div class="pt-16 lg:row-span-2 lg:-mr-16 xl:mr-auto">
          <div
            class="-mx-8 grid grid-cols-2 gap-4 sm:-mx-16 sm:grid-cols-4 lg:mx-0 lg:grid-cols-2 xl:gap-8"
          >
            <div
              class="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10"
            >
              <img
                src="/images/project/TM-création-décor-baleine.jpg"
                alt=""
                class="block size-full object-cover"
              />
            </div>
            <div
              class="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40"
            >
              <img
                src="/images/project/TM-pieuvre.JPG"
                alt=""
                class="block size-full object-cover"
              />
            </div>
            <div
              class="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10"
            >
              <img
                src="/images/project/TM-hector-papier-maché.jpg"
                alt=""
                class="block size-full object-cover"
              />
            </div>
            <div
              class="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40"
            >
              <img
                src="/images/project/TM-création-décor-baleine.jpg"
                alt=""
                class="block size-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <div class="bg-white py-6 sm:py-8">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
        <dl
          class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3"
        >
          <div class="flex flex-col">
            <dt class="text-base/7 font-semibold text-gray-900">
              <div
                class="mb-6 flex size-10 items-center justify-center rounded-lg bg-amber-600"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-6 text-white"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
                  />
                </svg>
              </div>Adaptabilité
            </dt>
            <dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
              <p class="flex-auto">
                à votre budget, votre localisation, votre thème.
              </p>
            </dd>
          </div>
          <div class="flex flex-col">
            <dt class="text-base/7 font-semibold text-gray-900">
              <div
                class="mb-6 flex size-10 items-center justify-center rounded-lg bg-amber-600"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-6 text-white"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m7.848 8.25 1.536.887M7.848 8.25a3 3 0 1 1-5.196-3 3 3 0 0 1 5.196 3Zm1.536.887a2.165 2.165 0 0 1 1.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 1 1-5.196 3 3 3 0 0 1 5.196-3Zm1.536-.887a2.165 2.165 0 0 0 1.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863 2.077-1.199m0-3.328a4.323 4.323 0 0 1 2.068-1.379l5.325-1.628a4.5 4.5 0 0 1 2.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.33 4.33 0 0 0 10.607 12m3.736 0 7.794 4.5-.802.215a4.5 4.5 0 0 1-2.48-.043l-5.326-1.629a4.324 4.324 0 0 1-2.068-1.379M14.343 12l-2.882 1.664"
                  />
                </svg>
              </div>Sur mesure
            </dt>
            <dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
              <p class="flex-auto">
                projet unique et personnalisé.
              </p>
            </dd>
          </div>
          <div class="flex flex-col">
            <dt class="text-base/7 font-semibold text-gray-900">
              <div
                class="mb-6 flex size-10 items-center justify-center rounded-lg bg-amber-600"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-6 text-white"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
                  />
                </svg>
              </div>Originalité et créativité
            </dt>
            <dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
              <p class="flex-auto">
                accessoires et scénographie créés avec les participants .
              </p>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
{% endblock %}