/*
 * La grille de tuiles des activités.
 *
 * Trois colonnes, y compris sur mobile : arbitrage explicite de Nicolas
 * contre la recommandation habituelle de deux colonnes sur petit écran,
 * jugé acceptable ici parce que chaque tuile est un bouton unique et
 * simple (SITE.md). Ne pas le remettre en cause.
 */

.aspacam-activities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--aspacam-theme-space-md) var(--aspacam-theme-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La structure de la tuile (bordure fine, coins arrondis, aucune couleur de
 * fond distincte de la page — décision explicite de Nicolas, esthétique
 * plate, CLAUDE.md) et la réserve de hauteur du libellé sont communes à
 * toutes les grilles de tuiles du site : voir assets/css/tiles.css
 * (.aspacam-tile, .aspacam-tile__name), étape 3bis. Rien à écrire ici pour
 * cette part.
 */

/*
 * 50 pixels (--aspacam-theme-tile-visual-size, variables.css), partagée
 * avec l'icône des tuiles de réservation pour que les deux grilles restent
 * à la même hauteur (étape 3bis, sujet 2). Doublée depuis la valeur
 * précédente (26px, jugée trop petite pour qu'une vraie photo reste autre
 * chose qu'une tache de couleur) au sujet 2, étape 2 finale.
 */
.aspacam-activities__photo {
	display: block;
	width: var(--aspacam-theme-tile-visual-size);
	height: var(--aspacam-theme-tile-visual-size);
	border-radius: 50%;
	object-fit: cover;
}

/*
 * Aucune photo n'est définie : un espace neutre s'affiche. L'absence de
 * photo ne doit jamais empêcher de publier une activité, ni casser la
 * grille (SITE.md).
 */
.aspacam-activities__photo--placeholder {
	background-color: var(--aspacam-theme-color-border);
}

/*
 * Image mise en avant, en bande large sous le titre de la page d'une
 * activité (page-templates/activite.php) — la même photo que la tuile de
 * l'accueil, sujet 3, étape 2 finale. Un ratio large plutôt que celui,
 * carré, de la pastille : c'est une bande, pas un avatar. "object-fit:
 * cover" recadre plutôt que déformer une photo dont le ratio d'origine ne
 * correspond pas.
 */
.aspacam-activity-photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: var(--aspacam-theme-space-lg);
}

/*
 * Contact du responsable, sur la page d'une activité. N'apparaît que si
 * au moins un des trois champs est renseigné (page-templates/activite.php).
 */
.aspacam-activity-contact {
	margin-top: var(--aspacam-theme-space-lg);
	padding-top: var(--aspacam-theme-space-md);
	border-top: 1px solid var(--aspacam-theme-color-border);
}

.aspacam-activity-contact__title {
	font-size: var(--aspacam-theme-font-size-h2);
}

.aspacam-activity-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
}