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

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Ateliers artisanaux et créations manuelles pour collectivités'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : 'Conception et animation d’ateliers artisanaux pour collectivités et écoles, autour de la couture, du cartonnage et de la création d’objets à partir de matériaux variés.'
  %}
  {% 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 manuels et créatifs
        </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 des idées de « bricolage » avec vos élèves, vos enfants, vos
          résidents, vous souhaitez réaliser des objets pour une occasion
          spécifique, mais ils sont trop nombreux, 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 conduite
          d’ateliers de créations manuelles plus spécifiquement en lien avec la
          couture et le cartonnage : enfants dans le milieu scolaire rural ou
          urbain, personnes âgées en structure d’accueil… Matériaux privilégiés
          : les matériaux souples tels que les tissus, fils, laines, cordes…les
          matériaux semi-rigides tels que les papiers, cartons…
        </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>Recherche et choix des objets à réaliser</li>
            <li>Définition du calendrier et des modalités d’intervention</li>
            <li>Mise en œuvre des réalisations</li>
            <li>
              Présentation de la fin des travaux, mise en valeur des objets
              réalisés
            </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">
            Allier exigence et bienveillance, développer des qualités de
            rigueur, de concentration et d’écoute, de partage.
          </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 motricité, sa rigueur, sa sensibilité, son
            goût, exploiter et faire référence à ses compétences en calcul et
            mesures, enrichir sa culture intellectuelle et artistique.
          </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/manual-project/COUT-coussin-champignon.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/manual-project/COUT-tigre-enzo.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/manual-project/COUT-yan-tigre.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/manual-project/TM-LAPINS-POMPOM.jpg"
                alt=""
                class="block size-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <div class="bg-white py-6 sm:py-10">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <dl
        class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
      >
        <div>
          <dt class="font-semibold text-gray-900">
            Gestion du groupe
          </dt>
          <dd class="mt-1 text-gray-600">
            rigueur, bienveillance, exigence, mettre en exergue pour chaque
            participant une de ses qualités
          </dd>
        </div>
        <div>
          <dt class="font-semibold text-gray-900">
            Economie et environnement
          </dt>
          <dd class="mt-1 text-gray-600">
            travailler pour partie avec des matériaux récupérés
          </dd>
        </div>
        <div>
          <dt class="font-semibold text-gray-900">
            Qualité
          </dt>
          <dd class="mt-1 text-gray-600">soin, esthétisme</dd>
        </div>
        <div>
          <dt class="font-semibold text-gray-900">
            Valorisation
          </dt>
          <dd class="mt-1 text-gray-600">
            donner à voir les travaux aboutis sous forme d’exposition publique,
            d’invitation de partenaires
          </dd>
        </div>
        <div>
          <dt class="font-semibold text-gray-900">
            Transmission
          </dt>
          <dd class="mt-1 text-gray-600">partage de savoir-faire</dd>
        </div>
      </dl>
    </div>
  </div>
{% endblock %}