/*
 * Page « /points-de-vente/ » — styles PROPRES à la page (chargés uniquement sur elle).
 * Mobile-first, jetons --cmb-* de la feuille globale (palette, typographie, espacements, rayons).
 * Aucune image, aucun script, aucune carte : une liste de cartes lisible à toutes les largeurs.
 *
 * 0.2.0 (passe de finition visuelle) : cartes blanc chaud plus aérées, filet cuivre en tête de carte (seul
 * détail décoratif), hiérarchie commune → nom → adresse → liens, bouton Itinéraire compact à flèche sortante,
 * bloc Retrait en bande lin pleine largeur reprenant le bandeau des avantages de l'accueil.
 * Le cuivre clair (#b66a3c) ne sert qu'aux traits et icônes ; tout texte cuivre est en cuivre foncé (#94512b).
 *
 * Sommaire : 1. Intro · 2. Liste · 3. Cartes partenaires · 4. Liste à venir ·
 * 5. Retrait à la fabrique
 */

/* 1. Intro ---------------------------------------------------------------------------------- */

.cmb-pdv-intro {
	padding-block: var(--cmb-space-xl) var(--cmb-space-xl);
}

.cmb-pdv-intro__title {
	max-width: 20ch;
	margin-bottom: var(--cmb-space-s);
	font-size: var(--cmb-text-4xl);
	line-height: var(--cmb-leading-tight);
	letter-spacing: -0.01em;
}

.cmb-pdv-intro__lead {
	max-width: 38rem;
	margin: 0;
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-lg);
	line-height: var(--cmb-leading-normal);
	text-wrap: balance;
}

/* Filet cuivré fin sous l'intro (même repère que l'accueil). */
.cmb-pdv-intro::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin-top: var(--cmb-space-l);
	background: var(--cmb-color-accent);
}

/* 2. Liste ---------------------------------------------------------------------------------- */

.cmb-pdv-list {
	padding-bottom: var(--cmb-space-2xl);
}

.cmb-pdv-list__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cmb-space-2xs) var(--cmb-space-m);
	margin-bottom: var(--cmb-space-l);
	padding-bottom: var(--cmb-space-s);
	border-bottom: 1px solid var(--cmb-color-border);
}

.cmb-pdv-list__title {
	margin: 0;
	font-size: var(--cmb-text-2xl);
}

.cmb-pdv-list__count {
	margin: 0;
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
	font-variant-numeric: tabular-nums;
}

/* Note de bas de liste : simple remarque, signalée par le filet cuivre vertical. */
.cmb-pdv-list__note {
	max-width: 40rem;
	margin: var(--cmb-space-xl) 0 0;
	padding-left: var(--cmb-space-s);
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
	line-height: var(--cmb-leading-normal);
	border-left: 1px solid var(--cmb-color-accent);
}

/* 3. Cartes partenaires --------------------------------------------------------------------- */

/* 1 colonne, 2 dès 48em, 3 dès 64em ; cartes d'une même ligne à la même hauteur. */
.cmb-pdv-grid {
	display: grid;
	gap: var(--cmb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.cmb-pdv-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cmb-space-m);
	}
}

@media (min-width: 64em) {
	.cmb-pdv-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cmb-pdv-card {
	display: flex;
	min-width: 0;
}

/* Blanc chaud sur l'ivoire de la page, contour beige, ombre d'un pixel (comme les blocs de l'accueil). */
.cmb-pdv-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--cmb-space-l) var(--cmb-space-m) var(--cmb-space-m);
	background: var(--cmb-color-surface);
	border: 1px solid var(--cmb-color-border);
	border-radius: var(--cmb-radius-m);
	box-shadow: var(--cmb-shadow-xs);
	overflow-wrap: break-word;
}

/* Le détail de la page : un filet cuivre court posé sur le bord supérieur de chaque carte. */
.cmb-pdv-card__inner::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--cmb-space-m);
	width: 2.5rem;
	height: 2px;
	background: var(--cmb-color-accent);
	border-radius: 0 0 1px 1px;
}

/* Arrivée par un lien partagé (#pdv-…) : la carte visée est discrètement soulignée. */
.cmb-pdv-card:target .cmb-pdv-card__inner {
	border-color: var(--cmb-color-accent);
	box-shadow: 0 0 0 1px var(--cmb-color-accent);
}

/* Commune : petit surtitre cuivre foncé, précédé du pictogramme de lieu (trait 1,5 px). */
.cmb-pdv-card__city {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0 0 var(--cmb-space-2xs);
	color: var(--cmb-color-accent-strong);
	font-size: var(--cmb-text-xs);
	font-weight: var(--cmb-weight-semibold);
	letter-spacing: var(--cmb-tracking-wider);
	line-height: var(--cmb-leading-snug);
	text-transform: uppercase;
}

.cmb-pdv-card__city span {
	min-width: 0;
}

.cmb-pdv-card__city .cmb-icon {
	flex: none;
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--cmb-color-accent);
}

/* Nom : l'élément principal de la carte. */
.cmb-pdv-card__name {
	margin: 0 0 var(--cmb-space-s);
	font-size: var(--cmb-text-xl);
	line-height: var(--cmb-leading-tight);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.cmb-pdv-card__desc {
	margin-bottom: var(--cmb-space-s);
	color: var(--cmb-color-text-muted);
	line-height: var(--cmb-leading-snug);
}

/* Adresse : secondaire, pleinement lisible (texte principal, interligne aéré). */
.cmb-pdv-card__address {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--cmb-space-m);
	color: var(--cmb-color-text);
	font-size: var(--cmb-text-base);
	font-style: normal;
	line-height: var(--cmb-leading-snug);
}

