/*
 * Drache d'Avril — Boutiques partenaires (bloc drache/boutiques).
 * Réf design : Figma node 14361:3103 (« Où retrouver nos créations ? »).
 *
 * Trois cartes de largeur égale : photo encadrée de blanc, nom, ville, deux
 * liens sortants. Puis les deux boutons, qui viennent de core/buttons.
 *
 * Le fond rosé (token rouge-07) et le quadrillage restent portés par le
 * core/group qui contient le bloc, comme pour toutes les autres sections.
 */

.boutiques {
	--bq-frame: 20px; /* épaisseur du cadre blanc, cf. maquette */
	--bq-gap: var(--wp--preset--spacing--3-xl, 2.5rem);

	position: relative;
}

.boutiques__content {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--8-xl, 10rem) var(--wp--preset--spacing--11-xl, 20rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bq-gap);
}

/* -------------------------------------------------------------------------
   Titre et épingle
   ---------------------------------------------------------------------- */

/*
 * Dans Figma l'épingle est posée en absolu à 13,67 % de la ligne de titre. Ici
 * elle est un élément de la ligne, à gauche du texte : le rendu est le même à la
 * largeur de la maquette, et l'épingle reste collée au titre si son libellé
 * change, ce que la position absolue ne ferait pas.
 */
.boutiques__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
}

.boutiques__pin {
	display: block;
	flex-shrink: 0;
	width: 6.5rem;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	rotate: -20.95deg;
	/* L'épingle est légèrement plus haute que le centre du titre dans la maquette. */
	margin-block-start: -0.75rem;
}

.boutiques__pin > svg {
	display: block;
	width: 100%;
	height: auto;
}


.boutiques__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--3-xl, 2.5rem);
	line-height: var(--wp--custom--typography--headings--h3--line-height, 1.2);
	letter-spacing: var(--wp--custom--typography--headings--h3--letter-spacing, -2px);
	color: var(--wp--preset--color--violet-bolder, #28076e);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Les trois cartes
   ---------------------------------------------------------------------- */

.boutiques__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bq-gap);
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La grille est en repeat(3, 1fr) et non en auto-fit : avec une ou deux boutiques
 * seulement, les cartes doivent garder leur largeur de colonne et rester
 * centrées, pas s'étirer sur toute la section.
 */
.boutiques__list:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--bq-gap)) / 3)));
	justify-content: center;
}

.boutiques__list:has(> :only-child) {
	grid-template-columns: minmax(0, calc((100% - 2 * var(--bq-gap)) / 3));
	justify-content: center;
}

.boutique-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

/*
 * Le cadre blanc, l'effet polaroïd. Ratio 4:3 relevé sur la maquette.
 *
 * La photo est posée en ABSOLU dans le cadre, et non en height: 100%. Sinon la
 * hauteur de l'image dépend de celle du cadre, qui dépend elle-même de son
 * contenu : le calcul boucle, l'image reprend sa hauteur naturelle et étire le
 * cadre. Une devanture en portrait cassait la rangée à elle seule.
 */
.boutique-card__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1360 / 1020;
	border: var(--bq-frame) solid var(--wp--preset--color--blanc, #fff);
	background: var(--wp--preset--color--blanc, #fff);
}

.boutique-card__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.boutique-card__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
}

