/**
 * Le panier et la commande, au design de la refonte.
 *
 * Feuille autonome : le panier n'est pas une mise en page d'article, il ne
 * charge donc ni socle.css ni pages.css. Les jetons de la maison sont
 * redéclarés ici sous un préfixe qui leur est propre - une page qui vit seule
 * ne doit pas dépendre d'un fichier qu'elle ne demande pas.
 *
 * Toutes les classes commencent par .exo-cart- : elles cohabitent avec l'UIkit
 * de VMuikitX et le thème, sans jamais entrer en collision avec eux.
 */

.exo-cart {
	--exo-cart-fond: #121212;
	--exo-cart-carte: #181818;
	--exo-cart-filet: #2e2e2e;
	--exo-cart-texte: #dbdbdb;
	--exo-cart-meta: #9a9a9a;
	--exo-cart-corail: #f56d52;
	--exo-cart-corail-fonce: #bb022e;

	background: var(--exo-cart-fond);
	color: var(--exo-cart-texte);
	padding: 46px 0 64px;
	font-size: 15px;
	line-height: 1.6;
}

.exo-cart-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- la tête ---------- */

.exo-cart-kicker {
	margin: 0 0 8px;
	font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--exo-cart-corail);
}

.exo-cart-titre {
	margin: 0 0 26px;
	font-size: 38px; line-height: 1.1; text-transform: uppercase;
	letter-spacing: .01em; color: #fff;
}

/* ---------- l'échelle des étapes ---------- */
/*
 * Elle dit où l'on en est, pas où l'on peut aller : aucune étape n'est
 * cliquable, VirtueMart décidant seul de l'ordre du tunnel.
 */
.exo-cart-etapes {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 30px; padding: 0; list-style: none;
	counter-reset: none;
}

.exo-cart-etape {
	display: flex; align-items: center; gap: 9px;
	padding: 9px 15px;
	background: var(--exo-cart-carte);
	border: 1px solid var(--exo-cart-filet);
	border-radius: 5px;
	font-size: 12.5px; color: var(--exo-cart-meta);
	flex: 1 1 180px;
}

.exo-cart-etape-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; flex: none;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 11.5px; font-weight: 700;
}

.exo-cart-etape--on {
	color: #fff;
	border-color: var(--exo-cart-corail);
	border-left-width: 3px;
}

.exo-cart-etape--on .exo-cart-etape-num {
	background: var(--exo-cart-corail); border-color: var(--exo-cart-corail); color: #fff;
}

.exo-cart-etape--faite { color: var(--exo-cart-texte); }
.exo-cart-etape--faite .exo-cart-etape-num { border-color: var(--exo-cart-corail); color: var(--exo-cart-corail); }

/* ---------- les deux colonnes ---------- */

.exo-cart-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 26px;
	align-items: start;
}

/* ---------- un article ---------- */

.exo-cart-liste { display: flex; flex-direction: column; gap: 14px; }

.exo-cart-article {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 18px;
	padding: 16px;
	background: var(--exo-cart-carte);
	border: 1px solid var(--exo-cart-filet);
	border-radius: 6px;
}

.exo-cart-article-photo {
	display: block; overflow: hidden; border-radius: 4px;
	background: #101010; aspect-ratio: 1 / 1;
}

.exo-cart-article-photo img,
.exo-cart-vignette { width: 100%; height: 100%; object-fit: cover; display: block; }

.exo-cart-article-photo--vide { border: 1px dashed var(--exo-cart-filet); }

.exo-cart-article-corps { display: flex; flex-direction: column; min-width: 0; }

