---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Les Particules">
	<main>
		<h1>
		  <img alt="Logo" src="./logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle" />
		  Les particules
		</h1>
		<p class="instructions">
			La troupe d'improvisation théâtrale chatouilleuse, curieuse, créative et autogérée<br/>
			📌 Albi, Occitanie
		</p>
		<div class="instructions">
			Retrouvez-nous prochainement :
			<ul>
				<li>le 14 avril à partir de 18h30 à la <a target="_blank" href="https://canailletheque.org/">Canaillethèque</a> de Lescure d'Albigeois</li>

				<li>le 22 avril à Saint-Céré pour un match avec
					<a target="_blank" href="https://m.facebook.com/people/La-Cambriole-Impro/100057478066735/">
						La Cambriole
					</a>
				</li>
			</ul>
		</div>
		<ul role="list" class="link-card-grid">
			<Card
				href="./inscription-newsletter"
				title="Newsletter"
				body="Toutes nos évènements directement dans votre boite aux lettres !"
			/>
			<Card
				href="mailto:contact@les-particules.org"
				title="Contact"
				body="Écrivez-nous"
			/>
			<Card
			  href="https://www.facebook.com/LesParticules"
			  target="_blank"
				title="Facebook"
				body="Retrouvez nous sur Facebook"
			/>
			<Card
        href="https://www.instagram.com/les_particules/"
        target="_blank"
        title="Instagram"
        body="Retrouvez nous sur Instagram"
      />
		</ul>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1.5rem;
		max-width: 60ch;
	}
	h1 {
		font-size: 3rem;
		font-weight: 800;
		margin: 0;
	}
	.text-gradient {
		background-image: var(--accent-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400%;
		background-position: 0%;
	}
	.instructions {
		line-height: 1.6;
		margin: 1rem 0;
		border: 1px solid rgba(var(--accent), 25%);
		background-color: white;
		padding: 1rem;
		border-radius: 0.4rem;
	}
	.instructions code {
		font-size: 0.875em;
		font-weight: bold;
		background: rgba(var(--accent), 12%);
		color: rgb(var(--accent));
		border-radius: 4px;
		padding: 0.3em 0.45em;
	}
	.instructions strong {
		color: rgb(var(--accent));
	}
	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 1rem;
		padding: 0;
	}
</style>