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

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Ateliers couture Lyon : créations manuelles et artistiques'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : "Ateliers couture et créations manuelles pour projets de classes, de 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.getSchemeAndHttpHost() ~ app.request.getRequestUri()
  %}
  {% 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"
        >
          Ateliers couture et créations manuelles dans le cadre de projet de
          classe, projet d’école ou évènement spécifique, avec des élèves, des
          enfants, des résidents
        </h1>
        <p class="mt-6 text-xl/8 text-balance text-gray-700">
          Pratiquer une activité manuelle et artistique pour développer sa
          propre motricité, des qualités de rigueur, de concentration et
          d’écoute, de partage. Exploiter et faire référence à ses compétences
          en enseignement général notamment en mathématiques (calcul et mesures,
          géométrie) et éducation civique (éco-responsabilité, protection de
          l’environnement). Enrichir son parcours artistique et culturel par la
          connaissance de pratiques artisanales, développer son esprit critique,
          sa sensibilité, ses goûts. S'initier à un savoir-faire et transmettre.
        </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é, éco-responsabilité, valorisation
          </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>
              Economie et environnement : travailler pour partie avec des
              matériaux récupérés ; 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…
            </li>
            <li>Qualité : soin, esthétisme</li>
            <li>
              Valorisation : donner à voir les travaux aboutis sous forme
              d’exposition publique, d’invitation de partenaires, de mise en
              ligne
            </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 et choix des objets à réaliser</li>
            <li>
              Définition de l’organisation, 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>
        </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/MARQUE-PAGE-3.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/TM-sac-fillette.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-COUPE-FLEURS-DECO-NOEL.jpg"
                alt=""
                class="block size-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
{% endblock %}