/* Téléphone, site, réseaux : tertiaires (petit corps, soulignement beige), zones de 44 px, sous un filet léger. */
.cmb-pdv-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--cmb-space-m);
	margin: 0 0 var(--cmb-space-m);
	padding: var(--cmb-space-3xs) 0 0;
	list-style: none;
	border-top: 1px solid var(--cmb-color-border);
}

.cmb-pdv-card__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--cmb-tap-target);
	color: var(--cmb-color-text);
	font-size: var(--cmb-text-sm);
	text-decoration-color: var(--cmb-color-border-strong);
	text-underline-offset: 0.2em;
	font-variant-numeric: tabular-nums;
}

.cmb-pdv-card__links a:hover {
	color: var(--cmb-color-accent-strong);
	text-decoration-color: currentColor;
}

.cmb-pdv-card__inner > :last-child {
	margin-bottom: 0;
}

/* Itinéraire : bouton secondaire du site, en version compacte (44 px de haut), flèche sortante
   (le lien ouvre un service d'itinéraire externe). En bas de carte (boutons alignés sur une ligne),
   pleine largeur sur petit écran. */
.cmb-pdv-card__directions {
	gap: var(--cmb-space-2xs);
	width: 100%;
	min-height: var(--cmb-tap-target);
	margin-top: auto;
	padding: 0.5rem 1.125rem;
	font-size: var(--cmb-text-sm);
}

.cmb-pdv-card__directions .cmb-icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--cmb-color-accent-strong);
}

.cmb-pdv-card__directions:hover .cmb-icon {
	color: var(--cmb-color-text);
}

@media (min-width: 30em) {
	.cmb-pdv-card__directions {
		align-self: flex-start;
		width: auto;
	}
}

@media (min-width: 48em) {
	.cmb-pdv-card__inner {
		padding: var(--cmb-space-l);
	}

	.cmb-pdv-card__inner::before {
		left: var(--cmb-space-l);
	}
}

/* 4. Liste à venir (aucun partenaire publiable) --------------------------------------------- */

.cmb-pdv-empty {
	display: flex;
	align-items: flex-start;
	gap: var(--cmb-space-s);
	max-width: var(--cmb-container-narrow);
	padding: var(--cmb-space-m);
	background: var(--cmb-color-surface);
	border: 1px solid var(--cmb-color-border);
	border-radius: var(--cmb-radius-m);
}

.cmb-pdv-empty .cmb-icon {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--cmb-color-accent);
}

.cmb-pdv-empty__body {
	min-width: 0;
}

.cmb-pdv-empty__title {
	margin-bottom: var(--cmb-space-2xs);
	font-family: var(--cmb-font-heading);
	font-size: var(--cmb-text-xl);
	line-height: var(--cmb-leading-tight);
}

.cmb-pdv-empty__text {
	margin: 0;
	color: var(--cmb-color-text-muted);
}

.cmb-pdv-empty__text a {
	color: var(--cmb-color-text);
}

@media (min-width: 48em) {
	.cmb-pdv-empty {
		padding: var(--cmb-space-l);
	}
}

/* 5. Retrait à la fabrique ------------------------------------------------------------------ */

/* Bande lin pleine largeur (comme les sections lin de l'accueil) : ce n'est pas un point de vente,
   seulement le lieu de retrait des commandes en ligne. */
.cmb-pdv-pickup {
	padding-block: var(--cmb-space-2xl);
	background: var(--cmb-color-surface-alt);
	border-top: 1px solid var(--cmb-color-border);
}

.cmb-pdv-pickup__inner {
	display: grid;
	gap: var(--cmb-space-m);
}

.cmb-pdv-pickup__title {
	max-width: 16ch;
	margin: 0;
	font-size: var(--cmb-text-2xl);
	line-height: var(--cmb-leading-tight);
}

.cmb-pdv-pickup__header::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin-top: var(--cmb-space-m);
	background: var(--cmb-color-accent);
}

.cmb-pdv-pickup__text {
	max-width: 36rem;
	margin-bottom: var(--cmb-space-l);
	line-height: var(--cmb-leading-normal);
}

/* Les trois avantages : même composition que le bandeau de l'accueil (icône cuivre au trait, titre
   appuyé, précision en gris), sur une surface blanc chaud. */
.cmb-pdv-pickup__points {
	display: grid;
	margin: 0 0 var(--cmb-space-l);
	padding: 0;
	list-style: none;
	background: var(--cmb-color-surface);
	border: 1px solid var(--cmb-color-border);
	border-radius: var(--cmb-radius-m);
}

.cmb-pdv-pickup__point {
	display: flex;
	align-items: center;
	gap: var(--cmb-space-s);
	padding: var(--cmb-space-s) var(--cmb-space-m);
	line-height: var(--cmb-leading-snug);
}

.cmb-pdv-pickup__point + .cmb-pdv-pickup__point {
	border-top: 1px solid var(--cmb-color-border);
}

.cmb-pdv-pickup__point .cmb-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--cmb-color-accent);
}

.cmb-pdv-pickup__point-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cmb-pdv-pickup__point-title {
	font-weight: var(--cmb-weight-semibold);
}

.cmb-pdv-pickup__point-detail {
	color: var(--cmb-color-text-muted);
	font-size: var(--cmb-text-sm);
}

.cmb-pdv-pickup__body > :last-child {
	margin-bottom: 0;
}

.cmb-pdv-pickup__cta {
	width: 100%;
}

@media (min-width: 30em) {
	.cmb-pdv-pickup__cta {
		width: auto;
	}
}

/* Dès 900 px : titre à gauche, explication et avantages à droite. */
@media (min-width: 56.25em) {
	.cmb-pdv-pickup__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--cmb-space-2xl);
	}
}