/* =========================================================================
   ODOIP — Lagom2 theme overrides
   Charge ce fichier APRÈS theme.css et site.css dans head.tpl
   Désactivation = simple commentaire de la balise <link>
   ========================================================================= */

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

:root {
  --odoip-blue:        #05308C;
  --odoip-blue-700:    #032777;
  --odoip-blue-500:    #2A57B8;
  --odoip-blue-100:    #E2E9F6;
  --odoip-blue-050:    #F1F4FB;
  --odoip-red:         #D22809;
  --odoip-red-700:     #A81E05;
  --font-display:      'Montserrat', system-ui, sans-serif;
  --font-body:         'Inter', system-ui, sans-serif;
}

/* === Typography globale === */
body, .lagom-body, .layout-body {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .panel-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* === Couleurs primaire = ODOIP Blue === */
.btn-primary,
.btn.btn-primary {
  background-color: var(--odoip-blue) !important;
  border-color: var(--odoip-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover {
  background-color: var(--odoip-blue-700) !important;
  border-color: var(--odoip-blue-700) !important;
  box-shadow: 0 4px 12px rgba(5, 48, 140, 0.18) !important;
}

.btn-outline-primary {
  color: var(--odoip-blue) !important;
  border-color: var(--odoip-blue) !important;
}
.btn-outline-primary:hover {
  background-color: var(--odoip-blue) !important;
  border-color: var(--odoip-blue) !important;
  color: #fff !important;
}

.text-primary, a.text-primary { color: var(--odoip-blue) !important; }
.bg-primary { background-color: var(--odoip-blue) !important; }
.border-primary { border-color: var(--odoip-blue) !important; }

/* === Couleur accent (rouge) pour CTA secondaires === */
.btn-danger, .btn-accent {
  background-color: var(--odoip-red) !important;
  border-color: var(--odoip-red) !important;
}
.btn-danger:hover, .btn-accent:hover {
  background-color: var(--odoip-red-700) !important;
  border-color: var(--odoip-red-700) !important;
}
.text-danger { color: var(--odoip-red) !important; }
.bg-danger { background-color: var(--odoip-red) !important; }

/* === Liens === */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--odoip-blue);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--odoip-red);
}

/* === Sidebar (menu espace client) — on garde la structure, on adapte les couleurs === */
.sidebar,
.lagom-sidebar,
.layout-sidebar,
aside.sidebar {
  background: var(--odoip-blue) !important;
}
.sidebar a,
.sidebar .nav-link,
.lagom-sidebar a,
.lagom-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  transition: color 200ms;
}
.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar .active,
.sidebar .nav-link.active,
.lagom-sidebar a:hover,
.lagom-sidebar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* === Cards === */
.card, .panel {
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 2px rgba(5, 48, 140, 0.06);
  transition: box-shadow 200ms ease-out;
}
.card:hover, .panel:hover {
  box-shadow: 0 4px 12px rgba(5, 48, 140, 0.08);
}

.card-header, .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #E5E7EB !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
}

/* === Forms === */
.form-control:focus, .form-select:focus {
  border-color: var(--odoip-blue) !important;
  box-shadow: 0 0 0 3px rgba(5, 48, 140, 0.15) !important;
}

/* === Badges === */
.badge.bg-primary, .badge-primary { background-color: var(--odoip-blue) !important; }
.badge.bg-danger, .badge-danger { background-color: var(--odoip-red) !important; }

/* === Alertes === */
.alert-primary {
  background: var(--odoip-blue-050) !important;
  border-color: var(--odoip-blue-100) !important;
  color: var(--odoip-blue-700) !important;
}
.alert-danger {
  background: #FBDDD7 !important;
  border-color: #F5BBB1 !important;
  color: var(--odoip-red-700) !important;
}

/* === Tables === */
.table thead th {
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6B7280;
}

