/* =====================================================================
   Hierotext - page de commande (étapes 1 Connexion / 2 Paiement / 3 Confirmation)
   Reprend la charte du site (Verdana, texte bleu nuit, antiquewhite, liens
   bleus / survol bordeaux) avec des champs et des boutons plus actuels.
   Tout est limité au bloc .hx-cmd pour ne rien changer au reste du site.
   ===================================================================== */

.hx-cmd {
	--hx-bleu: #105289;           /* bleu des liens du site */
	--hx-bleu-fonce: #0b3d67;
	--hx-accent: #d48411;         /* couleur des boutons et éléments actifs (choix de l'utilisateur, 05/11/2026) */
	--hx-accent-fonce: #a8680d;   /* survol */
	--hx-bordeaux: #bc2a4d;
	--hx-sable: #faebd7;          /* antiquewhite, couleur des étapes du site */
	--hx-sable-fonce: #e9d5b5;
	--hx-trait: #dccbb0;
	--hx-texte: #0000a0;          /* couleur de texte du site */
	--hx-gris: #5d5d6e;
	--hx-vert: #1a7917;
	--hx-rouge: #b3261e;
	--hx-rayon: 8px;
	width: 86%;
	max-width: 1000px;
	margin: 3.5em auto 8em auto;
	color: var(--hx-texte);
	line-height: 1.5;
}
.hx-cmd *, .hx-cmd *::before, .hx-cmd *::after { box-sizing: border-box; }

.hx-cmd h1.hx-titre {
	font-size: 1.6em;
	font-weight: normal;
	margin: 0 0 .8em 0;
	text-align: left;
}
.hx-cmd h2 { font-size: 1.25em; font-weight: normal; margin: 0 0 .6em 0; }
.hx-cmd h3 { font-size: 1.05em; margin: 1.2em 0 .5em 0; }
.hx-cmd p { margin: 0 0 .8em 0; }
.hx-cmd .hx-petit { font-size: .9em; color: var(--hx-gris); }

