/* ==========================================================================
   Zap Store : habillage commun des pages client (connexion, mot de passe
   perdu, étapes de commande). Même langage visuel que la page de
   confirmation (6-confirmation.tpl.php, classes « zc- ») : carte blanche
   arrondie, titres Oswald, champs clairs, bouton principal vert #aaf200.
   Chargé en dernier par Front-Office/tpl/structure/html.tpl.php ; chaque
   règle vise la carte centrale (#main.block-center) ou une section précise,
   pour ne rien changer aux autres pages.
   ========================================================================== */

/* ---------- Carte centrale ---------- */
#main.block-center .post_container{
	border-radius:14px;
	box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
	padding-bottom:6px;
}

/* ---------- Titre de page (pages avant connexion et étapes de commande) ---------- */
#main.block-center .post,
section#order .post{ padding:0 0 16px; }
#main.block-center .post h1,
section#order .post h1{
	margin:30px 20px 0; padding:0; border:0;
	font-family:'Oswald',sans-serif; font-weight:400; font-size:26px; line-height:1.2;
	letter-spacing:.3px; text-transform:uppercase; color:#333; text-align:left;
}
#main.block-center .post h1::after,
section#order .post h1::after{
	content:""; display:block; width:36px; height:3px; margin-top:12px;
	background:#aaf200; border-radius:2px;
}

/* ---------- Fil d'Ariane, aligné sur la carte ---------- */
body:has(#main.block-center) p.breadcrumbs{
	max-width:400px; margin:0 auto; padding:22px 0 0; box-sizing:border-box;
	font-size:11.5px; letter-spacing:.3px;
}

/* ---------- Champs et bouton principal (connexion, mot de passe perdu) ---------- */
#customer-login .form-exist input[type="text"],
#customer-login .form-exist input[type="password"],
#customer-password input[type="text"]{
	display:block; width:100% !important; max-width:none; height:48px; box-sizing:border-box;
	margin:0; padding:0 14px;
	background:#fff; border:1px solid #d3d7db; border-radius:8px; box-shadow:none;
	font-family:'Lato',sans-serif; font-size:15px; color:#333;
	transition:border-color .15s ease, box-shadow .15s ease;
}
#customer-login .form-exist input#custPassword{ padding-right:44px; }
#customer-login .form-exist input[type="text"]:focus,
#customer-login .form-exist input[type="password"]:focus,
#customer-password input[type="text"]:focus{
	outline:none; border-color:#8fcc00; box-shadow:0 0 0 3px rgba(170,242,0,.35);
}
#customer-login .form-exist input::placeholder,
#customer-password input::placeholder{ color:#9a9a9a; opacity:1; }

#wrapper #customer-login-submit,
#wrapper #customer-password input[type="submit"]{
	display:block; width:100%; height:48px; margin:6px 0 0 !important; padding:0 16px; float:none;
	background:#aaf200 !important; border:0 !important; border-radius:8px; box-shadow:none;
	color:#1f2a00 !important; font-family:'Oswald',sans-serif !important; font-size:16px !important; font-weight:400;
	letter-spacing:.6px; text-transform:uppercase; text-shadow:none !important; cursor:pointer;
	transition:background .15s ease;
}
#wrapper #customer-login-submit:hover,
#wrapper #customer-password input[type="submit"]:hover{
	background:#9ee000 !important; color:#1f2a00 !important; border-color:#9ee000 !important;
}
#wrapper #customer-login-submit:focus-visible,
#wrapper #customer-password input[type="submit"]:focus-visible{
	outline:3px solid rgba(143,204,0,.55); outline-offset:2px;
}

/* ---------- Connexion ---------- */
#customer-login .customer-login-exist .message p{
	padding:2px 20px 0; color:#666; font-size:14px; line-height:1.55;
}
#customer-login .form-exist{ padding:18px 20px 24px; }
#customer-login .form-exist form{ margin:0; padding:0; }
#customer-login .form-exist form p{ margin:0 0 12px; padding:0; }
#customer-login .form-exist form p:has(#keepAlive){
	display:flex; align-items:center; gap:2px; margin:2px 0 14px;
	color:#666; font-size:13.5px; cursor:default;
}
#customer-login #keepAlive{
	width:16px; height:16px; margin:0 6px 0 0; accent-color:#8fcc00; cursor:pointer;
}
#customer-login #toggle-custPassword{ color:#9a9a9a !important; }
#customer-login p.connection{ margin:0; padding:0; text-align:center; }
#customer-login .error-msg{
	margin:0 0 14px; padding:10px 12px; border-radius:8px;
	background:#fdecec; color:#9b2c2c; font-size:13.5px;
}