/* === Page header / breadcrumb === */
.page-header, .breadcrumb {
  background: var(--odoip-blue-050);
  border-radius: 12px;
}
.breadcrumb-item.active { color: var(--odoip-blue) !important; }

/* === Buttons radius cohérent === */
.btn { border-radius: 8px !important; padding: 10px 20px; font-weight: 600; }
.btn-lg { padding: 13px 24px; }
.btn-sm { padding: 6px 14px; }

/* === Tooltips, popovers (cohérence) === */
.tooltip-inner { background: var(--odoip-blue) !important; }
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[x-placement^=top] .tooltip-arrow::before { border-top-color: var(--odoip-blue) !important; }

/* === Switcher de thème (Lagom dark/light) — assure cohérence === */
.theme-toggle, .theme-switcher {
  color: var(--odoip-blue) !important;
}

/* =========================================================================
   CART / CATALOGUE PRODUIT — Refonte cards Lagom
   ========================================================================= */

/* Container global panier — fond léger pour faire ressortir les cards */
body.bodyCart, body.bodyOrderForm {
  background: var(--gray-050) !important;
}

/* Titre de la catégorie */
.headline.truncate, h1.headline, .container > h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--fg-1) !important;
  letter-spacing: -0.02em;
  margin-bottom: 24px !important;
}

/* === Sidebar catégories === */
.panel.panel-sidebar,
.categories-sidebar {
  background: var(--odoip-blue) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.panel.panel-sidebar .panel-heading,
.categories-sidebar .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 22px 14px !important;
}
.panel.panel-sidebar .list-group-item,
.categories-sidebar .list-group-item,
.panel.panel-sidebar a.list-group-item {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
  border-left: 3px solid transparent !important;
  transition: all 200ms;
}
.panel.panel-sidebar .list-group-item:hover,
.categories-sidebar .list-group-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.panel.panel-sidebar .list-group-item.active,
.categories-sidebar .list-group-item.active {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-left-color: var(--odoip-red) !important;
  font-weight: 700 !important;
}
.panel.panel-sidebar .list-group-item i,
.panel.panel-sidebar .list-group-item .fa,
.panel.panel-sidebar .list-group-item .fas {
  margin-right: 10px;
  opacity: 0.9;
  width: 18px;
}

/* === Cards produit (.package) — refonte complète === */
.package {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms !important;
  margin-bottom: 24px !important;
}
.package:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
  border-color: transparent !important;
}

/* Header de card */
.package-header {
  background: linear-gradient(180deg, #fff 0%, var(--odoip-blue-050) 100%) !important;
  border-bottom: 1px solid var(--border-1) !important;
  padding: 28px 28px 22px !important;
  text-align: center;
}
.package-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--fg-1) !important;
  letter-spacing: -0.02em;
  margin: 0 0 14px !important;
}

/* Prix */
.package-price,
.package .price,
.package-header .price {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  color: var(--odoip-blue) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 !important;
}
.package-price .currency,
.price .currency,
.package-price small,
.package-price .breakdown-price {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--fg-2) !important;
  font-weight: 500 !important;
  display: block;
  margin-top: 6px;
  letter-spacing: 0;
}

/* Body de card (description) */
.package-body,
.package-content {
  padding: 24px 28px !important;
  color: var(--fg-1);
  font-size: 14.5px;
  line-height: 1.65;
}
.package-body p {
  margin-bottom: 12px;
}

/* Footer de card (bouton) */
.package-footer,
.package-side {
  padding: 0 28px 28px !important;
  background: transparent !important;
}

/* Bouton "Commandez maintenant" */
.btn-order-now,
.btn.btn-order-now,
.btn.btn-primary.btn-order-now,
.package .btn-primary,
.package .btn.btn-primary {
  background: var(--odoip-blue) !important;
  border-color: var(--odoip-blue) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  width: 100% !important;
  transition: all 200ms !important;
  box-shadow: 0 1px 2px rgba(5, 48, 140, 0.15);
}
.btn-order-now:hover,
.package .btn-primary:hover {
  background: var(--odoip-red) !important;
  border-color: var(--odoip-red) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(210, 40, 9, 0.25) !important;
}