/* ---------- Récapitulatif ---------- */
.hx-recap {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hx-trait);
	border-radius: var(--hx-rayon);
	overflow: hidden;
	background: #fff;
	margin-bottom: 2.5em;
}
.hx-recap th, .hx-recap td { padding: .7em 1em; text-align: left; vertical-align: top; }
.hx-recap thead th {
	background: var(--hx-sable);
	font-weight: bold;
	border-bottom: 1px solid var(--hx-trait);
	white-space: nowrap;
}
.hx-recap .hx-num { text-align: right; white-space: nowrap; }
.hx-recap tbody td { border-bottom: 1px solid #efe5d4; }
.hx-recap .hx-produit-nom { font-weight: bold; display: block; margin-bottom: .3em; }
.hx-recap .hx-produit-desc { font-size: .92em; color: #333366; }
.hx-recap tfoot td { padding: .45em 1em; }
.hx-recap tfoot .hx-libelle { text-align: right; color: var(--hx-gris); }
.hx-recap tfoot tr.hx-total td {
	background: var(--hx-accent);
	color: #fff;
	font-weight: bold;
	font-size: 1.1em;
	padding: .75em 1em;
}
.hx-recap tfoot tr.hx-total .hx-libelle { color: #fff; }

/* ---------- Parcours en 3 étapes ---------- */
.hx-parcours { display: flex; align-items: stretch; }
.hx-etapes { list-style: none; margin: 0; padding: 0; flex: 0 0 13em; }
.hx-etapes li {
	display: flex;
	align-items: flex-start;
	padding: .9em 1em;
	border: 1px solid var(--hx-sable-fonce);
	border-right: none;
	border-bottom: none;
	color: #8a8aa8;
	white-space: nowrap;
}
.hx-etapes li:last-child { border-bottom: 1px solid var(--hx-sable-fonce); border-bottom-left-radius: var(--hx-rayon); }
.hx-etapes li:first-child { border-top-left-radius: var(--hx-rayon); }
.hx-etapes .hx-chiffre { font-size: 3.4em; line-height: 1; margin-right: .25em; font-family: Georgia, 'Times New Roman', serif; }
.hx-etapes .hx-libelle-etape { margin-top: .55em; font-size: 1.1em; line-height: 1.25; }
.hx-etapes li.hx-actif { background: var(--hx-sable); color: var(--hx-texte); font-weight: bold; border-color: var(--hx-sable); }
.hx-etapes li.hx-fait { color: var(--hx-vert); }
.hx-etapes li.hx-fait .hx-libelle-etape::after { content: " \2713"; }

.hx-panneau {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--hx-sable);
	border-radius: 0 var(--hx-rayon) var(--hx-rayon) var(--hx-rayon);
	padding: 2em 2.2em;
}

/* ---------- Cartes (blocs blancs dans le panneau) ---------- */
.hx-carte {
	background: #fff;
	border: 1px solid var(--hx-trait);
	border-radius: var(--hx-rayon);
	padding: 1.4em 1.6em;
	margin-bottom: 1.4em;
}
.hx-colonnes { display: flex; gap: 1.4em; align-items: stretch; }
.hx-colonnes > .hx-carte { flex: 1 1 0; margin-bottom: 0; display: flex; flex-direction: column; }
.hx-colonnes > .hx-carte .hx-pousse { margin-top: auto; }

/* ---------- Champs de formulaire ---------- */
.hx-champ { margin-bottom: 1.1em; }
.hx-champ label { display: block; font-weight: bold; margin-bottom: .35em; }
.hx-champ .hx-aide { display: block; font-size: .88em; color: var(--hx-gris); margin-top: .3em; }
.hx-cmd input[type="text"],
.hx-cmd input[type="email"],
.hx-cmd input[type="password"],
.hx-cmd textarea {
	width: 100%;
	max-width: 28em;
	font: inherit;
	color: #1d1d3a;
	background: #fff;
	border: 1px solid #b9a98a;
	border-radius: 6px;
	padding: .6em .75em;
	transition: border-color .15s, box-shadow .15s;
}
.hx-cmd textarea { max-width: 100%; min-height: 8em; resize: vertical; }
.hx-cmd input:focus, .hx-cmd textarea:focus {
	outline: none;
	border-color: var(--hx-accent);
	box-shadow: 0 0 0 3px rgba(212, 132, 17, .22);
}
.hx-cmd .hx-champ-erreur { border-color: var(--hx-rouge) !important; }

/* ---------- Boutons ---------- */
.hx-bouton, .hx-cmd input[type="submit"].hx-bouton, .hx-cmd button.hx-bouton {
	display: inline-block;
	font: inherit;
	font-weight: bold;
	font-size: 1em;
	line-height: 1.2;
	color: #fff !important;
	background: var(--hx-accent);
	border: 1px solid var(--hx-accent);
	border-radius: 6px;
	padding: .75em 1.6em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s, box-shadow .15s, transform .05s;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}
.hx-bouton:hover { background: var(--hx-accent-fonce); border-color: var(--hx-accent-fonce); }
.hx-bouton:active { transform: translateY(1px); }
.hx-bouton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 132, 17, .35); }
.hx-bouton[disabled] { opacity: .5; cursor: not-allowed; }
.hx-bouton.hx-secondaire { background: #fff; color: var(--hx-accent) !important; }
.hx-bouton.hx-secondaire:hover { background: #fdf5ea; }
.hx-bouton.hx-large { width: 100%; text-align: center; }

/* ---------- Conditions de vente ---------- */
.hx-cgv { border-left: 4px solid var(--hx-bordeaux); }
.hx-cgv ul { margin: .3em 0 1em 1.2em; padding: 0; }
.hx-cgv li { margin-bottom: .3em; }
.hx-case {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	font-weight: bold;
	cursor: pointer;
	padding: .7em .8em;
	border-radius: 6px;
	background: #fbf7f0;
	border: 1px solid var(--hx-trait);
}
.hx-case input { width: 1.25em; height: 1.25em; margin: .1em 0 0 0; accent-color: var(--hx-accent); flex: 0 0 auto; }
.hx-case.hx-a-cocher { border-color: var(--hx-rouge); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }

/* ---------- Choix du moyen de paiement ---------- */
.hx-moyens { display: flex; gap: .8em; margin: 0 0 1.2em 0; flex-wrap: wrap; }
.hx-moyen {
	flex: 1 1 12em;
	position: relative;
	display: flex;
	align-items: center;
	gap: .8em;
	padding: .9em 1em;
	background: #fff;
	border: 1px solid var(--hx-trait);
	border-radius: var(--hx-rayon);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.hx-moyen:hover { border-color: #9fb4c9; }
.hx-moyen input { position: absolute; opacity: 0; pointer-events: none; }
.hx-moyen .hx-pastille {
	flex: 0 0 auto; width: 1.15em; height: 1.15em; border-radius: 50%;
	border: 2px solid #9a9ab0; background: #fff;
}
.hx-moyen.hx-choisi { border-color: var(--hx-accent); box-shadow: 0 0 0 2px var(--hx-accent) inset; }
.hx-moyen.hx-choisi .hx-pastille { border-color: var(--hx-accent); background: radial-gradient(circle, var(--hx-accent) 0 45%, #fff 50%); }
.hx-moyen .hx-moyen-titre { display: block; font-weight: bold; }
.hx-moyen .hx-moyen-detail { display: block; font-size: .85em; color: var(--hx-gris); }
.hx-moyen.hx-indisponible { opacity: .5; cursor: not-allowed; }

.hx-zone-paiement { transition: opacity .2s; }
.hx-zone-paiement.hx-verrouille { opacity: .45; filter: grayscale(.4); cursor: not-allowed; }
.hx-zone-paiement.hx-verrouille * { cursor: not-allowed; }
.hx-volet { display: none; }
.hx-volet.hx-visible { display: block; }

#sumup-card { min-height: 3em; max-width: 30em; margin: 0 auto; }
#hx-paypal-boutons { max-width: 26em; margin: 0 auto; }

/* ---------- Messages ---------- */
.hx-message { padding: .8em 1em; border-radius: 6px; margin: 0 0 1em 0; display: none; }
.hx-message.hx-visible { display: block; }
.hx-message.hx-info { background: #eef4fa; border: 1px solid #c6d8ea; color: #0b3d67; }
.hx-message.hx-erreur { background: #fdecea; border: 1px solid #f3c1bc; color: var(--hx-rouge); }
.hx-message.hx-ok { background: #ecf6ea; border: 1px solid #bfe0ba; color: var(--hx-vert); }
.hx-chargement::before {
	content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: hx-tourne .8s linear infinite;
}
@keyframes hx-tourne { to { transform: rotate(360deg); } }

/* ---------- Bandeau de confiance ---------- */
.hx-confiance {
	display: flex; flex-wrap: wrap; gap: .6em 1.6em;
	margin: 1.4em 0 0 0; padding: 1em 0 0 0;
	border-top: 1px solid var(--hx-sable-fonce);
	font-size: .9em; color: var(--hx-gris);
}
.hx-confiance span { display: inline-flex; align-items: center; gap: .4em; }
.hx-confiance svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--hx-bleu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-badges { display: inline-flex; gap: .35em; margin-left: .2em; }
.hx-badge { font-size: .78em; font-weight: bold; letter-spacing: .03em; padding: .1em .45em; border: 1px solid #b9a98a; border-radius: 4px; background: #fff; color: #333; }

/* ---------- Confirmation ---------- */
.hx-confirmation { text-align: left; }
.hx-confirmation .hx-coche {
	width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--hx-vert);
	display: flex; align-items: center; justify-content: center; margin-bottom: 1em;
}
.hx-confirmation .hx-coche svg { width: 1.8em; height: 1.8em; stroke: #fff; stroke-width: 3; fill: none; }
.hx-details { border-collapse: collapse; margin: 1em 0 1.4em 0; }
.hx-details td { padding: .35em 1.5em .35em 0; vertical-align: top; }
.hx-details td:first-child { color: var(--hx-gris); }

/* ---------- Formulaire d'inscription existant (étape 1) ---------- */
.hx-cmd fieldset { border: 1px solid var(--hx-trait); border-radius: var(--hx-rayon); padding: 1em 1.2em; margin: 0 0 1.2em 0; background: #fff; }
.hx-cmd legend { font-weight: bold; padding: 0 .4em; }
.hx-verif { font-size: .9em; margin-top: .3em; }

/* ---------- Petits écrans ---------- */
@media (max-width: 900px) {
	.hx-cmd { width: 96%; margin-top: 2em; }
	.hx-parcours { flex-direction: column; }
	.hx-etapes { display: flex; flex: none; }
	.hx-etapes li { flex: 1 1 0; border: 1px solid var(--hx-sable-fonce); border-bottom: none; padding: .6em; }
	.hx-etapes li:first-child { border-radius: var(--hx-rayon) 0 0 0; }
	.hx-etapes li:last-child { border-radius: 0 var(--hx-rayon) 0 0; border-bottom: none; }
	.hx-etapes .hx-chiffre { font-size: 2em; }
	.hx-etapes .hx-libelle-etape { margin-top: .2em; font-size: .9em; white-space: normal; }
	.hx-panneau { border-radius: 0 0 var(--hx-rayon) var(--hx-rayon); padding: 1.2em; }
	.hx-colonnes { flex-direction: column; }
	.hx-recap .hx-col-prix, .hx-recap .hx-col-qte { display: none; }
}