/* =============================================================================
   ZetHeberge — Thème client WHMCS (design maison)
   Réécriture visuelle complète par-dessus la structure twenty-one (Bootstrap 4.5)
   Couleurs / typographie alignées sur le site vitrine.
   ============================================================================= */

:root{
  --zh-primary:#4f46e5; --zh-primary-hover:#4338ca; --zh-primary-soft:#eef0ff;
  --zh-accent:#0ea5e9; --zh-ink:#0d1117;
  --zh-text:#0f172a; --zh-text-soft:#4a5568; --zh-text-mute:#5b6678;
  --zh-bg:#f6f7fb; --zh-surface:#ffffff; --zh-border:#e7eaf0;
  --zh-radius:16px; --zh-radius-sm:10px;
  --zh-shadow:0 4px 24px rgba(15,23,42,.06); --zh-shadow-lg:0 18px 50px rgba(15,23,42,.12);
  --zh-font:'Inter',system-ui,-apple-system,sans-serif;
  --zh-display:'Space Grotesk','Inter',sans-serif;
}

/* ---------- Base ---------- */
body{ font-family:var(--zh-font); color:var(--zh-text); background:var(--zh-bg); }
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.card-title,.panel-title{
  font-family:var(--zh-display); font-weight:600; letter-spacing:-.015em; color:var(--zh-text);
}
a{ color:var(--zh-primary); }
a:hover,a:focus{ color:var(--zh-primary-hover); }
hr{ border-color:var(--zh-border); }
.text-muted{ color:var(--zh-text-mute)!important; }
.container{ max-width:1140px; }

/* ---------- En-tête / navbar ---------- */
#header, .header{ background:var(--zh-surface)!important; border-bottom:1px solid var(--zh-border);
  box-shadow:0 1px 3px rgba(15,23,42,.05); }
