/* ═══════════════════════════════════════════════════════════════
   WebTic — Standard Cart OrderForm — Design WebTic v2
   Navy #1e2a4a · Coral #c9485b · Rose #b44a7a · Font Outfit
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --wt-navy:   #1e2a4a;
  --wt-navy2:  #2d3f6e;
  --wt-coral:  #c9485b;
  --wt-rose:   #b44a7a;
  --wt-grad:   linear-gradient(135deg, #c9485b 0%, #b44a7a 100%);
  --wt-grad-h: linear-gradient(135deg, #1e2a4a 0%, #c9485b 100%);
  --wt-bg:     #f4f6fb;
  --wt-border: #e2e8f0;
}

/* ── Base ── */
body,
#order-standard_cart,
#order-standard_cart *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]) {
  font-family: 'Outfit', -apple-system, sans-serif !important;
}

body { background: var(--wt-bg) !important; }

/* ════════════════════════════════════════════
   LAYOUT STORE : sidebar 250px + contenu
   ════════════════════════════════════════════ */
.wt-store-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.wt-sidebar {
  width: 250px;
  min-width: 250px;
  flex-shrink: 0;
  padding-right: 20px;
  position: sticky;
  top: 20px;
}

.wt-content {
  flex: 1;
  min-width: 0;
}

/* Sidebar toujours ouverte */
.wt-sidebar .collapsable-card-body {
  display: block !important;
}

.wt-sidebar .panel-minimise,
.wt-sidebar .card-minimise {
  display: none !important;
}

.wt-sidebar .panel-heading,
.wt-sidebar .card-header {
  cursor: default !important;
}

/* ════════════════════════════════════════════
   SIDEBAR — Style général
   ════════════════════════════════════════════ */
.wt-sidebar .panel,
.wt-sidebar .card {
  border-radius: 14px !important;
  border: 1.5px solid var(--wt-border) !important;
  box-shadow: 0 2px 10px rgba(30,42,74,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
  margin-bottom: 16px !important;
}

.wt-sidebar .panel-heading,
.wt-sidebar .card-header {
  background: var(--wt-navy) !important;
  border-bottom: none !important;
  padding: 14px 18px !important;
}

.wt-sidebar .panel-title {
  font-weight: 700 !important;
  color: #fff !important;
  font-size: .95rem !important;
  letter-spacing: .3px !important;
}

.wt-sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--wt-border) !important;
  border-radius: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: .88rem !important;
  color: #374151 !important;
  padding: 11px 18px !important;
  transition: background .15s, color .15s, padding-left .15s !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wt-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

.wt-sidebar .list-group-item:hover {
  background: #f8f9fb !important;
  color: var(--wt-navy) !important;
  padding-left: 22px !important;
}