.boutique-card__name {
	font-size: var(--wp--preset--font-size--2-xl, 2rem);
	line-height: var(--wp--custom--typography--headings--h4--line-height, 1.25);
	letter-spacing: var(--wp--custom--typography--headings--h4--letter-spacing, -2px);
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/*
 * La maquette porte ici un token « text/heading-brand » (#7f4dff) qui est une
 * scorie du Figma, pas un token du design system : c'est theme.json qui fait foi,
 * donc le violet de marque. Même arbitrage que pour le prix du carrousel.
 */
.boutique-card__city {
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: var(--wp--custom--typography--headings--h5--line-height, 1.3333);
	letter-spacing: var(--wp--custom--typography--headings--h5--letter-spacing, -2px);
	color: var(--wp--preset--color--violet, #7631ff);
}

/* -------------------------------------------------------------------------
   Les deux liens
   ---------------------------------------------------------------------- */

.boutique-card__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
}

.boutique-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.5;
	color: var(--wp--preset--color--noir, #1f2937);
	text-decoration: none;
}

.boutique-card__link > svg {
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
}

.boutique-card__link:hover,
.boutique-card__link:focus-visible {
	color: var(--wp--preset--color--violet, #7631ff);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* -------------------------------------------------------------------------
   Boutons
   ---------------------------------------------------------------------- */

/* Les deux CTA viennent de core/buttons : button.css fait tout le travail. */
.boutiques__content .wp-block-buttons {
	margin: 0;
	gap: var(--wp--preset--spacing--xl, 1.5rem);
}

/*
 * Repère d'éditeur : les cartes sont rendues côté serveur, le canvas n'a donc
 * rien à montrer entre le titre et les boutons.
 *
 * Masqué par défaut et révélé sous [data-type="drache/…"], que seul Gutenberg
 * pose sur le conteneur du bloc. C'est le hook fiable, contrairement à une
 * classe de body : l'éditeur rend le bloc dans une iframe dont le body ne porte
 * pas les classes de l'admin.
 */
.boutiques__editor-note {
	display: none;
	margin: 0;
	font-style: italic;
	opacity: 0.6;
}

[data-type="drache/boutiques"] .boutiques__editor-note {
	display: block;
}

/*
 * Gouttière tant que la largeur maximale ne la fournit pas elle-même.
 *
 * Le contenu est plafonné à 1280 et centré : au-delà, les marges automatiques
 * l'écartent des bords. En dessous elles tombent à zéro et il ne reste rien —
 * sur toute la plage tablette le contenu touchait le bord de l'écran.
 * 1328 = 1280 + les deux fois 24 qu'on veut voir.
 */
@media (max-width: 1328px) {
	.boutiques__content {
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	}
}

/* -------------------------------------------------------------------------
   Empilage
   ---------------------------------------------------------------------- */

/*
 * Mobile : la carte devient HORIZONTALE.
 * Relevé sur la frame Figma 14650:6077 (393 px), seconde proposition d'Hubert.
 *
 * Photo à gauche en 160 × 120 avec un cadre blanc de 4 px, texte à droite, et
 * les deux liens réduits à leurs seules icônes. La section passe d'environ
 * 1100 px à 664, sans slider et sans rien retirer du contenu.
 */
@media (max-width: 781px) {
	.boutiques {
		--bq-frame: 4px;
		--bq-gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	/*
	 * Le bas est plus généreux que le haut, comme en bureau.
	 *
	 * Ce n'est pas de la coquetterie : le footer remonte par-dessus cette
	 * section (margin-top négatif de la hauteur du nuage) et le badge Instagram
	 * dépasse encore de 48 px au-dessus de son bord. Avec 40 px en bas, les deux
	 * boutons passaient DERRIÈRE le badge. 80 px laissent 32 px d'air.
	 *
	 * La réserve de la hauteur du nuage, elle, ne compte pas : .site-main >
	 * :last-child la pose en padding et la marge négative du footer la reprend
	 * exactement. Elle sert à ce que le trou du drache révèle le fond et le
	 * quadrillage de la section, pas à écarter le contenu.
	 */
	.boutiques__content {
		padding-block: var(--wp--preset--spacing--3-xl, 2.5rem) var(--wp--preset--spacing--8-xl, 10rem);
		gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	.boutiques__list,
	.boutiques__list:has(> :nth-child(2):last-child),
	.boutiques__list:has(> :only-child) {
		grid-template-columns: 1fr;
		justify-content: stretch;
		max-width: 26rem;
		margin-inline: auto;
	}

	/*
	 * Photo à gauche, nom / ville / icônes à droite, le tout CENTRÉ VERTICALEMENT
	 * l'un par rapport à l'autre.
	 *
	 * La carte reste une colonne, centrée sur sa hauteur, et se réserve la place
	 * de la photo par un retrait à gauche. La photo, elle, est posée en absolu
	 * dans ce retrait et centrée sur la hauteur de la carte.
	 *
	 * Une grille à deux rangées ne marchait pas : la photo, plus haute que le
	 * texte, s'étend sur les deux rangées et leur distribue sa hauteur en trop.
	 * Le texte se retrouvait alors ferré en haut de sa rangée agrandie, quel que
	 * soit l'alignement demandé.
	 *
	 * min-height garantit que la carte ne soit jamais plus basse que la photo,
	 * qui ne compte plus dans son calcul de hauteur puisqu'elle est hors flux.
	 */
	.boutique-card {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 0.625rem;
		min-height: 120px;
		padding-inline-start: 176px;
	}

	.boutique-card__frame {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 50%;
		translate: 0 -50%;
		width: 160px;
		aspect-ratio: 4 / 3;
	}

	.boutique-card__text {
		align-items: flex-start;
		gap: 0.25rem;
		text-align: left;
	}

	.boutique-card__name {
		font-size: 1.125rem;
		line-height: 1.3333;
		letter-spacing: 0;
	}

	.boutique-card__city {
		font-size: var(--wp--preset--font-size--md, 1rem);
		line-height: 1.5;
		letter-spacing: 0;
	}

	/*
	 * Les libellés disparaissent, il ne reste que les icônes, côte à côte.
	 * Le nom accessible de chaque lien est déjà porté par son aria-label, il
	 * n'est donc pas perdu pour un lecteur d'écran.
	 */
	.boutique-card__links {
		flex-direction: row;
		align-items: center;
		/* Les marges négatives des liens se cumulent entre deux voisins et
		   annulent l'écart : il faut le redemander explicitement. */
		gap: 0.5rem;
	}

	.boutique-card__link > span {
		display: none;
	}

	/*
	 * Une icône de 24 px est une cible trop petite pour un doigt : le padding
	 * porte la zone touchable à 32 px sans changer la taille du dessin.
	 *
	 * La marge négative de même valeur annule l'effet de ce padding sur la mise
	 * en page. Sans elle, la boîte des liens est plus haute et plus large que
	 * les dessins qu'elle contient : les icônes s'éloignaient de la ville et la
	 * première ne tombait plus sur la verticale du nom. La zone touchable reste
	 * grande, elle ne pousse simplement plus rien.
	 */
	.boutique-card__link {
		padding: 0.25rem;
		margin: -0.25rem;
	}

	/* Les deux CTA passent l'un sous l'autre, centrés. */
	.boutiques__content .wp-block-buttons {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.boutiques__content .wp-block-button .wp-block-button__link {
		padding-inline: 0.8em;
	}

	/*
	 * Titre ferré à GAUCHE, sur la même verticale que les cartes en dessous.
	 * L'épingle et le titre forment une ligne : les deux se calent à gauche,
	 * sinon le bloc resterait centré et seules ses lignes seraient alignées,
	 * ce qui se lit comme une erreur plutôt que comme un choix.
	 */
	.boutiques__head {
		justify-content: flex-start;
	}

	.boutiques__pin {
		width: 3rem;
	}

	.boutiques__title {
		text-align: left;
		font-size: var(--wp--preset--font-size--xl, 1.5rem);
	}
}