/* Mise en avant 1ère card visible (ex: Trunk 10 = "le plus populaire") */
.row.row-eq-height > div:nth-child(2) .package,
.row.row-eq-height-sm > div:nth-child(2) .package {
  border: 2px solid var(--odoip-blue) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative;
}
.row.row-eq-height > div:nth-child(2) .package::before,
.row.row-eq-height-sm > div:nth-child(2) .package::before {
  content: "Le plus populaire";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--odoip-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 6px;
  z-index: 1;
  white-space: nowrap;
}
.row.row-eq-height > div:nth-child(2) .package .btn-order-now,
.row.row-eq-height-sm > div:nth-child(2) .package .btn-primary {
  background: var(--odoip-red) !important;
  border-color: var(--odoip-red) !important;
}
.row.row-eq-height > div:nth-child(2) .package .btn-order-now:hover {
  background: var(--odoip-red-700) !important;
  border-color: var(--odoip-red-700) !important;
}

/* Cycle (mensuel/annuel) selector — onglets en haut */
.billing-cycles, .cycles-tabs, .nav-tabs.cycle-tabs {
  margin-bottom: 24px !important;
}
.nav-tabs.cycle-tabs .nav-link.active,
.billing-cycles .active {
  border-bottom-color: var(--odoip-blue) !important;
  color: var(--odoip-blue) !important;
}

/* Headers de tableaux comparaison features */
.compare-features th {
  background: var(--odoip-blue-050) !important;
  color: var(--odoip-blue-700) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Action sidebar (renouvellement, transfert, etc.) */
.actions-sidebar, .panel-action {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-sm);
  margin-top: 16px;
}
.actions-sidebar .list-group-item, .panel-action .list-group-item {
  border: none !important;
  color: var(--fg-1) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  padding: 12px 22px !important;
}
.actions-sidebar .list-group-item:hover {
  color: var(--odoip-blue) !important;
  background: var(--odoip-blue-050) !important;
}
.actions-sidebar .list-group-item i {
  color: var(--odoip-blue) !important;
  margin-right: 10px;
  width: 18px;
}

/* =========================================================================
   ODOIP — Cart-specific overrides (scope: body.page-order, body.page-viewcart)
   Restyle uniquement les pages /cart.php — clientarea/login restent intacts
   ========================================================================= */

body.page-order {
  background: var(--bg-2, #F4F6FA) !important;
}

/* === Topbar Lagom2 sur cart : couleurs ODOIP === */
body.page-order #header,
body.page-order .top-bar,
body.page-order .lagom-header,
body.page-order .top-secondary {
  background: var(--odoip-blue) !important;
  border-bottom: 0 !important;
}
body.page-order #header a,
body.page-order .top-bar a {
  color: rgba(255,255,255,.92) !important;
}
body.page-order #header a:hover {
  color: #fff !important;
}

/* === Hero / page header bleu === */
body.page-order .main-header,
body.page-order .page-header-main,
body.page-order .page-header-content {
  background: linear-gradient(180deg, var(--odoip-blue) 0%, var(--odoip-blue-700) 100%) !important;
  color: #fff !important;
  padding: 40px 0 !important;
}
body.page-order .main-header-title,
body.page-order .page-header-title,
body.page-order .main-header h1 {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  font-size: 36px !important;
}

/* === Body content backgrounds === */
body.page-order .main-body,
body.page-order #order-standard_cart,
body.page-order #order-lagom2 {
  background: var(--bg-2, #F4F6FA) !important;
}