.exo-cart-article-nom { margin: 0 0 6px; font-size: 17px; line-height: 1.3; text-transform: uppercase; }
.exo-cart-article-nom a { color: #fff; text-decoration: none; }
.exo-cart-article-nom a:hover { color: var(--exo-cart-corail); }

/*
 * La période de location, rendue par fwrent. On ne connaît pas son balisage
 * exact et il changera : on cadre la couleur et la taille sans supposer de
 * structure.
 */
.exo-cart-article-periode {
	font-size: 13.5px; color: var(--exo-cart-texte);
	border-left: 2px solid var(--exo-cart-corail);
	padding-left: 11px; margin: 2px 0 8px;
}

.exo-cart-article-periode div,
.exo-cart-article-periode span,
.exo-cart-article-periode p { margin: 0; }

.exo-cart-article-ref { margin: 0 0 8px; font-size: 12px; color: var(--exo-cart-meta); }

.exo-cart-article-pied {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: auto; padding-top: 10px;
	border-top: 1px solid var(--exo-cart-filet);
}

.exo-cart-quantite-champ {
	width: 66px; padding: 7px 9px;
	background: #101010; color: var(--exo-cart-texte);
	border: 1px solid var(--exo-cart-filet); border-radius: 4px;
	font: inherit; font-size: 14px; text-align: center;
}

.exo-cart-quantite-fixe { font-size: 13px; color: var(--exo-cart-meta); }

.exo-cart-article-prix {
	margin-left: auto;
	font-size: 19px; font-weight: 700; color: #fff; white-space: nowrap;
}

.exo-cart-article-prix div { display: inline; }

.exo-cart-retirer {
	font-size: 12.5px; color: var(--exo-cart-meta); text-decoration: none;
	border-bottom: 1px solid transparent;
}

.exo-cart-retirer:hover { color: var(--exo-cart-corail); border-bottom-color: currentColor; }

.exo-cart-maj { margin-top: 14px; }

.exo-cart-continuer {
	display: inline-block; margin-top: 18px;
	font-size: 13.5px; color: var(--exo-cart-meta); text-decoration: none;
}

.exo-cart-continuer:hover { color: var(--exo-cart-corail); }

/* ---------- le récapitulatif ---------- */

.exo-cart-recap-carte {
	background: var(--exo-cart-carte);
	border: 1px solid var(--exo-cart-filet);
	border-left: 3px solid var(--exo-cart-corail);
	border-radius: 6px;
	padding: 20px;
}

.exo-cart-recap-titre {
	margin: 0 0 16px; font-size: 15px; text-transform: uppercase;
	letter-spacing: .08em; color: #fff;
}

.exo-cart-lignes { margin: 0 0 16px; }

.exo-cart-ligne {
	display: flex; justify-content: space-between; gap: 14px;
	padding: 7px 0; font-size: 14px;
}

.exo-cart-ligne dt { color: var(--exo-cart-meta); margin: 0; }
.exo-cart-ligne dd { margin: 0; color: var(--exo-cart-texte); text-align: right; }
.exo-cart-ligne dd div { display: inline; }

.exo-cart-attente { font-size: 12.5px; font-style: italic; color: var(--exo-cart-meta); }

.exo-cart-ligne--remise dd { color: var(--exo-cart-corail); }

.exo-cart-coupon { display: flex; gap: 8px; margin: 0 0 18px; }

.exo-cart-coupon input {
	flex: 1 1 auto; min-width: 0; padding: 9px 11px;
	background: #101010; color: var(--exo-cart-texte);
	border: 1px solid var(--exo-cart-filet); border-radius: 4px;
	font: inherit; font-size: 13.5px;
}

.exo-cart-total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	margin: 0 -20px 18px; padding: 14px 20px;
	background: linear-gradient(135deg, var(--exo-cart-corail), var(--exo-cart-corail-fonce));
	color: #fff;
}

.exo-cart-total-nom { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.exo-cart-total-somme { font-size: 24px; font-weight: 700; }
.exo-cart-total-somme div { display: inline; }

.exo-cart-commander { margin-bottom: 16px; }
.exo-cart-commander a,
.exo-cart-commander button { width: 100%; }

.exo-cart-reassurance { margin: 0; padding: 0; list-style: none; }

.exo-cart-reassurance li {
	position: relative; padding-left: 18px; margin-bottom: 7px;
	font-size: 12.5px; line-height: 1.5; color: var(--exo-cart-meta);
}

.exo-cart-reassurance li::before {
	content: ''; position: absolute; left: 0; top: 7px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--exo-cart-corail);
}

/* ---------- les boutons ---------- */

.exo-cart-btn,
.exo-cart .exo-cart-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	border-radius: 4px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}

