/**
 * Le choix du point de retrait, au moment de la commande.
 *
 * La carte est fournie par Mondial Relay et vient avec son propre habillage.
 * On n'y touche pas : ce fichier ne met en forme que ce qui l'entoure, pour
 * que le bloc ait l'air d'appartenir au site et non d'y avoir été collé.
 */

/* --- Le bloc, sous la section Expédition ----------------------------- */

/* Il occupe une ligne entière du récapitulatif. La cellule ne porte aucune
   décoration : c'est le bloc qui a la sienne, et une bordure de tableau
   viendrait s'ajouter à la sienne. */
.ksp-relais-ligne > td {
	padding: 0;
	border: 0;
	background: none;
}

/* Le récapitulatif aligne ses montants à droite ; le bloc, lui, se lit. */
.ksp-relais {
	display: block;
	width: 100%;
	margin: 8px 0 10px;
	padding: 13px 15px 15px;
	background: #FBF9F5;
	border: 1px solid #E6E1D9;
	border-radius: 11px;
	text-align: left;
	box-sizing: border-box;
}

.ksp-relais__titre {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #1A1B25;
}

/* Le mode d'essai se voit, sans affoler : il disparaîtra le jour où
   l'atelier aura son propre identifiant d'enseigne. */
.ksp-relais__essai {
	margin: 0 0 12px;
	padding: 8px 11px;
	border-left: 3px solid #E0A458;
	background: rgba(224, 164, 88, .12);
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	line-height: 1.55;
	color: #8A5726;
}

.ksp-relais__bouton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: #16697A;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s;
}

