/* =====================================================================
   Chemin de commande chr.promo (panier > coordonnées > livraison > paiement)
   Complète /prg/css/espace.css - tout est préfixé #ep
   ===================================================================== */

/* ---------- Étapes de la commande (dans le bandeau bleu) */
#ep .cm-etapes { flex-basis:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:-2px; list-style:none; padding:0; }
#ep .cm-etapes li { display:flex; align-items:center; gap:8px; font-size:13.5px; color:#e9e6dc; white-space:nowrap; }
#ep .cm-etapes li b { width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,.45); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
#ep .cm-etapes li.fait b { background:#2b8a3e; border-color:#2b8a3e; }
#ep .cm-etapes li.actif { color:#fff; font-weight:700; }
#ep .cm-etapes li.actif b { background:var(--orange); border-color:var(--orange); }
#ep .cm-etapes li a { color:inherit; text-decoration:none; }
#ep .cm-etapes li a:hover { color:#fff; text-decoration:underline; }
#ep .cm-etapes li + li::before { content:""; width:26px; height:1px; background:rgba(255,255,255,.35); margin-right:2px; }

/* ---------- Formulaires */
#ep .ep-champ select { width:100%; padding:11px 12px; border:1px solid var(--bord); border-radius:8px; font-size:15px; background:#fff; font-family:inherit; color:#222; }
#ep .ep-champ select:focus { outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(213,15,28,.15); }
#ep .ep-champ input[type=checkbox], #ep .cm-case input { width:auto; }
#ep .ep-champ ul { list-style:none; margin:4px 0 0; padding:0; max-height:220px; overflow:auto; border-radius:8px; }
#ep .ep-champ ul li.vicopo-answer { padding:7px 10px; font-size:14px; border:1px solid #eeece4; border-top:0; background:#fff; }
#ep .ep-champ ul li.vicopo-answer:first-of-type { border-top:1px solid #eeece4; }
#ep .ep-champ ul li strong { color:var(--marine); margin-right:6px; }
#ep .cm-case { display:flex; gap:10px; align-items:flex-start; font-size:14px; margin:4px 0 6px; cursor:pointer; }
#ep .cm-case input { margin-top:3px; transform:scale(1.15); flex:none; }
#ep .cm-section { font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--doux); margin:22px 0 12px; padding-top:18px; border-top:1px solid #eeece4; }
#ep .ep-carte h2 + .cm-section { margin-top:12px; padding-top:0; border-top:0; }

/* ---------- Choix oui / non */
#ep .cm-ouinon { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 4px; }
#ep .cm-ouinon label { display:flex; align-items:center; gap:8px; border:1px solid var(--bord); border-radius:8px; padding:10px 16px; cursor:pointer; font-weight:600; color:var(--marine); background:#fff; }
#ep .cm-ouinon label:hover { border-color:var(--bleu); }
#ep .cm-ouinon input { margin:0; }

/* ---------- Options sélectionnables (livraison, paiement) */
#ep .cm-opts { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
#ep .cm-opt { display:flex; align-items:center; gap:14px; border:1px solid var(--bord); border-radius:10px; padding:14px 16px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s; }
#ep .cm-opt:hover { border-color:var(--bleu); }
#ep .cm-opt.actif, #ep .cm-opt:has(input:checked) { border-color:var(--bleu); box-shadow:0 0 0 3px rgba(213,15,28,.15); background:#fbfaf6; }
#ep .cm-opt input[type=radio] { margin:0; width:18px; height:18px; flex:none; accent-color:var(--bleu); }
#ep .cm-opt .cm-txt { flex:1; min-width:0; font-size:14.5px; line-height:1.45; color:#222; }
#ep .cm-opt .cm-txt div { margin-top:2px; font-size:13.5px; color:var(--doux); }
#ep .cm-opt .cm-prix { font-weight:700; color:var(--marine); white-space:nowrap; }
#ep .cm-opt .cm-prix.offert { color:#2b8a3e; }
#ep .cm-opt.seul { cursor:default; }
#ep .cm-logo { flex:none; width:120px; display:flex; align-items:center; justify-content:center; }
#ep .cm-logo img, #ep .cm-logo svg { max-width:110px; max-height:46px; height:auto; }
#ep .cm-rond { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--bord); background:#fff; }
#ep .cm-opt.actif .cm-rond { border-color:var(--bleu); background:radial-gradient(circle, var(--bleu) 0 5px, #fff 6px); }