/* ---------- Mot de passe perdu ---------- */
#customer-password .data-text{ padding:2px 20px 24px; }
#customer-password .data-text p{ margin:0; padding:0 0 10px; color:#666; font-size:14px; line-height:1.55; }
#customer-password form p.field{ margin:0; padding:8px 0 0; }
#customer-password form p.field input[type="text"]{ margin-bottom:12px; }

/* ---------- Étapes de commande (Panier, Paiement, Téléchargement) ---------- */
section#order nav#order-breadcrump{ padding:8px 20px 0; overflow:visible; }
section#order nav#order-breadcrump ul{
	display:flex; margin:0 0 24px; padding:0; list-style:none; counter-reset:zc-etape;
}
section#order nav#order-breadcrump li{
	flex:1 1 0; position:relative; width:auto; float:none; margin:0; padding:0;
	list-style:none; background:none; text-align:center; counter-increment:zc-etape;
}
section#order nav#order-breadcrump li .image{ display:none; }
section#order nav#order-breadcrump li::before{
	content:counter(zc-etape); position:relative; z-index:1;
	display:flex; align-items:center; justify-content:center;
	width:32px; height:32px; margin:0 auto 7px; box-sizing:border-box;
	border:2px solid #dcdcdc; border-radius:50%; background:#fff; color:#9a9a9a;
	font:700 13px/1 'Lato',sans-serif;
}
section#order nav#order-breadcrump li + li::after{
	content:""; position:absolute; z-index:0; top:15px; right:50%; width:100%; height:2px;
	background:#e4e4e4;
}
section#order nav#order-breadcrump li.activate::before{
	background:#aaf200; border-color:#aaf200; color:#1f2a00;
}
section#order nav#order-breadcrump li.activate + li.activate::after{ background:#aaf200; }
/* étapes déjà franchies : coche à la place du numéro */
section#order nav#order-breadcrump li.activate:has(+ li.activate)::before{
	content:"";
	background:#aaf200 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat;
}
section#order nav#order-breadcrump .link{ line-height:1.3; }
section#order nav#order-breadcrump .link a,
section#order nav#order-breadcrump .link span{
	font-family:'Lato',sans-serif; font-size:12.5px; font-weight:400;
	color:#9a9a9a; text-decoration:none; text-transform:none;
}
section#order nav#order-breadcrump li.activate .link a{ color:#333; font-weight:700; }
section#order nav#order-breadcrump li.activate .link a:hover{ color:#000; }

/* ---------- Panier vide ---------- */
section#order #order-cart .call_to_action{
	float:none; width:auto; margin:0 0 4px; padding:30px 20px 28px;
	background:#f7f7f7; border-radius:12px; text-align:center;
}
section#order #order-cart .call_to_action .info2{ background:none; padding:0; }
section#order #order-cart .call_to_action .info2::before{
	content:""; display:block; width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 10.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1L20.5 8H6.3'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E") center/26px no-repeat;
	box-shadow:0 0 0 6px #eeeeee;
}
section#order #order-cart .call_to_action .info2 p{
	margin:0 !important; padding:0 !important; color:#555; font-size:15px; text-align:center;
}
section#order #order-cart .call_to_action .zc-catalogue{
	display:inline-block; margin-top:18px; padding:11px 22px; border-radius:8px;
	background:#aaf200; color:#1f2a00; text-decoration:none;
	font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:.5px; text-transform:uppercase;
	transition:background .15s ease;
}
section#order #order-cart .call_to_action .zc-catalogue:hover{ background:#9ee000; color:#1f2a00; }

/* ---------- Téléphone ---------- */
@media (max-width:479px){
	body:has(#main.block-center) p.breadcrumbs{ padding:16px 16px 0; }
	#main.block-center{ width:auto !important; max-width:none !important; margin:0 10px !important; }
	#main.block-center .post h1,
	section#order .post h1{ margin-top:24px; font-size:23px; }
}