/* === Cards / panels du panier === */
body.page-order .panel,
body.page-order .card,
body.page-order .order-summary,
body.page-order .order-form-section,
body.page-order .order-summary-content,
body.page-order .product-block {
  background: #fff !important;
  border: 1px solid var(--border-1, #E5E9F0) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.page-order .panel-heading,
body.page-order .card-header,
body.page-order .order-summary-header {
  background: var(--odoip-blue, #05308C) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 22px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
}
body.page-order .panel-heading *,
body.page-order .card-header *,
body.page-order .order-summary-header *,
body.page-order .panel-heading h1,
body.page-order .panel-heading h2,
body.page-order .panel-heading h3,
body.page-order .panel-heading h4,
body.page-order .panel-heading .panel-title,
body.page-order .card-header .card-title,
body.page-order .order-summary-header .order-summary-title {
  color: #fff !important;
}

/* === Order summary panel : redéfinir les CSS variables Lagom2 dans le scope === */
body.page-order #orderSummary,
body.page-order .panel-summary,
body.page-order .panel-summary-primary,
body.page-order .order-summary {
  --primary-block-color: #0E1B2C !important;
  --primary-block-text-color: #0E1B2C !important;
  --primary-block-text-faded-color: #4A5568 !important;
  --text-faded-color: #4A5568 !important;
  --primary-block-bg: #ffffff !important;
  --secondary-block-text-color: #0E1B2C !important;
  --secondary-block-text-color-faded: #4A5568 !important;
  background: #fff !important;
  color: #0E1B2C !important;
}
/* Tout le body du panneau summary : texte sombre forcé sur tous les enfants */
body.page-order #orderSummary .panel-body,
body.page-order #orderSummary .panel-body *,
body.page-order #orderSummary .summary-content,
body.page-order #orderSummary .summary-content *,
body.page-order #orderSummary .summary-list,
body.page-order #orderSummary .summary-list *,
body.page-order #orderSummary li,
body.page-order #orderSummary span,
body.page-order #orderSummary div,
body.page-order #orderSummary p,
body.page-order #orderSummary a,
body.page-order #orderSummary .item-name,
body.page-order #orderSummary .item-value,
body.page-order #orderSummary .list-item,
body.page-order #orderSummary .list-item.faded,
body.page-order #orderSummary .list-item.faded *,
body.page-order #orderSummary .summary-totals,
body.page-order #orderSummary .summary-totals *,
body.page-order #orderSummary [data-subtotal],
body.page-order #orderSummary [data-subtotal] * {
  color: #0E1B2C !important;
  opacity: 1 !important;
}
/* Lignes "faded" Lagom2 : on garde un gris secondaire (au lieu de blanc transparent) */
body.page-order #orderSummary .list-item.faded {
  color: #4A5568 !important;
}
body.page-order #orderSummary .list-item.faded .item-name,
body.page-order #orderSummary .list-item.faded .item-value {
  color: #4A5568 !important;
}
/* Le total final : bleu ODOIP en gras pour faire ressortir */
body.page-order #orderSummary .summary-list-total .item-value,
body.page-order #orderSummary #recurringMonthly .item-value,
body.page-order #orderSummary #recurringAnnually .item-value,
body.page-order #orderSummary #recurringQuarterly .item-value,
body.page-order #orderSummary #recurringSemiAnnually .item-value,
body.page-order #orderSummary #recurringBiennially .item-value,
body.page-order #orderSummary .summary-total-amount,
body.page-order #orderSummary [data-total] {
  color: #05308C !important;
  font-weight: 800 !important;
}
/* Séparateurs */
body.page-order #orderSummary hr,
body.page-order #orderSummary .summary-divider,
body.page-order #orderSummary .summary-list {
  border-color: #E5E9F0 !important;
}
/* Icônes SVG dans le summary */
body.page-order #orderSummary svg path,
body.page-order #orderSummary svg rect {
  fill: #4A5568 !important;
}
/* Bouton "Place Order" / "Passer la commande" : style ODOIP rouge quand actif */
body.page-order #orderSummary .btn-checkout,
body.page-order #orderSummary #checkout {
  background: var(--odoip-red, #D22809) !important;
  border-color: var(--odoip-red, #D22809) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 22px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-order #orderSummary .btn-checkout:disabled,
body.page-order #orderSummary .btn-checkout.disabled,
body.page-order #orderSummary #checkout:disabled {
  background: rgba(210, 40, 9, .35) !important;
  border-color: rgba(210, 40, 9, .35) !important;
  cursor: not-allowed !important;
}
body.page-order #orderSummary .btn-checkout:hover:not(:disabled),
body.page-order #orderSummary #checkout:hover:not(:disabled) {
  background: #B82208 !important;
  border-color: #B82208 !important;
}