.exo-cart-btn--primaire {
	background: linear-gradient(135deg, var(--exo-cart-corail), var(--exo-cart-corail-fonce));
	color: #fff;
}

.exo-cart-btn--primaire:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }

.exo-cart-btn--large { width: 100%; padding: 14px 22px; }

.exo-cart-btn--discret {
	background: transparent; color: var(--exo-cart-texte);
	border-color: var(--exo-cart-filet);
}

.exo-cart-btn--discret:hover { border-color: var(--exo-cart-corail); color: var(--exo-cart-corail); }

/* ---------- le panier vide ---------- */

.exo-cart-vide {
	padding: 54px 24px; text-align: center;
	background: var(--exo-cart-carte);
	border: 1px solid var(--exo-cart-filet); border-radius: 6px;
}

.exo-cart-vide-titre { margin: 0 0 10px; font-size: 24px; text-transform: uppercase; color: #fff; }
.exo-cart-vide-texte { margin: 0 0 22px; color: var(--exo-cart-meta); }

.exo-cart-annonces { margin-bottom: 20px; }

/* Le texte que seuls les lecteurs d'écran lisent. */
.exo-cart-lecteur {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* ---------- téléphone ---------- */

@media (max-width: 960px) {
	.exo-cart-colonnes { grid-template-columns: minmax(0, 1fr); }

	/*
	 * La maquette voulait le récapitulatif collé en bas sur téléphone. Essayé,
	 * puis retiré : la carte fait plus de la moitié d'un écran de téléphone,
	 * et collée elle recouvre les articles qu'on essaie justement de relire.
	 * Le total reste atteignable d'un pouce - la pastille du panier, elle,
	 * est bien flottante et suit partout.
	 */
	.exo-cart-recap { margin-top: 6px; }
}

@media (max-width: 620px) {
	.exo-cart { padding: 30px 0 44px; }
	.exo-cart-wrap { padding: 0 16px; }
	.exo-cart-titre { font-size: 28px; }
	.exo-cart-article { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; padding: 13px; }
	.exo-cart-etape { flex: 1 1 100%; }
	.exo-cart-article-prix { font-size: 17px; }
}

/* ---------- les écrans de formulaire (étapes 2 à 4) ---------- */
/*
 * Ces écrans ne sont pas écrits par nous : ce sont les champs de VirtueMart,
 * rendus par VMuikitX en UIkit. On les habille donc par le pourtour, en
 * visant les classes qu'ils portent réellement, sans jamais supposer une
 * structure - un champ de plus doit hériter du même costume tout seul.
 */

.exo-cart-note {
	margin: -14px 0 26px;
	font-size: 13.5px; color: var(--exo-cart-meta); max-width: 720px;
}

.exo-cart-formulaire { color: var(--exo-cart-texte); }

.exo-cart-formulaire .uk-card,
.exo-cart-formulaire fieldset,
.exo-cart-formulaire .adminForm {
	background: var(--exo-cart-carte);
	border: 1px solid var(--exo-cart-filet);
	border-radius: 6px;
	padding: 20px;
	margin: 0 0 16px;
}

/* Une carte dans une carte ne double pas le cadre. */
.exo-cart-formulaire .uk-card fieldset,
.exo-cart-formulaire fieldset fieldset,
.exo-cart-formulaire .uk-card .adminForm {
	background: transparent; border: 0; padding: 0; margin: 0;
}

.exo-cart-formulaire h2,
.exo-cart-formulaire h3,
.exo-cart-formulaire legend,
.exo-cart-formulaire .uk-card-title {
	margin: 0 0 14px;
	font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #fff;
}

.exo-cart-formulaire label,
.exo-cart-formulaire .uk-form-label {
	display: block; margin-bottom: 5px;
	font-size: 12.5px; color: var(--exo-cart-meta); font-weight: 400;
}

.exo-cart-formulaire input[type="text"],
.exo-cart-formulaire input[type="email"],
.exo-cart-formulaire input[type="tel"],
.exo-cart-formulaire input[type="password"],
.exo-cart-formulaire input[type="number"],
.exo-cart-formulaire select,
.exo-cart-formulaire textarea {
	width: 100%; max-width: 100%; padding: 10px 12px;
	background: #101010; color: var(--exo-cart-texte);
	border: 1px solid var(--exo-cart-filet); border-radius: 4px;
	font: inherit; font-size: 14px;
}

.exo-cart-formulaire input:focus,
.exo-cart-formulaire select:focus,
.exo-cart-formulaire textarea:focus {
	outline: 2px solid var(--exo-cart-corail); outline-offset: 1px; border-color: transparent;
}

.exo-cart-formulaire input[type="checkbox"],
.exo-cart-formulaire input[type="radio"] { width: auto; accent-color: var(--exo-cart-corail); }

.exo-cart-formulaire .uk-margin,
.exo-cart-formulaire .control-group { margin-bottom: 14px; }

/* L'astérisque des champs requis se voit. */
.exo-cart-formulaire .required,
.exo-cart-formulaire .star { color: var(--exo-cart-corail); }

/*
 * Les boutons de VirtueMart. On vise ses classes plutôt que de les remplacer
 * dans le PHP : le gabarit délégué en fabrique certains dynamiquement.
 */
.exo-cart-formulaire .uk-button,
.exo-cart-choix .uk-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px; margin: 4px 6px 4px 0;
	font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	border-radius: 4px; border: 1px solid var(--exo-cart-filet);
	background: transparent; color: var(--exo-cart-texte); cursor: pointer;
}

.exo-cart-formulaire .uk-button:hover,
.exo-cart-choix .uk-button:hover { border-color: var(--exo-cart-corail); color: var(--exo-cart-corail); }

.exo-cart-formulaire .uk-button-primary,
.exo-cart-formulaire .uk-button-secondary,
.exo-cart-choix .uk-button-primary,
.exo-cart-choix .uk-button-secondary {
	background: linear-gradient(135deg, var(--exo-cart-corail), var(--exo-cart-corail-fonce));
	border-color: transparent; color: #fff;
}

.exo-cart-formulaire .uk-button-primary:hover,
.exo-cart-formulaire .uk-button-secondary:hover,
.exo-cart-choix .uk-button-primary:hover,
.exo-cart-choix .uk-button-secondary:hover { color: #fff; transform: translateY(-1px); }

.exo-cart-formulaire .control-buttons { margin: 18px 0 0; }

/* Le texte d'invitation à créer un compte, au-dessus des boutons. */
.exo-cart-formulaire .reg_text {
	margin-bottom: 12px; font-size: 13px; color: var(--exo-cart-meta);
	border-left: 2px solid var(--exo-cart-corail); padding-left: 11px;
}

/* ---------- les choix d'expédition et de paiement ---------- */

.exo-cart-choix .vm-shipment-name,
.exo-cart-choix .vm-payment-name,
.exo-cart-choix label {
	color: var(--exo-cart-texte); font-size: 14px;
}

.exo-cart-choix table { width: 100%; border-collapse: collapse; }

.exo-cart-choix td,
.exo-cart-choix th {
	padding: 12px 10px; border-bottom: 1px solid var(--exo-cart-filet); vertical-align: middle;
}

.exo-cart-choix tr:last-child td { border-bottom: 0; }

/* ---------- l'écran de confirmation ---------- */

.exo-cart table.cart-summary,
.exo-cart .vm-confirm { width: 100%; border-collapse: collapse; }

.exo-cart .cart-summary td,
.exo-cart .cart-summary th { padding: 10px; border-bottom: 1px solid var(--exo-cart-filet); }

.exo-cart a { color: var(--exo-cart-corail); }
.exo-cart .exo-cart-article-nom a { color: #fff; }

/*
 * Les h4 de VirtueMart dans ces écrans ne sont pas des titres de page : il
 * s'en sert aussi bien pour nommer un bloc que pour prévenir d'un problème.
 * On les traite donc en intertitre modeste plutôt qu'en grande capitale -
 * sans quoi un avertissement ressemble au titre de l'écran, ce qui était le
 * cas de « You must enter your billing details first » à l'étape 3.
 */
.exo-cart-formulaire h4,
.exo-cart-choix h4 {
	margin: 0 0 12px;
	font-size: 14px; line-height: 1.5; font-weight: 700;
	text-transform: none; letter-spacing: 0; color: var(--exo-cart-texte);
}