.ksp-relais__bouton:hover,
.ksp-relais__bouton:focus { background: #125866; color: #FFFFFF; }
.ksp-relais__bouton:focus-visible { outline: 2px solid #16697A; outline-offset: 3px; }

/* Ce que le client vient de choisir, rappelé sous le bouton : sans cela il
   faut rouvrir la carte pour vérifier avant de payer. */
.ksp-relais__retenu {
	margin: 12px 0 0;
	padding: 10px 13px;
	border-left: 3px solid #2F9E6B;
	background: rgba(47, 158, 107, .1);
	border-radius: 0 9px 9px 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #1F6B48;
}

.ksp-relais__etiquette {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4E8F72;
}

.ksp-relais__retenu strong { display: block; color: #17563A; font-size: 14px; line-height: 1.35; }
.ksp-relais__adresse { display: block; margin-top: 3px; color: #3F7A5C; font-size: 12.5px; line-height: 1.45; }

/* Le temps que le composant de Mondial Relay arrive. */
.ksp-relais__attente {
	margin: 0;
	padding: 60px 24px;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.6;
	color: #8A8F9E;
}

.ksp-relais__attente.est-en-panne { color: #A8412F; font-weight: 600; }

/* Le bloc réclame l'attention quand on a tenté de valider sans point. */
.ksp-relais.est-requis {
	border-color: #A8412F;
	background: rgba(168, 65, 47, .06);
}

.ksp-relais__manque {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-left: 3px solid #A8412F;
	background: rgba(168, 65, 47, .1);
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	line-height: 1.5;
	color: #A8412F;
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.ksp-relais.est-requis { animation: ksp-relais-appel .45s ease-out; }
	@keyframes ksp-relais-appel {
		0%, 100% { transform: none; }
		25%      { transform: translateX(-5px); }
		75%      { transform: translateX(5px); }
	}
}

/* --- Le fond, figé pendant que la carte est ouverte ------------------- */

/* Sans cela la molette continue d'agir sur la commande : on referme la
   fenêtre et l'on se retrouve ailleurs dans la page sans comprendre
   pourquoi. La marge compense la barre de défilement qui disparaît, sinon
   toute la mise en page sursaute d'une quinzaine de pixels. */
.ksp-relais-fige,
.ksp-relais-fige body {
	overflow: hidden;
}

.ksp-relais-fige body {
	padding-right: var(--ksp-relais-jeu, 0px);
}

/* --- La fenêtre de la carte ------------------------------------------- */

.ksp-relais-modale {
	width: min(920px, 94vw);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #FFFFFF;
	color: #4A4D5E;
	box-shadow: 0 24px 60px rgba(26, 27, 37, .28);
	overflow: hidden;
}

/*
 * Le rangement en colonne ne vaut QUE fenêtre ouverte.
 *
 * Un « dialog » fermé vaut « display: none », posé par le navigateur
 * lui-même. Une règle de classe sans condition — « display: flex » — bat
 * cette valeur : la fenêtre restait alors affichée en permanence, en flux
 * normal, tout en bas de la page, sous le pied de page. D'où la condition
 * « [open] », qui ne doit jamais sauter.
 */
.ksp-relais-modale[open] {
	display: flex;
	flex-direction: column;
}

.ksp-relais-modale::backdrop {
	background: rgba(26, 27, 37, .55);
	backdrop-filter: blur(2px);
}

.ksp-relais-modale__tete {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px 12px;
}

.ksp-relais-modale__tete h2 {
	flex: 1 1 auto;
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.25;
	color: #1A1B25;
}

.ksp-relais-modale__fermer {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #E6E1D9;
	border-radius: 50%;
	background: #FFFFFF;
	color: #6B7080;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
}

.ksp-relais-modale__fermer:hover,
.ksp-relais-modale__fermer:focus {
	border-color: #16697A;
	color: #16697A;
	background: #F4F8F9;
}

.ksp-relais-modale__avant {
	margin: 0;
	padding: 0 22px 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #8A8F9E;
}

.ksp-relais__carte {
	flex: 1 1 auto;
	min-height: 460px;
	overflow: auto;
	background: #FFFFFF;
	border-top: 1px solid #F0EDE7;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
	.ksp-relais { padding: 12px 13px 14px; }
	.ksp-relais__bouton { width: 100%; justify-content: center; }

	/*
	 * Sur un téléphone, la fenêtre prend l'écran entier.
	 *
	 * Un « dialog » se centre de lui-même par ses marges automatiques : avec
	 * une hauteur pleine, il se retrouvait poussé vers le bas, à moitié hors
	 * de l'écran. On l'accroche donc aux quatre bords et l'on annule ses
	 * marges.
	 *
	 * La hauteur se mesure en « dvh » et non en « vh » : sur iPhone, « vh »
	 * ignore la barre d'adresse, si bien que le bas de la carte passait sous
	 * l'écran. La ligne en « vh » reste au-dessus pour les navigateurs qui ne
	 * connaîtraient pas encore l'unité.
	 */
	.ksp-relais-modale {
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.ksp-relais-modale__tete { padding: 13px 15px 8px; }
	.ksp-relais-modale__tete h2 { font-size: 17px; }
	.ksp-relais-modale__avant { padding: 0 15px 10px; font-size: 12.5px; }

	/* La carte remplit ce qui reste, sans hauteur devinée. */
	.ksp-relais__carte {
		min-height: 0;
		max-height: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ksp-relais-modale[open] { animation: ksp-relais-entree .22s ease-out; }
	@keyframes ksp-relais-entree {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: none; }
	}
}


/* --- Le composant de Mondial Relay, rendu lisible ------------------- */

/*
 * Le composant vient avec son habillage d'origine, pensé pour un grand écran.
 * Sur un téléphone, le champ de recherche est minuscule, les résultats se
 * tassent et l'on ne sait plus sur quoi appuyer. On ne refait pas sa mise en
 * page — on rend seulement lisible et cliquable ce sur quoi on doit agir.
 */

/* Le champ de recherche. Seize pixels au minimum : en dessous, iOS agrandit
   la page de lui-même dès qu'on y touche, et l'on se retrouve à faire
   glisser la carte pour retrouver le bouton. */
.ksp-relais__carte .MRW-Search input[type="text"],
.ksp-relais__carte .MRW-Search input[type="search"],
.ksp-relais__carte .MRW-Search select,
.ksp-relais__carte input.PR-AutoCplCity,
.ksp-relais__carte input.PR-City {
	font-size: 16px !important;
	min-height: 44px;
	padding: 9px 12px;
	border-radius: 9px;
	box-sizing: border-box;
}

/* Les boutons de recherche et de géolocalisation : assez grands pour le pouce.
   Quarante-quatre pixels, c'est la cible que tout le monde recommande. */
.ksp-relais__carte .MRW-BtGo,
.ksp-relais__carte .MRW-BtGeoGo {
	min-width: 44px;
	min-height: 44px;
	border-radius: 9px;
	cursor: pointer;
}

/* La liste des points : une ligne se lit d'un coup d'œil, avec le nom en
   premier et le reste en dessous. */
.ksp-relais__carte .PR-List-Item {
	padding: 12px 14px;
	border-bottom: 1px solid #F0EDE7;
	line-height: 1.5;
	cursor: pointer;
}

.ksp-relais__carte .PR-List-Item:hover,
.ksp-relais__carte .PR-List-Item.PR-hover { background: #F7F4EF; }

.ksp-relais__carte .PR-List-Item.PR-Selected {
	background: rgba(22, 105, 122, .08);
	box-shadow: inset 3px 0 0 #16697A;
}

.ksp-relais__carte .PR-Name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: #1A1B25;
}

.ksp-relais__carte .PR-City {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #6B7080;
}

/* Un point indisponible ne doit pas ressembler à un point choisissable. */
.ksp-relais__carte .PR-Disabled { opacity: .45; cursor: not-allowed; }

.ksp-relais__carte .MRW-Errors {
	margin: 10px 14px;
	padding: 10px 13px;
	border-left: 3px solid #A8412F;
	background: rgba(168, 65, 47, .08);
	border-radius: 0 8px 8px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #A8412F;
}

@media (max-width: 700px) {
	/* Sur un téléphone, la carte et la liste ne peuvent pas se partager la
	   largeur : chacune prend la sienne, la liste dessous, et l'on fait
	   défiler. */
	.ksp-relais__carte .MRW-Map,
	.ksp-relais__carte .MRW-Results,
	.ksp-relais__carte .MRW-RList {
		width: 100% !important;
		float: none !important;
		max-width: 100%;
	}

	.ksp-relais__carte .MRW-Map {
		height: 42vh !important;
		min-height: 220px;
	}

	.ksp-relais__carte .MRW-Search { padding: 12px 14px; }

	/* Chaque ligne de résultat reste confortable au pouce. */
	.ksp-relais__carte .PR-List-Item { padding: 14px; min-height: 56px; }
}

/* --- Le rappel, page de remerciement et détail de commande ------------ */

.ksp-relais-merci {
	margin: 26px 0;
	padding: 18px 20px;
	background: #FBF9F5;
	border: 1px solid #E6E1D9;
	border-radius: 12px;
}

.ksp-relais-merci h2 {
	margin: 0 0 8px;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	color: #1A1B25;
}

.ksp-relais-merci p { margin: 0; line-height: 1.65; }