/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;

}

/* ============================================ */
/* === MODIF ASN CLOUD : VPS Order Form === */
/* ============================================ */

/* Backup : masquer les champs serveur si jamais ils réapparaissent */
#inputNs1prefix,
#inputNs2prefix,
label[for="inputNs1prefix"],
label[for="inputNs2prefix"],
#inputHostname,
label[for="inputHostname"],
#inputRootpw,
label[for="inputRootpw"],
.field-ns1prefix,
.field-ns2prefix,
.field-hostname,
.field-rootpw {
    display: none !important;
}

/* ============================================ */
/* === MODIF ASN CLOUD : Cartes cycle facturation === */
/* ============================================ */

.billingcycle-cards-wrapper {
    margin: 25px 0;
}

.billingcycle-label {
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.billingcycle-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

.billingcycle-card {
    cursor: pointer;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s ease;
    background: #fff;
    margin: 0;
    position: relative;
    font-weight: normal;
    text-align: left;

    /* Grid : colonne 1 = radio, colonne 2 = texte */
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 14px;
}

.billingcycle-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Radio natif réinitialisé puis stylisé manuellement */
.billingcycle-radio,
.billingcycle-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    left: -9999px !important;
    top: -9999px !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* Radio coché */
.billingcycle-card input[type="radio"].billingcycle-radio:checked {
    border-color: #2563eb !important;
    background: #2563eb !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* Hover */
.billingcycle-card input[type="radio"].billingcycle-radio:hover {
    border-color: #9ca3af !important;
}

.billingcycle-card input[type="radio"].billingcycle-radio:checked:hover {
    border-color: #2563eb !important;
}

/* Focus (clic clavier) - sans halo bleu */
.billingcycle-card input[type="radio"].billingcycle-radio:focus,
.billingcycle-card input[type="radio"].billingcycle-radio:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.billingcycle-card input[type="radio"].billingcycle-radio:checked:focus,
.billingcycle-card input[type="radio"].billingcycle-radio:checked:focus-visible {
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* Conteneur texte en colonne 2 */
.billingcycle-card-info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.billingcycle-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.billingcycle-price {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

/* Section économies (badge + prix barré) */
.billingcycle-savings {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.billingcycle-badge-save {
    display: inline-block;
    background: #fce7f3;
    color: #be185d;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.billingcycle-old-price {
    color: #9ca3af;
    font-size: 12px;
    text-decoration: line-through;
}

/* Masquer toute icône de check WHMCS qui s'ajoute sur la sélection */
.billingcycle-card .fa-check,
.billingcycle-card .checked-icon,
.billingcycle-card svg.checked,
.billingcycle-card .selection-mark {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .billingcycle-options {
        grid-template-columns: 1fr !important;
    }
    .billingcycle-card {
        padding: 16px;
    }
}

/* ============================================ */
/* === MODIF ASN CLOUD : Cadre VPS info === */
/* ============================================ */

/* Le cadre qui contient le nom du VPS + features */
.product-information,
.product-info,
.cart-product-description,
.field-container > .well,
.field-container .product-details {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

/* Titre du produit (VPS Vercors - ASN-VPS-XXXX) */
.product-information h2,
.product-information h3,
.cart-product-description h2,
.cart-product-description h3 {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #e5e7eb !important;
}

/* Liste des caractéristiques */
.product-information ul,
.cart-product-description ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 24px !important;
}

.product-information ul li,
.cart-product-description ul li {
    color: #4b5563 !important;
    font-size: 14px !important;
    padding-left: 28px !important;
    position: relative !important;
    line-height: 1.5 !important;
}

/* Icône check verte devant chaque item */
.product-information ul li::before,
.cart-product-description ul li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: #10b981 !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Responsive */
@media (max-width: 768px) {
    .product-information ul,
    .cart-product-description ul {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================ */
/* === MODIF ASN CLOUD : Options configurables === */
/* ============================================ */

/* Titre "Options configurables" avec séparateur stylisé */
h3.config-options-title,
.cart-configoptions-title,
.configurable-options-title,
.options-section-title {
    text-align: center !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    margin: 30px 0 24px 0 !important;
    position: relative !important;
    padding: 0 20px !important;
}

/* Trait avant et après le titre */
h3.config-options-title::before,
h3.config-options-title::after,
.cart-configoptions-title::before,
.cart-configoptions-title::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 30% !important;
    height: 1px !important;
    background: #e5e7eb !important;
}

h3.config-options-title::before,
.cart-configoptions-title::before {
    left: 0 !important;
}

h3.config-options-title::after,
.cart-configoptions-title::after {
    right: 0 !important;
}

/* Labels des options */
.configoption label,
.field-container label,
label[for^="configoption"] {
    display: block !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

/* Selects (dropdowns) custom */
select.form-control,
select.form-select,
select[name^="configoption"] {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
    padding: 10px 36px 10px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: #111827 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    
    /* Flèche custom */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z' fill='%236b7280'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

select.form-control:hover,
select.form-select:hover,
select[name^="configoption"]:hover {
    border-color: #2563eb !important;
}

select.form-control:focus,
select.form-select:focus,
select[name^="configoption"]:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

/* Container des options sur 2 colonnes (si plusieurs options) */
.cart-configoptions,
.configoptions-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

.cart-configoptions .field-container,
.configoptions-wrapper .field-container {
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .cart-configoptions,
    .configoptions-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================ */
/* === MODIF ASN CLOUD : Bandeau aide === */
/* ============================================ */

.alert-info,
.commercial-help,
.alert.alert-warning {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #bfdbfe !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #1e40af !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 20px 0 !important;
}

.alert-info a,
.commercial-help a,
.alert.alert-warning a {
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.alert-info a:hover,
.commercial-help a:hover {
    color: #1e40af !important;
}

/* ============================================ */
/* === MODIF ASN CLOUD : Sidebar Cart (Catégories + Actions) === */
/* ============================================ */

/* Chaque panel (Catégories, Actions) */
.cart-sidebar .panel.card.panel-default,
.sidebar-collapsed .panel.card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease !important;
}

.cart-sidebar .panel.card.panel-default:hover,
.sidebar-collapsed .panel.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Le header (titre) du panel */
.cart-sidebar .panel-heading.card-header,
.cart-sidebar .m-0.panel-heading {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 14px 18px !important;
    margin: 0 !important;
}

/* Le texte du titre (Catégories, Actions) */
.cart-sidebar .panel-title {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Le contenu du panel */
.cart-sidebar .panel-body.card-body {
    padding: 12px 14px !important;
    background: #fff !important;
}

/* Le select Dropdown dans la sidebar */
.cart-sidebar select,
.cart-sidebar .form-control,
.cart-sidebar .form-select {
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    line-height: 1.5 !important;
    padding: 9px 36px 9px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;

    /* Flèche custom */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z' fill='%236b7280'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

.cart-sidebar select:hover,
.cart-sidebar .form-control:hover {
    border-color: #2563eb !important;
}

.cart-sidebar select:focus,
.cart-sidebar .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

/* Liens dans la sidebar (au cas où il y en a) */
.cart-sidebar a {
    color: #4b5563 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.cart-sidebar a:hover {
    color: #2563eb !important;
}

/* Item actif (la catégorie en cours) */
.cart-sidebar .list-group-item.active,
.cart-sidebar a.active {
    background: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    border-left: 3px solid #2563eb !important;
}

/* Responsive */
@media (max-width: 768px) {
    .cart-sidebar .panel.card.panel-default {
        margin-bottom: 12px !important;
    }
}

/* ============================================ */
/* === MODIF ASN CLOUD : Cartes produit (liste catégorie) === */
/* ============================================ */
/*
 * Section consolidée : cartes produit de la page panier /cart.php?gid=X
 * Structure : .product > <header> + .product-desc + <footer>
 *
 * Pourquoi tant de !important et de spécificité ? Le CSS legacy
 * de WHMCS (templates/orderforms/standard_cart/css/all.min.css)
 * place .btn-order-now et .product-pricing en position absolute
 * dans le coin de la carte. Le footer en CSS Grid (au lieu de
 * flex) reste seul fiable face à ces overrides.
 */

/* --- Conteneur des cartes (col-md-6 forcé à 50 %) --- */
#order-standard_cart .products {
    padding: 8px 0;
}

#order-standard_cart .products .row.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

#order-standard_cart .products .col-md-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* --- La carte elle-même --- */
#order-standard_cart .products .col-md-6 .product {
    /* neutralisation des styles legacy */
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    font-size: 14px !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(4, 44, 83, 0.06) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

#order-standard_cart .products .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(4, 44, 83, 0.14);
    border-color: #cbd5e1;
}

/* --- Header : bandeau bleu profond ASN CLOUD --- */
#order-standard_cart .products .product > header {
    background: linear-gradient(135deg, #042C53 0%, #0C447C 100%) !important;
    padding: 14px 18px !important;
    border: none !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Halo cyan décoratif coin sup-droit */
#order-standard_cart .products .product > header::after {
    content: '';
    position: absolute;
    top: -45px;
    right: -45px;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.20) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Tout texte/lien du header en blanc (le titre est dans un <a>) */
#order-standard_cart .products .product > header,
#order-standard_cart .products .product > header *,
#order-standard_cart .products .product > header a,
#order-standard_cart .products .product > header a:link,
#order-standard_cart .products .product > header a:visited,
#order-standard_cart .products .product > header a:hover,
#order-standard_cart .products .product > header a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

#order-standard_cart .products .product > header h2,
#order-standard_cart .products .product > header h3,
#order-standard_cart .products .product > header h4,
#order-standard_cart .products .product > header > a {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
}

/* --- Corps : description --- */
#order-standard_cart .products .product .product-desc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

#order-standard_cart .products .product .product-desc p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
}

/* Style prêt pour le jour où tu passes les descriptions WHMCS en <ul><li> */
#order-standard_cart .products .product .product-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart .products .product .product-desc ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 6px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
}

#order-standard_cart .products .product .product-desc ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* --- Footer : prix (col 1) + bouton (col 2) en CSS Grid ---
   Grid plutôt que flex parce que les éléments hérités sont en
   position absolute et cassent flex. Grid impose un layout fixe. */
#order-standard_cart .products .product > footer,
#order-standard_cart .products .product footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto !important;
    column-gap: 14px !important;
    align-items: center !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Bloc prix : colonne 1, full width dispo */
#order-standard_cart .products .product > footer > .product-pricing,
#order-standard_cart .products .product > footer > div.product-pricing {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

/* Reset complet des enfants du bloc prix (legacy WHMCS) */
#order-standard_cart .products .product > footer > .product-pricing *,
#order-standard_cart .products .product > footer > .product-pricing > * {
    position: static !important;
    float: none !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* "À partir de" / "Mensuel" en petit gris */
#order-standard_cart .products .product > footer > .product-pricing small,
#order-standard_cart .products .product > footer > .product-pricing .billing-cycle {
    display: block !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
}

/* Le gros prix (€4,00 EUR) en bleu profond */
#order-standard_cart .products .product > footer > .product-pricing .price,
#order-standard_cart .products .product > footer > .product-pricing strong,
#order-standard_cart .products .product > footer > .product-pricing b {
    display: block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #042C53 !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
}

/* --- Bouton Commander : colonne 2, vert émeraude --- */
#order-standard_cart .products .product > footer > a.btn-order-now,
#order-standard_cart .products .product > footer > .btn.btn-success.btn-order-now,
#order-standard_cart .products .product > footer > a[id$="-order-button"] {
    /* Position dans la grille */
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    align-self: center !important;
    justify-self: end !important;

    /* Reset du positionnement legacy */
    position: static !important;
    float: none !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;

    /* Look ASN CLOUD */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#order-standard_cart .products .product > footer > a.btn-order-now:hover,
#order-standard_cart .products .product > footer > .btn.btn-success.btn-order-now:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.40) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* --- Responsive : mobile en colonne unique, bouton sous le prix --- */
@media (max-width: 767px) {
    #order-standard_cart .products .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #order-standard_cart .products .product > footer {
        grid-template-columns: 1fr !important;
        row-gap: 12px !important;
    }

    #order-standard_cart .products .product > footer > .product-pricing {
        text-align: center !important;
    }

    #order-standard_cart .products .product > footer > a.btn-order-now {
        width: 100% !important;
        justify-self: stretch !important;
    }
}