/* === Buttons === */
body.page-order .btn-primary,
body.page-order .btn-info,
body.page-order .checkout-btn,
body.page-order button[type=submit].btn {
  background: var(--odoip-blue) !important;
  border-color: var(--odoip-blue) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 12px 22px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 200ms !important;
}
body.page-order .btn-primary:hover,
body.page-order .btn-info:hover,
body.page-order .checkout-btn:hover,
body.page-order button[type=submit].btn:hover {
  background: var(--odoip-blue-700) !important;
  border-color: var(--odoip-blue-700) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(5, 48, 140, .15) !important;
}
body.page-order .btn-success,
body.page-order .btn-checkout-final,
body.page-order .complete-order-btn,
body.page-order .place-order-btn {
  background: var(--odoip-red) !important;
  border-color: var(--odoip-red) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
body.page-order .btn-success:hover {
  background: var(--odoip-red-700, #B82208) !important;
  border-color: var(--odoip-red-700, #B82208) !important;
}
body.page-order .btn-default,
body.page-order .btn-secondary,
body.page-order .btn-light {
  background: #fff !important;
  border: 1px solid var(--border-1) !important;
  color: var(--fg-1, #0E1B2C) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* === Inputs === */
body.page-order input.form-control,
body.page-order select.form-control,
body.page-order textarea.form-control,
body.page-order .form-control {
  border: 1px solid var(--border-1) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color 150ms !important;
}
body.page-order .form-control:focus {
  border-color: var(--odoip-blue) !important;
  box-shadow: 0 0 0 3px rgba(5, 48, 140, .12) !important;
  outline: none !important;
}
body.page-order label,
body.page-order .control-label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* === Tables === */
body.page-order .table thead th {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--fg-2, #4A5568) !important;
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border-1) !important;
  padding: 14px 18px !important;
}
body.page-order .table tbody td {
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  border-bottom: 1px solid var(--border-1) !important;
}

/* === Sidebar (catégories produits) === */
body.page-order .sidebar,
body.page-order .order-sidebar,
body.page-order .cart-sidebar {
  background: #fff !important;
  border: 1px solid var(--border-1) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  overflow: hidden !important;
}
body.page-order .sidebar .list-group-item,
body.page-order .order-sidebar a {
  border: 0 !important;
  border-bottom: 1px solid var(--border-1) !important;
  padding: 14px 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--fg-1) !important;
  border-radius: 8px !important;
  background: transparent !important;
}
body.page-order .sidebar .list-group-item:last-child {
  border-bottom: 0 !important;
}
body.page-order .sidebar .list-group-item:hover,
body.page-order .order-sidebar a:hover {
  background: var(--bg-2) !important;
  color: var(--odoip-blue) !important;
  text-decoration: none !important;
}
body.page-order .sidebar .list-group-item.active,
body.page-order .order-sidebar a.active {
  background: var(--odoip-blue) !important;
  color: #fff !important;
  border-color: var(--odoip-blue) !important;
}

/* === Domain availability === */
body.page-order .domain-result-available,
body.page-order .domain-row.available {
  background: rgba(108, 227, 164, .10) !important;
  border: 1px solid rgba(108, 227, 164, .35) !important;
  color: #1a8f4f !important;
}
body.page-order .domain-result-unavailable,
body.page-order .domain-row.unavailable {
  background: rgba(210, 40, 9, .06) !important;
  border: 1px solid rgba(210, 40, 9, .2) !important;
  color: var(--odoip-red) !important;
}

/* === Prix === */
body.page-order .price,
body.page-order .amount,
body.page-order .total,
body.page-order .product-price,
body.page-order .order-summary-total,
body.page-order .cart-total-amount {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* === Alerts === */
body.page-order .alert {
  border-radius: 10px !important;
  padding: 14px 18px !important;
  border: 1px solid !important;
}
body.page-order .alert-info {
  background: var(--odoip-blue-050) !important;
  border-color: var(--odoip-blue-100) !important;
  color: var(--odoip-blue) !important;
}
body.page-order .alert-success {
  background: rgba(108, 227, 164, .12) !important;
  border-color: rgba(108, 227, 164, .35) !important;
  color: #1a8f4f !important;
}
body.page-order .alert-danger {
  background: rgba(210, 40, 9, .08) !important;
  border-color: rgba(210, 40, 9, .25) !important;
  color: var(--odoip-red) !important;
}
body.page-order .alert-warning {
  background: #fff8e1 !important;
  border-color: #ffe082 !important;
  color: #b8860b !important;
}

/* === Stepper / progress === */
body.page-order .cart-progress,
body.page-order .checkout-steps,
body.page-order .order-summary-progress {
  background: var(--bg-2) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  border: 1px solid var(--border-1) !important;
  margin-bottom: 24px !important;
}
body.page-order .cart-progress .step.active,
body.page-order .checkout-steps .step.active {
  color: var(--odoip-blue) !important;
  font-weight: 700 !important;
}
body.page-order .cart-progress .step.complete {
  color: #1a8f4f !important;
}

/* === Badges & labels === */
body.page-order .badge,
body.page-order .label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
}

/* === Footer cart Lagom2 → on cache et notre footer modern viendra plus tard
   Pour l'instant on harmonise les couleurs === */
body.page-order .footer-bg,
body.page-order .lagom-footer {
  background: var(--gray-800, #1F2937) !important;
}

/* === Mode de paiement (cart pages) === */
body.page-order .panel-payment,
body.page-order .panel-payment-method,
body.page-order .gateway-list,
body.page-order #gatewayList,
body.page-order .payment-method-list,
body.page-order .gateway-list-container {
  background: transparent !important;
}

/* Chaque option de paiement = card claire avec bordure */
body.page-order .gateway-radio-container,
body.page-order .payment-method-item,
body.page-order .paymentmethod-row,
body.page-order label.gateway-radio,
body.page-order .gateway-list label,
body.page-order .gateway-list .form-check,
body.page-order .gateway-list-item,
body.page-order [data-gateway-radio],
body.page-order .panel-payment-method label {
  background: #fff !important;
  border: 1px solid #E5E9F0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  color: #0E1B2C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

/* Hover : bordure bleu ODOIP + ombre subtile */
body.page-order .gateway-radio-container:hover,
body.page-order .payment-method-item:hover,
body.page-order .paymentmethod-row:hover,
body.page-order label.gateway-radio:hover,
body.page-order .gateway-list label:hover,
body.page-order .gateway-list .form-check:hover,
body.page-order .gateway-list-item:hover,
body.page-order .panel-payment-method label:hover {
  border-color: #05308C !important;
  box-shadow: 0 2px 8px rgba(5, 48, 140, .10) !important;
  transform: translateY(-1px) !important;
}

/* Sélectionné : fond bleu très clair + bordure bleu */
body.page-order .gateway-radio-container.is-selected,
body.page-order .gateway-radio-container.active,
body.page-order .gateway-radio-container.checked,
body.page-order .payment-method-item.selected,
body.page-order label.gateway-radio.checked,
body.page-order .gateway-list-item.selected,
body.page-order [data-gateway-radio].is-selected,
body.page-order .panel-payment-method label.active {
  background: #F1F4FB !important;
  border-color: #05308C !important;
  border-width: 2px !important;
  box-shadow: 0 2px 12px rgba(5, 48, 140, .15) !important;
}

/* Texte sombre dans les options de paiement */
body.page-order .gateway-radio-container *,
body.page-order .payment-method-item *,
body.page-order .gateway-list label *,
body.page-order .gateway-list-item *,
body.page-order .panel-payment-method label * {
  color: #0E1B2C !important;
}

/* Radio button styling */
body.page-order .gateway-radio-container input[type=radio],
body.page-order .gateway-list input[type=radio],
body.page-order .panel-payment-method input[type=radio] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #05308C !important;
  cursor: pointer !important;
}

/* Logo / icône passerelle (PayPal, Stripe, etc.) à droite */
body.page-order .gateway-icon-lg,
body.page-order .gateway-image,
body.page-order .gateway-radio-container img,
body.page-order .gateway-list img {
  max-height: 32px !important;
  margin-left: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Section header "Mode de paiement" */
body.page-order .panel-payment .panel-heading,
body.page-order .panel-payment-method .panel-heading,
body.page-order h2:has(+ .gateway-list),
body.page-order h3:has(+ .gateway-list) {
  color: #0E1B2C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* =========================================================================
   STORE / PRODUCTS PAGE — Layout polished (body.page-products)
   ========================================================================= */

/* Sidebar catégories — fond blanc lisible, texte sombre */
body.page-products .main-sidebar .panel.panel-sidebar,
body.page-order.page-products .panel.panel-sidebar,
body.page-order.page-products .categories-sidebar {
  background: #fff !important;
  border: 1px solid #E5E9F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(5, 48, 140, 0.06) !important;
  overflow: hidden !important;
}
body.page-products .panel-sidebar .panel-heading,
body.page-order.page-products .panel.panel-sidebar .panel-heading {
  background: #F1F4FB !important;
  border-bottom: 1px solid #E5E9F0 !important;
  color: #05308C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
}
body.page-products .panel-sidebar .panel-heading *,
body.page-order.page-products .panel.panel-sidebar .panel-heading * {
  color: #05308C !important;
}
body.page-products .panel-sidebar .list-group-item,
body.page-products .panel-sidebar a.list-group-item,
body.page-order.page-products .panel-sidebar:not(.panel-client-details) .list-group-item,
body.page-order.page-products .panel-sidebar:not(.panel-client-details) .list-group-item * {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #F4F6FA !important;
  color: #0E1B2C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 20px !important;
  border-left: 3px solid transparent !important;
  transition: all 150ms ease !important;
}
body.page-products .panel-sidebar .list-group-item:last-child {
  border-bottom: 0 !important;
}
body.page-products .panel-sidebar .list-group-item:hover,
body.page-products .panel-sidebar .list-group-item:hover * {
  background: #F1F4FB !important;
  color: #05308C !important;
}
body.page-products .panel-sidebar .list-group-item.active,
body.page-products .panel-sidebar .list-group-item.active *,
body.page-products .panel-sidebar a.list-group-item.active {
  background: #F1F4FB !important;
  color: #05308C !important;
  border-left-color: #D22809 !important;
  font-weight: 700 !important;
}

/* Currency selector dans la sidebar */
body.page-products .currency-selector,
body.page-products .form-currency,
body.page-products .panel-sidebar select,
body.page-products .panel-sidebar .form-control {
  background: #fff !important;
  border: 1px solid #E5E9F0 !important;
  border-radius: 8px !important;
  color: #0E1B2C !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  padding: 10px 14px !important;
}

/* === Product cards === */
body.page-products .package-product,
body.page-products .product-block,
body.page-products .panel-product,
body.page-order.page-products .product-card {
  background: #fff !important;
  border: 1px solid #E5E9F0 !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  transition: all 250ms ease !important;
  box-shadow: 0 1px 3px rgba(5, 48, 140, 0.06) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
body.page-products .package-product:hover,
body.page-products .product-block:hover,
body.page-products .panel-product:hover {
  border-color: #05308C !important;
  box-shadow: 0 8px 24px rgba(5, 48, 140, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* Card "LE PLUS POPULAIRE" — bordure rouge ODOIP avec accent */
body.page-products .package-product.popular,
body.page-products .package-product.featured,
body.page-products .product-block[data-popular],
body.page-products [class*="popular"] {
  border: 2px solid #D22809 !important;
  box-shadow: 0 8px 32px rgba(210, 40, 9, 0.15) !important;
}

/* Badge "LE PLUS POPULAIRE" */
body.page-products .product-popular,
body.page-products .badge-popular,
body.page-products [class*="ribbon"],
body.page-products .package-popular {
  background: #D22809 !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
}

/* Titre produit */
body.page-products .package-product .product-name,
body.page-products .package-product h2,
body.page-products .package-product h3,
body.page-products .product-block .product-title,
body.page-products .product-block h2,
body.page-products .product-block h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #0E1B2C !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
  margin: 0 0 14px !important;
  line-height: 1.25 !important;
}

/* Prix */
body.page-products .package-price,
body.page-products .product-price,
body.page-products .price-amount,
body.page-products .product-block .price {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #05308C !important;
  font-size: 36px !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  margin: 8px 0 6px !important;
}
body.page-products .price-cycle,
body.page-products .product-block .cycle,
body.page-products .package-product .cycle {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #4A5568 !important;
  font-weight: 500 !important;
  margin-bottom: 18px !important;
}

/* Description */
body.page-products .product-block .product-description,
body.page-products .package-product .product-desc,
body.page-products .package-product p {
  color: #4A5568 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 14px 0 22px !important;
  flex: 1 1 auto !important;
}

/* Bouton "Commandez maintenant" */
body.page-products .btn-add-to-cart,
body.page-products .package-product .btn,
body.page-products .product-block .btn-primary,
body.page-products .btn-product-buy {
  background: #05308C !important;
  border: 0 !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  width: 100% !important;
  transition: all 200ms ease !important;
  margin-top: auto !important;
  box-shadow: 0 1px 2px rgba(5, 48, 140, .1) !important;
}
body.page-products .btn-add-to-cart:hover,
body.page-products .package-product .btn:hover,
body.page-products .product-block .btn-primary:hover {
  background: #032777 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(5, 48, 140, .25) !important;
}

/* Card "Le plus populaire" : bouton rouge ODOIP */
body.page-products .package-product.popular .btn-add-to-cart,
body.page-products .package-product.featured .btn,
body.page-products [class*="popular"] .btn-primary {
  background: #D22809 !important;
}
body.page-products .package-product.popular .btn-add-to-cart:hover,
body.page-products [class*="popular"] .btn-primary:hover {
  background: #A81E05 !important;
  box-shadow: 0 6px 16px rgba(210, 40, 9, .25) !important;
}

/* Hero header de la page (Options et frais de mise en service) */
body.page-products .main-header,
body.page-products .page-header-content {
  background: linear-gradient(180deg, #05308C 0%, #032777 100%) !important;
  padding: 48px 0 40px !important;
}
body.page-products .main-header h1,
body.page-products .main-header-title,
body.page-products .page-header-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  letter-spacing: -.025em !important;
  color: #fff !important;
}

/* Espacement entre cards */
body.page-products .products-grid,
body.page-products .products .row,
body.page-products .package-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 24px !important;
}
@media (min-width: 1200px) {
  body.page-products .products .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}