.wt-sidebar .list-group-item.active,
.wt-sidebar .list-group-item.active:hover {
  background: var(--wt-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Forcer le blanc sur les liens dans items actifs + boutons Commander
   (nécessaire car #order-standard_cart a { color: coral !important } l'emporte sinon) */
#order-standard_cart .wt-sidebar .list-group-item.active a,
#order-standard_cart .wt-sidebar .list-group-item.active:hover a {
  color: #fff !important;
}

#order-standard_cart .wt-btn-order,
#order-standard_cart .wt-btn-order:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #c9485b 0%, #b44a7a 100%) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════
   GRILLE PRODUITS — 3 colonnes
   ════════════════════════════════════════════ */
.wt-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ════════════════════════════════════════════
   CARTE PRODUIT
   ════════════════════════════════════════════ */
.wt-product-card {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid var(--wt-border);
  box-shadow: 0 2px 10px rgba(30,42,74,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .22s, transform .22s;
}

.wt-product-card:hover {
  box-shadow: 0 10px 28px rgba(30,42,74,.15);
  transform: translateY(-4px);
}

/* En-tête gradient navy→coral */
.wt-card-header {
  background: var(--wt-grad-h);
  padding: 18px 20px 16px;
}

.wt-card-name {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  display: block;
  line-height: 1.35;
}

.wt-qty {
  font-size: .72rem;
  color: rgba(255,255,255,.75);
  display: block;
  margin-top: 4px;
}

/* Corps de la carte */
.wt-card-body {
  padding: 16px 20px;
  flex: 1;
}

.wt-card-desc {
  font-size: .84rem;
  color: #6b7280;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  line-height: 1.5;
}

.wt-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wt-features li {
  padding: 3px 0;
  font-size: .82rem;
  color: #374151;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wt-feature-check {
  color: var(--wt-coral);
  font-weight: 700;
  flex-shrink: 0;
}

/* Pied de carte : prix + bouton */
.wt-card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--wt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wt-price-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wt-price-label {
  font-size: .72rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.wt-price {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--wt-coral);
  line-height: 1.1;
  white-space: nowrap;
}

.wt-price-contact {
  font-size: 1rem !important;
  color: var(--wt-navy) !important;
  font-weight: 700 !important;
}

.wt-price-cycle {
  font-size: .75rem;
  color: #9ca3af;
}

.wt-setup-fee {
  font-size: .72rem;
  color: #9ca3af;
}

/* Bouton Commander */
.wt-btn-order {
  background: var(--wt-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: box-shadow .2s, transform .2s !important;
  box-shadow: 0 3px 10px rgba(201,72,91,.28) !important;
  text-decoration: none !important;
}

.wt-btn-order:hover {
  box-shadow: 0 6px 18px rgba(201,72,91,.42) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.wt-btn-order i {
  margin-right: 6px;
}

/* ════════════════════════════════════════════
   TITRES + EN-TÊTE catégorie
   ════════════════════════════════════════════ */
.wt-tagline {
  color: #6b7280;
  font-size: .9rem;
  margin-top: 4px;
}

#order-standard_cart h1.font-size-36 {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--wt-navy) !important;
}

#order-standard_cart .header-lined {
  border-bottom: 2px solid var(--wt-border) !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
}

#order-standard_cart .header-lined h1 {
  color: var(--wt-navy) !important;
  font-weight: 800 !important;
}

/* ════════════════════════════════════════════
   BOUTONS généraux
   ════════════════════════════════════════════ */
.btn-primary,
button.btn-primary,
input[type=submit].btn-primary,
a.btn-primary {
  background: var(--wt-grad) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(201,72,91,.22) !important;
  transition: all .2s !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(201,72,91,.38) !important;
  transform: translateY(-1px) !important;
  background: var(--wt-grad) !important;
  color: #fff !important;
}

.btn-default, .btn-secondary, a.btn-default {
  border-radius: 10px !important;
  font-weight: 600 !important;
  border-color: var(--wt-border) !important;
}

.btn-info {
  background: var(--wt-navy) !important;
  border-color: var(--wt-navy) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   FORMULAIRES
   ════════════════════════════════════════════ */
.form-control,
input[type=text], input[type=email], input[type=password],
input[type=tel], select, textarea {
  border-radius: 8px !important;
  border: 1.5px solid var(--wt-border) !important;
  font-size: .9rem !important;
  color: #374151 !important;
  padding: 9px 12px !important;
  transition: border-color .2s, box-shadow .2s !important;
  background: #fff !important;
}

.form-control:focus,
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, select:focus, textarea:focus {
  border-color: var(--wt-coral) !important;
  box-shadow: 0 0 0 3px rgba(201,72,91,.1) !important;
}

label, .control-label {
  font-weight: 600 !important;
  color: var(--wt-navy) !important;
  font-size: .88rem !important;
}

/* ════════════════════════════════════════════
   PANELS / CARDS généraux
   ════════════════════════════════════════════ */
.panel {
  border-radius: 14px !important;
  border: 1.5px solid var(--wt-border) !important;
  box-shadow: 0 2px 10px rgba(30,42,74,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
}

.panel-default > .panel-heading {
  background: #fff !important;
  border-bottom: 2px solid var(--wt-coral) !important;
  font-weight: 700 !important;
  color: var(--wt-navy) !important;
  padding: 14px 18px !important;
}

.panel-body { padding: 20px !important; }

/* ════════════════════════════════════════════
   TABLEAU PANIER
   ════════════════════════════════════════════ */
.table > thead > tr > th {
  background: var(--wt-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  border: none !important;
  padding: 12px 14px !important;
}

.table > tbody > tr > td {
  font-size: .88rem !important;
  color: #374151 !important;
  border-color: #f0f0f5 !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:nth-child(even) > td { background: #f9fafb !important; }
.table > tbody > tr:hover > td { background: #fff5f6 !important; }

/* ════════════════════════════════════════════
   PRIX
   ════════════════════════════════════════════ */
.price, .product-price, .price-info .amount, .amount {
  color: var(--wt-coral) !important;
  font-weight: 800 !important;
}

.cart-total, .grand-total, tr.total td {
  font-weight: 800 !important;
  color: var(--wt-navy) !important;
  font-size: 1.05rem !important;
}

/* ════════════════════════════════════════════
   ALERTES
   ════════════════════════════════════════════ */
.alert { border-radius: 10px !important; font-size: .88rem !important; }
.alert-info {
  border-color: rgba(201,72,91,.2) !important;
  background: rgba(201,72,91,.04) !important;
  color: var(--wt-navy) !important;
}
.alert-success {
  border-color: rgba(5,150,105,.25) !important;
  background: rgba(5,150,105,.05) !important;
  color: #065f46 !important;
}

/* ════════════════════════════════════════════
   LIENS
   ════════════════════════════════════════════ */
#order-standard_cart a { color: var(--wt-coral) !important; transition: color .15s !important; }
#order-standard_cart a:hover { color: var(--wt-rose) !important; text-decoration: none !important; }

/* ════════════════════════════════════════════
   CHECKOUT / ÉTAPES
   ════════════════════════════════════════════ */
.checkout-steps .active .step-number,
.order-steps .active .step-number {
  background: var(--wt-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.progress-bar { background: var(--wt-grad) !important; }

/* ════════════════════════════════════════════
   ORDER SUMMARY
   ════════════════════════════════════════════ */
.order-summary, #orderSummaryContainer {
  background: #fff !important;
  border: 1.5px solid var(--wt-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════
   CODE PROMO
   ════════════════════════════════════════════ */
#promoinput, input#promoCode {
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
}

#btnApplyPromo, button[id*=promo] {
  background: var(--wt-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════
   MODAL RECOMMENDATIONS
   ════════════════════════════════════════════ */
.recommendations-modal .modal-header {
  background: var(--wt-navy) !important;
  color: #fff !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ════════════════════════════════════════════
   SOUS-HEADINGS
   ════════════════════════════════════════════ */
.sub-heading span.primary-bg-color {
  background: var(--wt-grad) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 4px 14px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   MOBILE SELECTOR (collapsed)
   ════════════════════════════════════════════ */
#btnSidebarCollapsed {
  border-radius: 8px !important;
  border-color: var(--wt-border) !important;
  color: var(--wt-navy) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .wt-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .wt-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wt-store-layout {
    flex-direction: column;
  }
  .wt-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    position: static !important;
  }
  .wt-products-grid {
    grid-template-columns: 1fr;
  }
  .wt-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .wt-btn-order {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MODE SOMBRE — PANIER (cart.php?a=view)          2026-07-25
   + refonte du bouton « Passer la commande » (clair ET sombre)

   Ce fichier se charge APRÈS templates/webtic/css/custom.css : il
   écrasait donc le mode sombre du template avec des couleurs claires
   codées en dur. Aucune règle [data-theme="dark"] n'y existait.

   Relevé exhaustif avant correctif (panier réel, 1 article, thème sombre) :
     .view-cart-items-header  rgb(244,246,251)
     .item                    rgb(255,255,255)
     .tab-content             rgb(248,248,248)
     #orderSummary            rgb(255,255,255)   <- texte clair = illisible
     .summary-container       rgb(248,248,248)   <- texte clair = illisible
     h1.font-size-36          texte rgb(30,42,74) sur fond rgb(10,15,26) → 1.35:1

   Palette alignée sur celle du template (custom.css lignes 1103-1115).
   ROLLBACK : supprimer ce bloc + remettre ?v=20260402c dans common.tpl
   ═══════════════════════════════════════════════════════════════ */

body[data-theme="dark"] {
  --wtc-bg:     #111827;   /* fond des conteneurs, = .panel du template */
  --wtc-bg2:    #1a2236;   /* en-têtes / zones secondaires */
  --wtc-bdr:    #1e2740;
  --wtc-t1:     #e8ecf4;
  --wtc-t2:     #8892a6;
  --wtc-coral:  #f2879a;   /* coral éclairci : lisible sur fond sombre */
}

/* ── 1. Titre de page ── */
body[data-theme="dark"] #order-standard_cart h1.font-size-36,
body[data-theme="dark"] #order-standard_cart h2.font-size-30,
body[data-theme="dark"] #order-standard_cart .header-lined h1,
body[data-theme="dark"] #order-standard_cart .header-lined h2 {
  color: var(--wtc-t1) !important;
}
body[data-theme="dark"] #order-standard_cart .header-lined {
  border-bottom-color: var(--wtc-bdr) !important;
}

/* ── 2. Conteneurs : liste produits + résumé de commande ── */
body[data-theme="dark"] .view-cart-items-header {
  background: var(--wtc-bg2) !important;
  border-color: var(--wtc-bdr) !important;
  color: var(--wtc-t1) !important;
}
body[data-theme="dark"] .view-cart-items-header div,
body[data-theme="dark"] .view-cart-items-header span {
  color: var(--wtc-t1) !important;   /* « Produits/Options » et « Prix/Cycle » */
}

body[data-theme="dark"] .view-cart-items .item,
body[data-theme="dark"] .view-cart-items-header + div,
body[data-theme="dark"] .tab-content,
body[data-theme="dark"] .order-summary,
body[data-theme="dark"] #orderSummary,
body[data-theme="dark"] #orderSummaryContainer,
body[data-theme="dark"] .summary-container,
body[data-theme="dark"] .secondary-cart-sidebar,
body[data-theme="dark"] .cart-sidebar .panel {
  background: var(--wtc-bg) !important;
  border-color: var(--wtc-bdr) !important;
  color: var(--wtc-t1) !important;
}

/* Séparateurs internes du résumé */
body[data-theme="dark"] .summary-container hr,
body[data-theme="dark"] .order-summary hr,
body[data-theme="dark"] .view-cart-items .item {
  border-color: var(--wtc-bdr) !important;
}
body[data-theme="dark"] .summary-container .text-muted,
body[data-theme="dark"] .order-summary .text-muted,
body[data-theme="dark"] .view-cart-items .item small {
  color: var(--wtc-t2) !important;
}

/* Champs de saisie du panier (le fichier force background:#fff plus haut) */
body[data-theme="dark"] #order-standard_cart .form-control,
body[data-theme="dark"] #order-standard_cart input[type=text],
body[data-theme="dark"] #order-standard_cart input[type=email],
body[data-theme="dark"] #order-standard_cart select,
body[data-theme="dark"] #order-standard_cart textarea {
  background: #1a2234 !important;
  border-color: #2a3450 !important;
  color: var(--wtc-t1) !important;
}

/* ═══ 3. Bouton « Passer la commande » ═══════════════════════════
   Contour net + remplissage au survol. Même comportement dans les
   deux thèmes, seule la teinte du coral change pour rester lisible. */

#order-standard_cart a#checkout.btn,
#order-standard_cart .btn-checkout,
a#checkout.btn.btn-success {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid #b8405a !important;   /* coral foncé charte : 5.04:1 en thème clair */
  color: #b8405a !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .18s ease !important;
}

#order-standard_cart a#checkout.btn:hover,
#order-standard_cart a#checkout.btn:focus,
a#checkout.btn.btn-success:hover,
a#checkout.btn.btn-success:focus {
  background: #b8405a !important;
  border-color: #b8405a !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(201,72,91,.32) !important;
  transform: translateY(-1px) !important;
}

#order-standard_cart a#checkout.btn:active,
a#checkout.btn.btn-success:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(201,72,91,.28) !important;
}

#order-standard_cart a#checkout.btn:focus-visible,
a#checkout.btn.btn-success:focus-visible {
  outline: 3px solid rgba(201,72,91,.35) !important;
  outline-offset: 2px !important;
}

#order-standard_cart a#checkout.btn.disabled,
a#checkout.btn.btn-success.disabled,
a#checkout.btn.btn-success[disabled] {
  opacity: .45 !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Variante sombre : coral éclairci pour le contraste sur #111827 */
body[data-theme="dark"] #order-standard_cart a#checkout.btn,
body[data-theme="dark"] .btn-checkout,
body[data-theme="dark"] a#checkout.btn.btn-success {
  border-color: var(--wtc-coral) !important;
  color: var(--wtc-coral) !important;
}
body[data-theme="dark"] #order-standard_cart a#checkout.btn:hover,
body[data-theme="dark"] #order-standard_cart a#checkout.btn:focus,
body[data-theme="dark"] a#checkout.btn.btn-success:hover,
body[data-theme="dark"] a#checkout.btn.btn-success:focus {
  background: var(--wtc-coral) !important;
  border-color: var(--wtc-coral) !important;
  color: #111827 !important;
  box-shadow: 0 6px 18px rgba(242,135,154,.28) !important;
}

/* ── Titre du résumé de commande (2026-07-25) ────────────────────
   `all.min.css` impose `#order-standard_cart .order-summary h2 {color:#fff}`
   (prévu pour un bandeau coloré). La box étant blanche dans le design WebTic,
   ce blanc était jusqu'ici masqué par le `h1..h6 {color:… !important}` de
   templates/webtic/css/custom.css. Ce !important ayant été retiré, on donne
   au titre sa couleur explicite. Même sélecteur que l'origine mais chargé
   après → pas besoin de !important. Le thème sombre est déjà traité plus haut. */
#order-standard_cart .order-summary h2,
#order-standard_cart .summary-container h2 {
  color: #1e2a4a;
}