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

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Partenariat projets artistiques : Ain'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : "Partenariat pour des projets artistiques et culturels à l'école, en 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 %}
  {% 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"
        >
          Partenariat artistique et technique dans le cadre d’un projet de
          classe, projet d’école, projet de structure avec des élèves, des
          enfants, des résidents
        </h1>
        <p class="mt-6 text-xl/8 text-balance text-gray-700">
          Pour 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. Développer l’intelligence
          sensible de chaque jeune, 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>
      <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"
          >
            Adaptabilité, sur mesure et originalité du projet
          </h2>
          <ul class="mt-5 text-base/7 text-gray-600">
            <li>
              Adaptabilité : à vos équipements et espaces, votre thème, votre
              temps, votre public
            </li>
            <li>Sur mesure : projet unique et personnalisé</li>
            <li>
              Originalité et créativité : accessoires et scénographie créés avec
              les participants
            </li>
          </ul>

          <h2
            class="mt-8 text-2xl font-semibold tracking-tight text-pretty text-gray-900"
          >
            Etude et déroulé du planning
          </h2>
          <ul class="mt-5 text-base/7 text-gray-600">
            <li>
              Définition du cahier des charges dans le cadre d’une pédagogie de
              projet interdisciplinaire
            </li>
            <li>Définition du calendrier et des modalités d’intervention</li>
            <li>Co-écriture de textes avec les acteurs du projet</li>
            <li>
              Recherche et co-construction d’éléments de décors et accessoires
            </li>
            <li>Mise en jeu dans un espace dédié</li>
          </ul>
        </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/decoupe-tissu.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/MARIO-5-DOIGT.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>
{% endblock %}