/* ---------- Récapitulatif */
#ep .cm-lignes { width:100%; border-collapse:collapse; font-size:14px; }
#ep .cm-lignes td, #ep .cm-lignes th { padding:10px 8px; border-top:1px solid #eeece4; vertical-align:top; text-align:left; }
#ep .cm-lignes th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--doux); background:#f2f2ef; border-top:0; }
#ep .cm-lignes td.mt, #ep .cm-lignes th.mt { text-align:right; white-space:nowrap; }
#ep .cm-lignes td.qt, #ep .cm-lignes th.qt { text-align:center; width:60px; }
#ep .cm-lignes .ref { font-size:12.5px; color:var(--doux); margin-top:3px; }
#ep .cm-lignes .gar { font-size:12.5px; color:#444; margin-top:2px; }
#ep .cm-lignes tr.st td { background:#fbfaf6; }
#ep .cm-lignes tr.tot td { font-weight:700; color:var(--marine); font-size:15px; border-top:2px solid var(--marine); }
#ep .cm-total { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #eeece4; font-size:14.5px; }
#ep .cm-total:first-of-type { border-top:0; }
#ep .cm-total span { color:var(--doux); }
#ep .cm-total b { white-space:nowrap; }
#ep .cm-total.grand { border-top:2px solid var(--marine); margin-top:4px; padding-top:12px; }
#ep .cm-total.grand span { color:var(--marine); font-weight:700; text-transform:uppercase; font-size:14px; }
#ep .cm-total.grand b { font-size:24px; color:var(--marine); }
#ep .cm-adr { font-size:14px; line-height:1.55; color:#333; }
#ep .cm-adr strong { color:var(--marine); }
#ep .cm-cgv { display:flex; gap:10px; align-items:flex-start; background:#f2f2ef; border-radius:8px; padding:12px 14px; margin:16px 0 14px; font-size:14px; }
#ep .cm-cgv input { transform:scale(1.3); margin-top:4px; flex:none; }
#ep .cm-cgv label { font-weight:600; color:var(--marine); cursor:pointer; }
#ep .cm-cgv a { font-weight:normal; }
#ep .cm-semi { margin-top:16px; }
#ep .cm-semi img { max-width:100%; border:1px solid var(--bord); border-radius:8px; margin-top:12px; }

@media (max-width: 760px) {
	#ep .cm-etapes li + li::before { width:12px; }
	#ep .cm-etapes li span { display:none; }
	#ep .cm-etapes li.actif span { display:inline; }
	#ep .cm-logo { width:70px; }
	#ep .cm-logo img, #ep .cm-logo svg { max-width:66px; }
	#ep .cm-lignes th.pu, #ep .cm-lignes td.pu { display:none; }
}

/* ---------- Zone de contenu éditable sous les blocs */
.pn-cms { margin-top:10px; }
.pn-cms:empty { display:none; }

/* ---------- Fenêtres (euros fidélité, demande de leasing) : cadre arrondi (site uniquement, pas l'application) */
html:not(:has(>#chr-app-topbar)) #nekfond { background:rgba(10,25,40,.55); opacity:1; }
html:not(:has(>#chr-app-topbar)) #nekmodal { top:6vh; width:640px; max-width:calc(100% - 24px); min-width:0; margin-left:auto; margin-right:auto; border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); }
html:not(:has(>#chr-app-topbar)) #nekmodal #i_ext { display:block; height:min(600px, 86vh); overflow:auto; }