.topbar{ background:var(--zh-ink)!important; color:#c7ced9; font-size:.85rem; }
.topbar a{ color:#c7ced9; }
.topbar a:hover{ color:#fff; }
#nav, #mainNavbar, .navbar{ background:transparent!important; }
.navbar-nav .nav-link, #nav .nav-link{ color:var(--zh-text-soft)!important; font-weight:500; border-radius:8px; padding:.5rem .9rem!important; }
.navbar-nav .nav-link:hover, #nav .nav-link:hover{ color:var(--zh-primary)!important; background:var(--zh-primary-soft); }
.navbar-nav .nav-item.active>.nav-link, .navbar-nav .nav-link.active{ color:var(--zh-primary)!important; }
.navbar-brand img, #logo img{ max-height:44px; width:auto; }
.dropdown-menu{ border:1px solid var(--zh-border); border-radius:12px; box-shadow:var(--zh-shadow); padding:.4rem; }
.dropdown-item{ border-radius:8px; padding:.5rem .8rem; }
.dropdown-item:hover{ background:var(--zh-primary-soft); color:var(--zh-primary); }

/* ---------- Boutons ---------- */
.btn{ border-radius:10px; font-weight:600; }
.btn-primary{ background:var(--zh-primary); border-color:var(--zh-primary);
  box-shadow:0 8px 18px -8px rgba(79,70,229,.6); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{ background:var(--zh-primary-hover)!important; border-color:var(--zh-primary-hover)!important;
  box-shadow:0 0 0 .2rem rgba(79,70,229,.3)!important; }
.btn-outline-primary{ color:var(--zh-primary); border-color:var(--zh-primary); }
.btn-outline-primary:hover{ background:var(--zh-primary); border-color:var(--zh-primary); color:#fff; }
.btn-secondary{ background:#eef1f6; border-color:#eef1f6; color:var(--zh-text); }
.btn-success{ background:#16a34a; border-color:#16a34a; }

/* ---------- Cartes ---------- */
.card{ border:1px solid var(--zh-border); border-radius:var(--zh-radius); box-shadow:var(--zh-shadow);
  transition:transform .18s ease, box-shadow .18s ease; overflow:hidden; }
.card-columns.home .card:hover, .pricing .card:hover{ transform:translateY(-4px); box-shadow:var(--zh-shadow-lg); border-color:#d7dbf7; }
.card-header{ background:var(--zh-surface); border-bottom:1px solid var(--zh-border); font-weight:600; }
.card-columns.home .card{ position:relative; }
.card-columns.home .card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--zh-primary),var(--zh-accent)); }
.pricing-card-title{ font-family:var(--zh-display); }

/* ---------- Panneaux (legacy) ---------- */
.panel{ border:1px solid var(--zh-border); border-radius:var(--zh-radius); box-shadow:var(--zh-shadow); }
.panel-heading{ background:#f8f9fc; border-bottom:1px solid var(--zh-border); font-weight:600; border-radius:var(--zh-radius) var(--zh-radius) 0 0; }
.panel-primary{ border-color:var(--zh-primary); }
.panel-primary>.panel-heading{ background:var(--zh-primary); border-color:var(--zh-primary); color:#fff; }

/* ---------- HERO maison (homepage) ---------- */
.zh-hero{ background:radial-gradient(120% 140% at 15% 0%, #4f46e5 0%, #4338ca 45%, #1e1b4b 100%);
  color:#fff; border-radius:24px; padding:clamp(2rem,5vw,4rem); margin:1.5rem 0 2.5rem;
  position:relative; overflow:hidden; box-shadow:var(--zh-shadow-lg); }
.zh-hero::after{ content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(14,165,233,.45), transparent 70%); }
.zh-hero h1{ color:#fff; font-size:clamp(1.8rem,4vw,2.8rem); margin:0 0 .6rem; }
.zh-hero p{ color:#dfe2ff; font-size:1.1rem; max-width:60ch; }
.zh-hero .btn-light{ background:#fff; color:var(--zh-primary); border:0; font-weight:700; }
.zh-hero .btn-outline-light{ border-color:rgba(255,255,255,.6); color:#fff; }
.zh-hero .zh-hero__badges{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.4rem; font-size:.9rem; color:#c7ccff; position:relative; }
.zh-hero .zh-hero__badges span{ display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- « Comment pouvons-nous aider » ---------- */
.action-icon-btns .card-accent-teal, .action-icon-btns a{ display:block; text-align:center;
  background:var(--zh-surface); border:1px solid var(--zh-border); border-radius:var(--zh-radius);
  padding:1.4rem .8rem; color:var(--zh-text-soft); font-weight:600; box-shadow:var(--zh-shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.action-icon-btns a:hover{ transform:translateY(-3px); border-color:var(--zh-primary); color:var(--zh-primary); text-decoration:none; box-shadow:var(--zh-shadow-lg); }
.action-icon-btns .ico-container{ width:56px; height:56px; margin:0 auto .7rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;
  background:linear-gradient(135deg,var(--zh-primary),var(--zh-accent)); }
.action-icon-btns i{ color:#fff; }

/* ---------- Tunnel de commande ---------- */
.cart-breadcrumb .active, .order-steps .active, .checkout-step.active{ color:var(--zh-primary); }
.product .price, .package .price, .cycle-options .amount, .total-due .amount, .pricing .price{ color:var(--zh-primary); }
.product.featured, .package.recommended, .pricing .featured{ border:2px solid var(--zh-primary)!important;
  box-shadow:0 16px 50px -16px rgba(79,70,229,.45)!important; }
.ribbon, .recommended-badge, .badge-recommended{ background:var(--zh-primary)!important; color:#fff; }
.product:hover, .package:hover{ border-color:var(--zh-primary); }

/* ---------- Formulaires ---------- */
.form-control, .custom-select{ border-radius:10px; border-color:var(--zh-border); }
.form-control:focus, .custom-select:focus{ border-color:var(--zh-primary); box-shadow:0 0 0 .2rem rgba(79,70,229,.18); }
.custom-control-input:checked~.custom-control-label::before{ background:var(--zh-primary); border-color:var(--zh-primary); }

/* ---------- Tableaux ---------- */
.table thead th{ font-family:var(--zh-display); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--zh-text-soft); border-bottom:2px solid var(--zh-border); }
.table td,.table th{ border-color:var(--zh-border); }
.table-hover tbody tr:hover{ background:var(--zh-primary-soft); }

/* ---------- Badges / alertes ---------- */
.badge-primary,.label-primary{ background:var(--zh-primary); }
.text-primary{ color:var(--zh-primary)!important; }
.bg-primary{ background:var(--zh-primary)!important; }
.border-primary{ border-color:var(--zh-primary)!important; }
.alert-info{ background:var(--zh-primary-soft); border-color:#dce0ff; color:#312e81; }
.alert-success{ background:#eafaf0; border-color:#cdeed8; color:#14532d; }
.list-group-item.active{ background:var(--zh-primary); border-color:var(--zh-primary); }

/* ---------- Sidebar espace client ---------- */
.sidebar .list-group-item, .panel-sidebar .list-group-item{ border:0; border-radius:10px; margin-bottom:2px; color:var(--zh-text-soft); }
.sidebar .list-group-item.active, .panel-sidebar .active a{ background:var(--zh-primary-soft); color:var(--zh-primary); border-left:3px solid var(--zh-primary); }

/* ---------- Pagination ---------- */
.pagination .page-link{ color:var(--zh-primary); border-radius:8px; margin:0 2px; border-color:var(--zh-border); }
.pagination .page-item.active .page-link{ background:var(--zh-primary); border-color:var(--zh-primary); }

/* ---------- Pied de page ---------- */
#footer, .footer{ background:var(--zh-ink); color:#c7ced9; margin-top:3rem; }
#footer a, .footer a{ color:#c7ced9; }
#footer a:hover, .footer a:hover{ color:#fff; }
.footer .text-muted{ color:#8b94a6!important; }

/* ---------- Accessibilité (cohérent vitrine) ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--zh-primary); outline-offset:2px;
}

/* ---------- Pied de page façon vitrine ---------- */
.site-footer-zh{ background:var(--zh-ink); color:#c7ced9; padding:3rem 0 1.5rem; margin-top:3rem; }
.footer-grid-zh{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2rem; }
@media (max-width:900px){ .footer-grid-zh{ grid-template-columns:1fr 1fr; } .footer-brand-zh{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid-zh{ grid-template-columns:1fr; } }
.footer-logo-zh{ height:34px; width:auto; margin-bottom:.9rem; }
.footer-tag-zh{ color:#aeb6c4; max-width:34ch; font-size:.95rem; margin:.2rem 0 .6rem; }
.footer-climate-zh{ color:#38bdf8; font-size:.85rem; margin:0; }
.footer-col-zh h2{ font-family:var(--zh-display); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#8b94a6; margin:0 0 .9rem; }
.footer-col-zh ul{ list-style:none; padding:0; margin:0; }
.footer-col-zh li{ margin-bottom:.55rem; }
.footer-col-zh a{ color:#c7ced9; font-size:.92rem; text-decoration:none; }
.footer-col-zh a:hover{ color:#fff; }
.footer-bottom-zh{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; color:#8b94a6; }
.footer-bottom-zh .copyright{ color:#8b94a6; }
.footer-tools-zh{ display:flex; align-items:center; gap:.4rem; }
.footer-tools-zh .btn{ color:#c7ced9; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; }
.footer-tools-zh .btn:hover{ color:#fff; background:rgba(255,255,255,.12); }
.footer-tos{ color:#c7ced9; }
.footer-tos:hover{ color:#fff; }

/* =============================================================================
   Affichage des offres (order form « standard_cart ») façon vitrine
   ============================================================================= */
#order-standard_cart .header-lined h1{ font-family:var(--zh-display); }
#order-standard_cart .products .row{ gap:0; }
#order-standard_cart .product{
  background:var(--zh-surface); border:1px solid var(--zh-border); border-radius:var(--zh-radius);
  box-shadow:var(--zh-shadow); padding:1.6rem 1.5rem; margin-bottom:1.6rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative; overflow:hidden;
}
#order-standard_cart .product:hover{ transform:translateY(-4px); box-shadow:var(--zh-shadow-lg); border-color:#d7dbf7; }
#order-standard_cart .product::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--zh-primary),var(--zh-accent)); opacity:0; transition:opacity .18s; }
#order-standard_cart .product:hover::before{ opacity:1; }
#order-standard_cart .product>header{ font-family:var(--zh-display); font-size:1.25rem; font-weight:600;
  color:var(--zh-text); margin-bottom:.6rem; }
#order-standard_cart .product .qty{ font-size:.78rem; color:var(--zh-text-mute); font-weight:500; }
#order-standard_cart .product-desc{ color:var(--zh-text-soft); font-size:.93rem; }
#order-standard_cart .product-desc ul{ list-style:none; padding:0; margin:.6rem 0 0; }
#order-standard_cart .product-desc ul li{ padding:.32rem 0 .32rem 1.5rem; position:relative; border-bottom:1px solid var(--zh-border-soft,#f0f2f6); }
#order-standard_cart .product-desc ul li::before{ content:"\2713"; position:absolute; left:0; color:var(--zh-primary); font-weight:700; }
#order-standard_cart .product .price{ font-family:var(--zh-display); font-size:1.8rem; font-weight:700; color:var(--zh-text); display:block; margin-top:1.1rem; }
#order-standard_cart .product .price + *{ color:var(--zh-text-mute); font-size:.9rem; }
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-order-now:focus{ display:block; width:100%; margin-top:1.2rem;
  background:var(--zh-primary); border-color:var(--zh-primary); color:#fff!important; font-weight:600; padding:.7rem 1rem; border-radius:10px; text-decoration:none; }
#order-standard_cart .btn-order-now:hover{ background:var(--zh-primary-hover); border-color:var(--zh-primary-hover); }
/* Offre mise en avant */
#order-standard_cart .product.featured, #order-standard_cart .product.recommended{
  border:2px solid var(--zh-primary); box-shadow:0 16px 50px -16px rgba(79,70,229,.45); }
/* Barre latérale catégories */
#order-standard_cart .cart-sidebar .list-group-item.active{ background:var(--zh-primary-soft); color:var(--zh-primary); border-left:3px solid var(--zh-primary); }