@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   mScript Clean & Precise Design System (site/style.css)
   Reverse-Engineered & Refined for mscript.fr

   Strict Rules Preserved:
   - Primary Accent: #09FAC4
   - Thin Border ("Liseré"): 1px solid #29302b (--color-hairline)
   - Zero External Box-Shadows: box-shadow: none !important
   - Structural Spacing Offset: Relative to navigation tabs top edge (64px)
   ========================================================================== */

/* 1. Design Tokens & Root Variables */
:root {
    /* Brand Colors */
    --color-primary: #09fac4;
    --color-primary-rgb: 9, 250, 196;
    --color-primary-ink: #081410;
    --color-primary-dim: #00896a;
    --color-primary-soft: rgba(9, 250, 196, 0.14);

    /* Background & Surface Palette */
    --color-bg: #0A0D0D;
    --color-surface: #111512;
    --color-surface-2: #191e1b;
    --color-surface-card: #0e120f;

    /* Hairline Borders ("Liseré") */
    --color-hairline: #292E30;
    --color-hairline-strong: #292E30;
    --hairline: #292E30;
    --hairline-strong: rgba(255, 255, 255, 0.2);
    --border-thin: 1px solid #292E30;
    --border-color-hover: rgba(9, 250, 196, 0.6);

    /* Typography Palette */
    --color-ink: #f1f4f2;
    --color-text-main: #f1f4f2;
    --color-muted: #a5ada8;
    --color-text-muted: #a5ada8;
    --color-faint: #9fa7a2;
    --color-text-faint: #9fa7a2;

    /* Status Colors */
    --color-danger: #ed4a49;
    --color-info: #5db2cc;
    --color-sale: #f9b73f;

    /* Typography Fonts */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: 'Bricolage Grotesque', var(--font-sans);
    --font-mono: 'JetBrains Mono', monospace;

    /* Dimensions & Layout Spacing */
    --header-height: 64px;
    --container: 1500px;
    --container-max-width: 1500px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* Gradients, Blurs & Animations */
    --vignette-radial: radial-gradient(120% 90% at 50% -10%, #0C2231, transparent 55%);
    --blur-header: blur(14px);
    --blur-backdrop: blur(12px);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms var(--ease-out-quint);
    --transition-smooth: 220ms var(--ease-out-quint);
}

/* 2. Reset & Universal Principles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-color: var(--color-hairline);
}

::selection {
    background-color: #09FAC4;
    color: #081410;
}

html {
    scroll-behavior: auto;
    color-scheme: dark;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Enforce Strict Zero External Box-Shadow Rule across containers */
*,
*::before,
*::after {
    box-shadow: none !important;
}

/* 3. Typography Rules */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.heading,
.brand-title,
.hero-title,
.category-hero-title,
.section-title,
.subscription-title,
.subscription-packages-title,
.product-title,
.category-title,
.feature-title,
.sub-title,
.cta-title,
.maintenance-title {
    font-family: 'Bricolage Grotesque', var(--font-sans) !important;
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.05;
}

/* 4. Layout & Grid Containers */
.container-page {
    width: 100% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

.mscript-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 24px;
    /* 1.5rem */
    padding-right: 24px;
    /* 1.5rem */
    box-sizing: border-box;
}

.mscript-hero-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 199px !important;
    /* Forcé pour corriger l'oubli précédent */
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.mscript-cta-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 96px;
    padding-bottom: 96px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.mscript-product-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding-top: 32px !important;
    padding-bottom: 0px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

.accent-text {
    color: var(--color-primary);
}

.eyebrow,
.eyebrow-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.5rem;
}

section,
.section {
    padding-top: 96px !important;
    padding-bottom: 0px !important;
}

.subscriptions-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
}

.subscriptions-header .section-title {
    margin-bottom: 0 !important;
    font-size: 44px !important;
}

.subscriptions-header .section-subtitle {
    margin-top: 12px !important;
    max-width: 100% !important;
    width: 100%;
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section-header>div {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 0.25rem !important;
    line-height: 1.05 !important;
}

.section-desc,
.section-subtitle {
    margin-top: 0.25rem !important;
    font-size: 15px !important;
    color: var(--color-muted);
    line-height: 1.63;
    max-width: 672px !important;
    height: 55px !important;
}

.section-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.section-link:hover {
    color: #22fbca;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.section-link svg,
.section-link .section-link-arrow {
    width: 16px !important;
    height: 16px !important;
    stroke: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.section-link:hover svg,
.section-link:hover .section-link-arrow {
    transform: translateX(2px) !important;
    transition: none !important;
    animation: none !important;
}

/* Buttons System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    min-height: 44px;
    padding-inline: 1.15rem;
    border-radius: var(--radius-md);
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-fast);
    white-space: nowrap;
    border: var(--border-thin);
    user-select: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-ink);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background: #22fbca;
    border-color: #22fbca;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-surface-2);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline-strong);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.btn-fivem {
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    padding-inline: 1rem;
    min-height: 40px;
}

.btn-fivem:hover {
    background-color: #22fbca;
    color: var(--color-primary-ink);
    border: none;
    transform: translateY(-1px);
}

.btn-add {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(9, 250, 196, 0.3);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    min-height: 38px;
}

.btn-add:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
    border-color: var(--color-primary);
}

.btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    min-height: 36px;
}

/* 5. Sticky Site Header */
.site-header,
.mscript-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-height);
    background: rgba(10, 13, 11, 0.7) !important;
    border-bottom: 1px solid #292E30 !important;
}

.header-container,
.mscript-header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left,
.mscript-header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand-logo,
.mscript-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: #ffffff;
    flex-shrink: 0;
}

.logo-img,
.mscript-logo-img {
    height: 18px;
    width: auto;
}

.main-nav,
.mscript-main-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link,
.mscript-nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-muted);
    padding-inline: 0.8rem;
    height: 40px;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.nav-link:hover,
.mscript-nav-link:hover {
    color: var(--color-ink);
    background: #191B1E !important;
}

.nav-link.active,
.nav-link-active,
.mscript-nav-link.active,
.mscript-nav-link-active {
    color: #09FAC4 !important;
}

.nav-link:has(.soon-badge),
.mscript-nav-link:has(.soon-badge) {
    position: relative;
}

.soon-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 15px;
    font-size: 9px;
    background-color: #13344C;
    color: #09FAC4;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

footer .soon-badge,
.mscript-footer .soon-badge,
.footer-col .soon-badge,
.mscript-footer-col .soon-badge,
.footer-container .soon-badge,
.mscript-footer-container .soon-badge {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 15px !important;
    font-size: 9px !important;
    background-color: #13344C !important;
    color: #09FAC4 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}

/* CTA Shop Bundles Button Hover Text Swap */
.mscript-btn-bundles-cta .btn-text {
    position: relative;
    display: inline-block;
}

.mscript-btn-bundles-cta:hover .btn-text {
    color: transparent !important;
}

.mscript-btn-bundles-cta:hover .btn-text::after {
    content: attr(data-hover);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-ink, #0A0D0B) !important;
    white-space: nowrap;
}

/* Fallbacks multilingues si data-hover n'est pas encore injecté */
html[lang="fr"] .mscript-btn-bundles-cta:hover .btn-text:not([data-hover])::after {
    content: "Bientôt disponible";
}

html:not([lang="fr"]) .mscript-btn-bundles-cta:hover .btn-text:not([data-hover])::after {
    content: "Comming soon";
}

/* Subcategory Card Bundles Browse Link Hover Text Swap */
.mscript-subcategory-card-bundles .sub-link-text {
    position: relative;
    display: inline-block;
}

.mscript-subcategory-card-bundles:hover .sub-link-text {
    color: transparent !important;
}

.mscript-subcategory-card-bundles:hover .sub-link-text::after {
    content: "Comming soon";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary, #09FAC4) !important;
    white-space: nowrap;
}

.dropdown-icon {
    font-size: 0.65rem;
    opacity: 0.7;
}

.header-right,
.mscript-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    border: 1px solid transparent;
}

.icon-btn:hover {
    color: var(--color-ink);
    background: #191B1E !important;
}

.discord-btn:hover {
    color: #5865F2;
}

.lang-toggle-btn {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #09FAC4 !important;
    user-select: none;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

.lang-toggle-btn:hover {
    background-color: #191B1E !important;
    color: #09FAC4 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Header Cart Button & Badge */
.cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #09FAC4;
    color: #0A0D0B;
    font-size: 0.65rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(9, 250, 196, 0.5);
}

/* 6. Hero Section - Exact Spacing, Radial Vignette & Typography */
.hero-section,
.mscript-hero-wrapper {
    position: relative;
    padding-top: 0 !important;
    background: var(--vignette-radial);
    border-bottom: var(--border-thin);
}

.hero-container,
.mscript-hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-section .hero-content,
.mscript-hero-wrapper .mscript-hero-content {
    max-width: 850px !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    min-height: auto;
    height: auto;
    display: block;
}

.hero-title,
.mscript-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6.5vw, 88px);
    font-weight: 800;
    line-height: 89.76px;
    letter-spacing: 1px !important;
    word-spacing: 0px;
    vertical-align: baseline;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {

    .hero-title,
    .mscript-hero-title {
        font-size: 88px;
        line-height: 89.76px;
        letter-spacing: 1px !important;
    }
}

.hero-subtitle,
.mscript-hero-subtitle {
    margin-top: 20px;
    font-family: var(--font-sans);
    font-size: 16.8px;
    font-weight: 400;
    line-height: 1.63;
    color: var(--color-muted);
}

.hero-actions,
.mscript-hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important;
}

.hero-checkmarks,
.mscript-hero-checkmarks {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.checkmark-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.checkmark-item i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

/* 7. Stats Bar Section (.mscript-stats-*) */
.stats-section,
.mscript-stats-wrapper,
.mscript-stats-section {
    background-color: #090F12 !important;
    border-bottom: 1px solid #292E30 !important;
    height: 104.1px;
    min-height: 104.1px;
    display: flex;
    align-items: center;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.stats-container,
.mscript-stats-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
    align-items: center;
    justify-items: center;
}

@media (max-width: 767px) {

    .stats-section,
    .mscript-stats-wrapper,
    .mscript-stats-section {
        height: auto;
        min-height: 104.1px;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .stats-container,
    .mscript-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-item,
.mscript-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-header,
.mscript-stat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-number,
.mscript-stat-number {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 21.6px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #F1F4F2 !important;
    -webkit-text-stroke: 0.50px
}

.stat-icon,
.mscript-stat-icon {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.stat-icon-svg,
.mscript-stat-icon-svg {
    width: 18px !important;
    height: 18px !important;
    color: #09FAC4 !important;
    display: block !important;
}

.discord-stat-icon,
.mscript-discord-stat-icon {
    width: 11px !important;
    height: 9px !important;
    font-size: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: #09FAC4 !important;
}

.stat-label,
.mscript-stat-label {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: center;
    display: block;
    width: 100%;
}

/* 8. Products Grid & Cards (.mscript-product-*) */
.products-grid,
.mscript-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.product-card,
.mscript-product-card {
    background-color: var(--color-surface);
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 372.1px;
    width: 100%;
    transition: none !important;
}

@media (max-width: 1350px) {

    .products-grid,
    .mscript-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {

    .products-grid,
    .mscript-product-grid {
        grid-template-columns: 1fr;
    }
}

.product-card:hover,
.mscript-product-card:hover {
    border-color: color-mix(in oklab, #09FAC4 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #09FAC4 !important;
    transform: translateY(-4px);
    transition: none !important;
}

.product-media,
.mscript-card-image,
.mscript-card-header {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(9, 250, 196, 0.08), rgba(17, 21, 18, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-placeholder-icon,
.category-placeholder-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    opacity: 0.85;
    transition: none !important;
}

.product-card:hover .product-placeholder-icon,
.mscript-product-card:hover .product-placeholder-icon {
    transform: scale(1.15);
}

.product-body,
.mscript-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.product-category,
.mscript-badge,
.mscript-card-category {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-faint);
    letter-spacing: 0.05em;
}

.product-title,
.mscript-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.product-title a,
.mscript-card-title a {
    transition: color var(--transition-smooth);
}

.product-title a:hover,
.mscript-card-title a:hover,
.product-card:hover .product-title a,
.mscript-product-card:hover .mscript-card-title a {
    color: var(--color-primary);
}

.product-desc,
.mscript-card-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-footer,
.mscript-card-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-price,
.mscript-card-price {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-ink);
    -webkit-text-stroke: 0.50px;
}

.btn-add,
.mscript-btn-add {
    font-size: 0.825rem;
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--color-ink);
    border: 1px solid #292E30;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add:hover,
.mscript-btn-add:hover {
    background: #191B1E;
    border-color: #09FAC4;
    color: #09FAC4;
}

/* ==========================================================================
   START SECTION : CATALOG & CATEGORIES (section#home-catalog)
   ========================================================================== */

/* 9. Categories Grid & Sub-categories (.mscript-category-*, .home-catalog-*) */
.home-catalog-grid,
.mscript-home-catalog-grid,
.categories-grid,
.mscript-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.home-catalog-card,
.mscript-home-catalog-card,
.category-card,
.mscript-category-card {
    background-color: var(--color-surface);
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 327px;
    width: 100%;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

@media (max-width: 1200px) {

    .home-catalog-grid,
    .mscript-home-catalog-grid,
    .categories-grid,
    .mscript-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {

    .home-catalog-grid,
    .mscript-home-catalog-grid,
    .categories-grid,
    .mscript-category-grid {
        grid-template-columns: 1fr;
    }
}

.home-catalog-card:hover,
.mscript-home-catalog-card:hover,
.category-card:hover,
.mscript-category-card:hover {
    border-color: hsl(var(--accent-hue, 160), 80%, 60%);
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.home-catalog-media,
.mscript-home-catalog-icon,
.category-media,
.mscript-category-icon,
.mscript-category-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: radial-gradient(circle at center, #0A2635 0%, #071018 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-catalog-line,
.mscript-home-catalog-line,
.category-line,
.mscript-category-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: hsl(var(--accent-hue, 160), 80%, 60%);
}

.home-catalog-body,
.mscript-home-catalog-body,
.category-body,
.mscript-category-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    background: radial-gradient(circle at top left, #061722 0%, #090F12 100%) !important;
}

.home-catalog-count,
.mscript-home-catalog-count,
.category-count,
.mscript-category-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: hsl(var(--accent-hue, 160), 80%, 60%);
    text-transform: uppercase;
}

.home-catalog-title,
.mscript-home-catalog-title,
.category-title,
.mscript-category-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.home-catalog-desc,
.mscript-home-catalog-desc,
.category-desc,
.mscript-category-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.home-catalog-action,
.mscript-home-catalog-action,
.category-action,
.mscript-category-action {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: none !important;
}

.home-catalog-action svg,
.mscript-home-catalog-action svg,
.category-action svg,
.mscript-category-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.home-catalog-card:hover .home-catalog-action,
.mscript-home-catalog-card:hover .mscript-home-catalog-action,
.category-card:hover .category-action,
.mscript-category-card:hover .mscript-category-action {
    color: hsl(var(--accent-hue, 160), 80%, 60%);
}

.home-catalog-subcategory-grid,
.mscript-home-catalog-subcategory-grid,
.subcategories-grid,
.mscript-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
    background-color: #090F12 !important;
}

@media (max-width: 639px) {

    .home-catalog-subcategory-grid,
    .mscript-home-catalog-subcategory-grid,
    .subcategories-grid,
    .mscript-subcategory-grid {
        grid-template-columns: 1fr;
    }
}

.home-catalog-subcategory-card,
.mscript-home-catalog-subcategory-card,
.subcategory-card,
.mscript-subcategory-card {
    background-color: #090F12 !important;
    border: 1px solid #292E30 !important;
    border-radius: var(--radius-md);
    padding: 16px;
    height: 78px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.home-catalog-subcategory-card:hover,
.mscript-home-catalog-subcategory-card:hover,
.subcategory-card:hover,
.mscript-subcategory-card:hover {
    border-color: #3A4043 !important;
    background-color: #12171A !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.home-catalog-subcategory-icon,
.mscript-home-catalog-subcategory-icon,
.subcategory-icon,
.mscript-subcategory-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-sm);
    background-color: #0A0D0D !important;
    color: #09FAC4 !important;
    border: 1px solid #292E30 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-catalog-subcategory-icon svg,
.mscript-home-catalog-subcategory-icon svg,
.subcategory-icon svg,
.mscript-subcategory-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #09FAC4 !important;
}

.home-catalog-subcategory-info,
.mscript-home-catalog-subcategory-info,
.subcategory-info,
.mscript-subcategory-info {
    flex: 1;
}

.home-catalog-subcategory-info h3,
.mscript-home-catalog-subcategory-info h3,
.subcategory-info h3,
.mscript-subcategory-info h3 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-faint);
    font-weight: 400;
}

.home-catalog-subcategory-info p,
.mscript-home-catalog-subcategory-info p,
.subcategory-info p,
.mscript-subcategory-info p {
    font-size: 0.825rem;
    color: var(--color-muted);
}

.home-catalog-subcategory-link,
.mscript-home-catalog-subcategory-link,
.subcategory-link,
.mscript-subcategory-link {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: none !important;
}

.home-catalog-subcategory-link svg,
.mscript-home-catalog-subcategory-link svg,
.subcategory-link svg,
.mscript-subcategory-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.home-catalog-subcategory-link .sub-link-hover,
.mscript-home-catalog-subcategory-link .sub-link-hover,
.subcategory-link .sub-link-hover,
.mscript-subcategory-link .sub-link-hover {
    display: none !important;
}

.home-catalog-subcategory-card:hover .sub-link-default,
.mscript-home-catalog-subcategory-card:hover .sub-link-default,
.subcategory-card:hover .sub-link-default,
.mscript-subcategory-card:hover .sub-link-default {
    display: none !important;
}

.home-catalog-subcategory-card:hover .sub-link-hover,
.mscript-home-catalog-subcategory-card:hover .sub-link-hover,
.subcategory-card:hover .sub-link-hover,
.mscript-subcategory-card:hover .sub-link-hover {
    display: inline !important;
}

.home-catalog-subcategory-card:hover .home-catalog-subcategory-link,
.mscript-home-catalog-subcategory-card:hover .mscript-home-catalog-subcategory-link,
.subcategory-card:hover .subcategory-link,
.mscript-subcategory-card:hover .mscript-subcategory-link {
    color: var(--color-primary);
}

/* ==========================================================================
   END SECTION : CATALOG & CATEGORIES (section#home-catalog)
   ========================================================================== */

/* 10. Subscriptions Section (.mscript-sub-*) */
#home-subscriptions .subscription-box,
#home-subscriptions .mscript-subscription-box {
    background-color: #090F12 !important;
    border: 1px solid #292E30 !important;
    border-radius: var(--radius-xl);
    padding: 0 2.5rem !important;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    align-items: center;
    width: 100%;
    max-width: 1450px;
    height: 476px;
    box-sizing: border-box;
    margin: 0 auto;
}

@media (max-width: 900px) {

    #home-subscriptions .subscription-box,
    #home-subscriptions .mscript-subscription-box {
        grid-template-columns: 1fr;
        height: auto;
        padding: 2rem !important;
        gap: 2rem;
    }
}

#home-subscriptions .sub-content,
#home-subscriptions .mscript-sub-content {
    display: flex;
    flex-direction: column;
}

#home-subscriptions .sub-title,
#home-subscriptions .mscript-sub-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px !important;
}

#home-subscriptions .sub-content p:nth-of-type(1),
#home-subscriptions .mscript-sub-content p:nth-of-type(1) {
    max-width: 448px !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

#home-subscriptions .sub-content p:nth-of-type(2),
#home-subscriptions .mscript-sub-content p:nth-of-type(2) {
    max-width: 448px !important;
    margin-bottom: 28px !important;
    margin-top: 0 !important;
}

#home-subscriptions .sub-desc,
#home-subscriptions .mscript-sub-desc {
    font-size: 0.95rem;
    color: var(--color-muted);
}

#home-subscriptions .sub-price-tag,
#home-subscriptions .mscript-sub-price-tag {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

#home-subscriptions .price-label,
#home-subscriptions .mscript-price-label {
    font-size: 0.75rem;
    color: var(--color-faint);
    display: block !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}

#home-subscriptions .price-value,
#home-subscriptions .mscript-sub-price,
#home-subscriptions .mscript-price-value {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 45.6px !important;
    font-weight: 600 !important;
    color: #F1F4F2 !important;
    line-height: 1 !important;
    letter-spacing: -1.1px !important;
    -webkit-text-stroke: 0.75px !important;
}

#home-subscriptions .price-period,
#home-subscriptions .mscript-price-period {
    font-size: 0.95rem;
    color: var(--color-muted);
    font-weight: 400;
    font-family: 'Inter', sans-serif !important;
    margin-left: 4px !important;
}

/* Bouton d'abonnement cyan (#09FAC4) pour la section d'accueil (#home-subscriptions) */
#home-subscriptions .home-btn-subscribe,
.home-btn-subscribe {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 183px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    background: #09FAC4 !important;
    background-color: #09FAC4 !important;
    color: #06121E !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
    transform: none !important;
}

#home-subscriptions .home-btn-subscribe:hover,
.home-btn-subscribe:hover {
    background: #25FDDE !important;
    background-color: #25FDDE !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

#home-subscriptions .sub-previews,
#home-subscriptions .mscript-subs-grid,
#home-subscriptions .mscript-sub-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

#home-subscriptions .sub-preview-card,
#home-subscriptions .mscript-sub-card,
#home-subscriptions .mscript-sub-preview-card {
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%) !important;
    border: 1px solid #292E30 !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
    transition: none !important;
}

#home-subscriptions .sub-preview-card:hover,
#home-subscriptions .mscript-sub-card:hover,
#home-subscriptions .mscript-sub-preview-card:hover {
    background: #22252A !important;
    background-color: #22252A !important;
    border-color: #3A4043 !important;
    transform: none !important;
    transition: none !important;
}

#home-subscriptions .sub-preview-card img,
#home-subscriptions .mscript-sub-card img,
#home-subscriptions .mscript-sub-preview-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home-subscriptions .sub-preview-title,
#home-subscriptions .mscript-sub-preview-title {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--color-ink);
    margin: 0;
    line-height: 1;
}

/* 11. Reviews Section - 1-Card Strict Magnetic Snap Carousel (.mscript-reviews-*) */
.reviews-carousel-wrapper,
.mscript-reviews-wrapper {
    overflow-x: auto;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    position: relative;
    padding-block: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-carousel-wrapper::-webkit-scrollbar,
.mscript-reviews-wrapper::-webkit-scrollbar {
    display: none;
}

.reviews-carousel-wrapper.grabbing,
.mscript-reviews-wrapper.grabbing {
    cursor: grabbing;
}

.reviews-track,
.mscript-reviews-track {
    display: flex;
    width: max-content;
    transition: transform 0.6s ease;
}

.review-card,
.mscript-review-card {
    flex: 0 0 368px;
    width: 368px;
    height: 190px;
    background-color: rgba(20, 21, 24, 0.5) !important;
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.review-card *,
.mscript-review-card * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Hover: ONLY lightens background, border remains intact, ZERO box shadow, ZERO transition/animation */
.review-card:hover,
.mscript-review-card:hover {
    background-color: #191B1E !important;
    border-color: #3A4043 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.review-user-name,
.mscript-review-author,
.mscript-review-user {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
}

.review-meta-sub,
.mscript-review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
}

/* Stars: Primary Accent Color (#09FAC4) */
.review-stars,
.mscript-review-stars {
    color: var(--color-primary);
    font-size: 0.8rem;
    display: flex;
    gap: 0.2rem;
}

.review-date,
.mscript-review-date {
    font-family: var(--font-mono);
    font-size: 0.775rem;
    color: var(--color-faint);
}

.review-text,
.mscript-review-text {
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-top: 0.15rem;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {

    .review-card,
    .mscript-review-card {
        flex: 0 0 calc(100vw - 48px) !important;
        width: calc(100vw - 48px) !important;
        max-width: 368px !important;
    }
}

.reviews-nav-row,
.mscript-reviews-nav {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviews-page-tag,
.mscript-reviews-counter {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-muted);
}

.reviews-arrow-btns,
.mscript-reviews-arrows {
    display: flex;
    gap: 0.5rem;
}

button#reviews-prev.icon-btn,
button#reviews-next.icon-btn,
.reviews-arrow-btns .icon-btn,
.mscript-reviews-arrows .icon-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px !important;
    gap: 8px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    background: #191B1E !important;
    background-color: #191B1E !important;
    border: 1px solid #3C4445 !important;
    border-radius: 12px !important;
    color: #F1F4F2 !important;
    cursor: pointer !important;
    transition: none !important;
}

button#reviews-prev.icon-btn:hover:not(:disabled),
button#reviews-next.icon-btn:hover:not(:disabled),
.reviews-arrow-btns .icon-btn:hover:not(:disabled),
button#reviews-prev.icon-btn:hover,
button#reviews-next.icon-btn:hover,
.reviews-arrow-btns .icon-btn:hover,
.mscript-reviews-arrows .icon-btn:hover {
    background: #22252A !important;
    background-color: #22252A !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
}

button#reviews-prev.icon-btn:disabled,
button#reviews-next.icon-btn:disabled,
.reviews-arrow-btns .icon-btn:disabled,
.mscript-reviews-arrows .icon-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    border-color: #3C4445 !important;
    background-color: #191B1E !important;
    color: #F1F4F2 !important;
}

button#reviews-prev.icon-btn svg,
button#reviews-next.icon-btn svg,
.reviews-arrow-btns .icon-btn svg,
.mscript-reviews-arrows .icon-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    transition: none !important;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: var(--color-surface-2);
    border: var(--border-thin);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.author-role {
    font-family: var(--font-sans);
    font-size: 0.775rem;
    color: var(--color-muted);
}

/* 12. Features Grid - Pure Icon-Text 2x2 List Layout (.mscript-why-*) */
.features-grid,
.mscript-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
    row-gap: 2.5rem;
}

@media (max-width: 767px) {

    .features-grid,
    .mscript-why-grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
}

.feature-card,
.mscript-why-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: auto;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.feature-card:hover,
.mscript-why-card:hover {
    border-color: transparent;
    transform: none;
}

.feature-icon,
.mscript-why-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: var(--border-thin);
    background-color: var(--color-surface-2);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.feature-content,
.mscript-why-content {
    display: flex;
    flex-direction: column;
}

.feature-title,
.mscript-why-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink);
}

.feature-desc,
.mscript-why-text,
.mscript-why-desc {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* 12. FAQ Accordion (.mscript-faq-*) */
.faq-accordion,
.mscript-faq-wrapper {
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
    width: 100%;
    max-width: 1452px;
    margin: 0 auto;
    box-sizing: border-box;
}

.faq-item,
.mscript-faq-item {
    border-bottom: var(--border-thin);
}

.faq-item:last-child,
.mscript-faq-item:last-child {
    border-bottom: none;
}

.faq-question,
.mscript-faq-question {
    width: 100%;
    height: 50px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.025rem;
    font-weight: 700;
    color: var(--color-ink);
    background-color: #090F12 !important;
    border-bottom: 1px solid #292E30 !important;
    transition: none !important;
    box-sizing: border-box;
}

.faq-question:hover,
.mscript-faq-question:hover {
    border-color: #3A4043 !important;
    background-color: #12171A !important;
    transition: none !important;
}

.faq-icon,
.mscript-faq-icon {
    font-size: 0.60rem !important;
    color: var(--color-muted);
    transition: transform var(--transition-fast);
}

.faq-item.active .faq-icon,
.mscript-faq-item.active .mscript-faq-icon {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-answer,
.mscript-faq-answer {
    display: none;
    padding: 0 1.5rem;
    font-size: 0.925rem;
    color: var(--color-muted);
    line-height: 1.5;
    height: 43.9px;
    background-color: #191B1E !important;
    box-sizing: border-box;
    align-items: center;
}

.faq-answer p,
.mscript-faq-answer p {
    margin: 0;
}

.faq-item.active .faq-answer,
.mscript-faq-item.active .mscript-faq-answer {
    display: flex;
}

/* 13. CTA Banner (.mscript-cta-*) */
.cta-banner,
.mscript-cta-box {
    position: relative;
    background-color: #090F12 !important;
    border: 1px solid #292E30 !important;
    border-radius: var(--radius-xl);
    text-align: center;
    overflow: hidden;
    width: 100%;
    max-width: 1452px;
    height: 375.7px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
}

.cta-bg,
.mscript-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    pointer-events: none;
}

.cta-content,
.mscript-cta-content {
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin: 0 auto;
}

.cta-logo,
.mscript-cta-logo {
    height: 28px;
    width: auto;
    margin: 0 auto 1.25rem auto;
}

.cta-title,
.mscript-cta-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
}

.cta-desc,
.mscript-cta-desc {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

.cta-buttons,
.mscript-cta-buttons {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 14. Site Footer (.mscript-footer-*) */
footer,
.site-footer,
.mscript-footer {
    border-top: var(--border-thin);
    background-color: #090F12 !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    margin-top: 80px !important;
    width: 100%;
}

.footer-container,
.mscript-footer-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.footer-grid,
.mscript-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 3rem;
    align-items: start !important;
}

.footer-brand,
.mscript-footer-brand,
.footer-col,
.mscript-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
}

@media (max-width: 850px) {

    .footer-grid,
    .mscript-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {

    .footer-grid,
    .mscript-footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-logo,
.mscript-footer-logo {
    height: 22px;
    width: auto;
}

.footer-text,
.mscript-footer-text {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    max-width: 100%;
    width: 100%;
}

.footer-col h4,
.mscript-footer-col h4 {
    font-family: 'Bricolage Grotesque', var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-faint);
    letter-spacing: 0.05em;
    margin-top: 0 !important;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.footer-col ul,
.mscript-footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-col a,
.mscript-footer-link {
    font-size: 0.875rem;
    color: var(--color-muted);
    transition: color var(--transition-fast);
}

.footer-col a:hover,
.mscript-footer-link:hover {
    color: var(--color-primary);
}

.footer-bottom,
.mscript-footer-bottom {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: var(--border-thin);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--color-faint);
}

.footer-links,
.mscript-footer-links {
    display: flex;
    gap: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.footer-links a:hover,
.mscript-footer-links a:hover {
    color: var(--color-muted);
}

/* 15. Maintenance Page Layout */
.maintenance-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #000000 !important;
    background: #000000 !important;
}

.maintenance-header {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 15, 18, 0.72) !important;
    background-color: rgba(9, 15, 18, 0.72) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    position: relative;
    z-index: 30;
    box-sizing: border-box;
}

.maintenance-header .container-page {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.maintenance-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
    min-height: calc(100vh - 128px);
    background: #000 !important;
}

.maintenance-bg-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-bg-scene .crime-scene-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: calc((100vh - 128px) * (2960 / 1440));
    min-height: calc(100vw * (1440 / 2960));
    aspect-ratio: 2960 / 1440;
    background: #000;
    overflow: hidden;
}

.crime-scene-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.layer-foreground {
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.layer-tape-glow {
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.45;
}

.layer-animated-tapes {
    z-index: 3;
    pointer-events: none;
}

.perspective-tape-quad {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.tape-quad-front {
    width: 2410px;
    height: 170px;
    transform: matrix3d(2.525900, 0.353768, 0, 0.00053540, 0.000000, 0.835294, 0, -0.00000000, 0, 0, 1, 0, 440.000000, 856.000000, 0, 1.000000);
}

.tape-quad-front .tape-marquee-track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 50px;
    letter-spacing: 0.02em;
    transform: skewX(3.47deg) scaleY(1.25) scaleX(0.78);
    transform-origin: left center;
    color: #0c0c0c;
    text-transform: uppercase;
    animation: crime-tape-scroll 24s linear infinite;
    animation-delay: 0s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.tape-quad-left {
    width: 250px;
    height: 123px;
    transform: matrix3d(0.740964, -0.654361, 0, -0.00103614, 0.000000, 1.000000, 0, -0.00000000, 0, 0, 1, 0, 0.000000, 786.000000, 0, 1.000000);
}

.tape-quad-left .tape-marquee-track {
    font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 36px;
    color: #0c0c0c;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    white-space: nowrap;
    animation: crime-tape-scroll 10s linear infinite;
    animation-delay: -3.8s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.tape-quad-back-left {
    width: 987px;
    height: 44px;
    transform: matrix3d(1.294118, 0.205614, 0, 0.00029799, 0.000000, 1.000000, 0, -0.00000000, 0, 0, 1, 0, 0.000000, 734.000000, 0, 1.000000);
    opacity: 0.72;
    filter: contrast(0.9);
}

.tape-quad-back-left .tape-marquee-track {
    font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #1a1a1a;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    white-space: nowrap;
    animation: crime-tape-scroll-reverse 16s linear infinite;
    animation-delay: -6.2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.tape-quad-back-right {
    width: 1824px;
    height: 53px;
    transform: matrix3d(0.385241, -0.148006, 0, -0.00021723, 0.000000, 0.603774, 0, -0.00000000, 0, 0, 1, 0, 1006.000000, 724.000000, 0, 1.000000);
    opacity: 0.72;
    filter: contrast(0.9);
}

.tape-quad-back-right .tape-marquee-track {
    font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #1a1a1a;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    white-space: nowrap;
    animation: crime-tape-scroll-reverse 20s linear infinite;
    animation-delay: -11.4s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.tape-marquee-track span.tape-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 1.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    filter: blur(0.8px);
}

.tape-logo {
    height: 0.85em;
    width: auto;
    display: inline-block;
    vertical-align: -0.06em;
    object-fit: contain;
    filter: brightness(0);
    margin-right: 0.45em;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
}

.tape-text {
    display: inline-block;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.tape-icon {
    font-size: 0.85em;
    opacity: 0.9;
}

@keyframes crime-tape-scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes crime-tape-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* Thèmes personnalisés avec harmonie globale (Face avant, Arrière et Glow doux) */
.scene-ribbon-wrapper {
    --tape-edge-glow: rgba(255, 220, 50, 0.45);
    --tape-border-light: rgba(255, 255, 255, 0.7);
    --tape-front-edge: #FFFAD0;
    --tape-front-base: #FFE817;
    --tape-front-mid: #FFCA00;
    --tape-back-edge: #FFEAA0;
    --tape-back-base: #E0BC10;
}

.scene-ribbon-wrapper.theme-cyan {
    --tape-edge-glow: rgba(9, 250, 196, 0.5);
    --tape-border-light: rgba(255, 255, 255, 0.75);
    --tape-front-edge: #D6FFF7;
    --tape-front-base: #09FAC4;
    --tape-front-mid: #00DBAA;
    --tape-back-edge: #A8FFF0;
    --tape-back-base: #06B88F;
}

.scene-ribbon-wrapper.theme-red {
    --tape-edge-glow: rgba(255, 59, 48, 0.5);
    --tape-border-light: rgba(255, 255, 255, 0.75);
    --tape-front-edge: #FFD4D1;
    --tape-front-base: #FF3B30;
    --tape-front-mid: #D92217;
    --tape-back-edge: #FFA8A3;
    --tape-back-base: #B3170E;
}

.scene-ribbon-wrapper.theme-orange {
    --tape-edge-glow: rgba(255, 149, 0, 0.5);
    --tape-border-light: rgba(255, 255, 255, 0.75);
    --tape-front-edge: #FFEBD4;
    --tape-front-base: #FF9500;
    --tape-front-mid: #DB7500;
    --tape-back-edge: #FFD29E;
    --tape-back-base: #B86000;
}

.maintenance-card {
    position: relative;
    z-index: 10;
    margin-top: -20px;
    max-width: 650px;
    height: 500px;
    width: 100%;
    text-align: center;
    background-color: rgba(15, 17, 18, 0.85) !important;
    border: 1px solid rgba(41, 46, 48, 0.85) !important;
    backdrop-filter: blur(2px) saturate(100%);
    -webkit-backdrop-filter: blur(2px) saturate(100%);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(9, 250, 196, 0.08);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transform: translateY(-18px);
}

.maintenance-fg-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-fg-scene .crime-scene-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: calc((100vh - 128px) * (2960 / 1440));
    min-height: calc(100vw * (1440 / 2960));
    aspect-ratio: 2960 / 1440;
    background: transparent;
    overflow: hidden;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    background-color: var(--color-primary-soft);
    border: 1px solid rgba(9, 250, 196, 0.3);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.pulse-dot-wrapper {
    position: relative;
    display: inline-flex;
    margin-left: 5px;
    align-items: center;
    justify-content: center;
    height: 8px;
    width: 8px;
    flex-shrink: 0;
}

.pulse-ping {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: var(--color-primary, #09FAC4);
    opacity: 0.75;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    transform-origin: center center;
}

.pulse-dot {
    position: relative;
    display: inline-block;
    border-radius: 9999px;
    height: 8px;
    width: 8px;
    background-color: var(--color-primary, #09FAC4);
    flex-shrink: 0;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.maintenance-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.maintenance-subtitle {
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 2rem auto;
}

.maintenance-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 580px;
    margin: 0 auto 1.5rem auto;
}

.status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #191B1E !important;
    border: 1px solid #292E30 !important;
    border-radius: 12px !important;
    padding: 0.9rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted);
}

.status-box-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.status-box-val {
    font-weight: 600;
}

.discord-color {
    color: #5865F2;
}

.maintenance-scene-actions {
    position: absolute;
    right: 24px;
    bottom: 24px;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 25;
}

.btn-discord {
    background-color: #5865F2 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    width: auto !important;
    height: 46px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    animation: none !important;
    transition: none !important;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.35) !important;
}

.btn-discord:hover {
    background-color: #6976F5 !important;
    border: none !important;
    animation: none !important;
    transition: none !important;
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.45) !important;
}

.maintenance-footer {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 0 24px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-faint);
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(9, 15, 18, 0.72) !important;
    background-color: rgba(9, 15, 18, 0.72) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    position: relative;
    z-index: 30;
    box-sizing: border-box;
}

.maintenance-footer p {
    margin: 0 !important;
    padding: 0 1rem;
}

/* Bouton switch de langue spécifique pour le footer de maintenance */
.maintenance-footer-right {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 35;
}

.mscript-maintenance-lang-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #09FAC4 !important;
    background: transparent;
    border-radius: var(--radius-md, 12px);
    border: 1px solid transparent;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    user-select: none;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-maintenance-lang-toggle:hover {
    background-color: #191B1E !important;
    color: #09FAC4 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

@media (max-width: 640px) {
    .maintenance-footer {
        height: auto;
        min-height: 64px;
        max-height: none;
        padding: 12px 16px !important;
        flex-direction: column;
        gap: 8px;
    }

    .maintenance-footer-right {
        position: static;
        transform: none;
    }
}


/* Added Utility Classes for Carousel */
.shrink-0 {
    flex-shrink: 0;
}

.grow-0 {
    flex-grow: 0;
}

.pr-4 {
    padding-right: 16px;
}

.touch-pan-y {
    touch-action: pan-y;
}

/* Why mScript Features Section */
#why-mscript .section-header>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#why-mscript .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #09FAC4;
    margin-bottom: 0;
}

#why-mscript .section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.7px;
    color: #F1F4F2;
    margin-top: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: transparent;
    border: none;
    padding: 0;
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #090F12 !important;
    border: 1px solid #292E30 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i,
.feature-icon svg,
.feature-icon img {
    color: #09FAC4;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-content {
    display: flex;
    flex-direction: column;
}

.feature-desc {
    color: #A5ADA8;
    font-size: 14.7px;
    font-weight: 400;
    line-height: 1.63;
    margin-top: 6px;
    margin-bottom: 0;
    max-width: 100%;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
}

/* 16. CTA Section Exception */
.cta-section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

/* 17. Precise Button Sizing Overrides */
.btn-fivem {
    width: auto !important;
    min-width: fit-content !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 16px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    border: none !important;
}

.hero-actions .btn-primary {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 24px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: none !important;
}

.hero-actions .btn-secondary {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 24px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #191B1E !important;
    color: #F1F4F2 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: 1px solid #292E30 !important;
}

.sub-content .btn-primary,
.home-btn-subscribe {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 24px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: none !important;
}

.cta-buttons .btn-primary {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 24px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    border: none !important;
}

.cta-buttons .btn-secondary {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0px 24px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #191E1B !important;
    color: #F1F4F2 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    border: none !important;
}

.footer-brand .btn-secondary {
    width: auto !important;
    min-width: fit-content !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 20px 0px 0px !important;
    padding: 0px 20px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background-color: #191E1B !important;
    color: #F1F4F2 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: none !important;
}

/* --- Custom Glow, Hover and Transition Effects for Specific Buttons --- */
.btn-fivem,
.hero-actions .btn-primary,
.sub-content .btn-primary,
.cta-buttons .btn-primary {
    box-shadow: 0px 12px 20px -8px rgba(9, 250, 196, 0.45) !important;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-fast) !important;
}

.btn-fivem:hover,
.hero-actions .btn-primary:hover,
.sub-content .btn-primary:hover,
.cta-buttons .btn-primary:hover {
    box-shadow: 0px 10px 28px -6px rgba(9, 250, 196, 0.60) !important;
    transform: none !important;
    transition: none !important;
    background-color: #4FFBCA !important;
    border-color: #4FFBCA !important;
    color: var(--color-primary-ink) !important;
}

/* --- Overrides for Add Button --- */
.btn-add {
    width: auto !important;
    min-width: 76px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    border: none !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    box-shadow: 0px 12px 20px -8px rgba(9, 250, 196, 0.36) !important;
    /* Glow fixe réduit de 20% */
    transition: transform var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-fast) !important;
}

.btn-add:hover {
    box-shadow: 0px 10px 28px -6px rgba(9, 250, 196, 0.60) !important;
    /* Glow hover identique aux autres boutons */
    transform: none !important;
    transition: none !important;
    background-color: #4FFBCA !important;
    border-color: #4FFBCA !important;
    color: #081410 !important;
}

.btn-add svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0;
}

/* --- Overrides for Secondary Buttons --- */
.btn-secondary,
.hero-actions .btn-secondary,
.cta-buttons .btn-secondary,
.footer-brand .btn-secondary,
.btn-secondary.btn-sm.mt-4 {
    background-color: #191B1E !important;
    border: 1px solid #292E30 !important;
    transition: none !important;
}

a.btn.btn-secondary.btn-sm.mt-4,
.btn-secondary.btn-sm.mt-4,
.mt-4 {
    margin-top: 20px !important;
}

.btn-secondary:hover,
.hero-actions .btn-secondary:hover,
.cta-buttons .btn-secondary:hover,
.footer-brand .btn-secondary:hover,
.btn-secondary.btn-sm.mt-4:hover {
    color: #09FAC4 !important;
    border-color: var(--color-primary) !important;
    transform: none !important;
    transition: none !important;
}

/* --- Overrides for Category Cards --- */
.category-card,
.mscript-category-card,
.home-catalog-card,
.mscript-home-catalog-card {
    background: #071018 !important;
    border: 1px solid #104953 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.category-media,
.home-catalog-media {
    background: radial-gradient(circle at center, #0A2635 0%, #071018 100%) !important;
}

.category-body,
.home-catalog-body {
    background: radial-gradient(circle at top left, #061722 0%, #090F12 100%) !important;
}

.category-card:hover,
.mscript-category-card:hover,
.home-catalog-card:hover,
.mscript-home-catalog-card:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Logo SVG dans les 4 cartes */
.category-logo-svg {
    width: 48px !important;
    height: 40px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.category-logo-svg .logo-top,
.category-logo-svg .logo-v {
    fill: #081B26 !important;
    transition: fill var(--transition-fast) !important;
}

.home-catalog-card:hover .category-logo-svg,
.mscript-home-catalog-card:hover .category-logo-svg,
.category-card:hover .category-logo-svg,
.mscript-category-card:hover .category-logo-svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.home-catalog-card:hover .category-logo-svg .logo-top,
.mscript-home-catalog-card:hover .category-logo-svg .logo-top,
.category-card:hover .category-logo-svg .logo-top,
.mscript-category-card:hover .category-logo-svg .logo-top {
    fill: #FFFFFF !important;
}

.category-action i,
.category-action svg,
.mscript-category-action i,
.mscript-category-action svg {
    transition: none !important;
    animation: none !important;
}

.category-card:hover .category-action i,
.category-card:hover .category-action svg,
.mscript-category-card:hover .mscript-category-action i,
.mscript-category-card:hover .mscript-category-action svg {
    transform: translateX(2px) !important;
}

/* Card 1: Advanced Series (#09FAC4) */
.cat-advanced .category-count {
    color: #09FAC4 !important;
}

.cat-advanced .category-line {
    background-color: #09FAC4 !important;
}

.cat-advanced:hover {
    border-color: color-mix(in oklab, #09FAC4 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #09FAC4 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.cat-advanced:hover .category-logo-svg .logo-v {
    fill: #09FAC4 !important;
}

.cat-advanced:hover .category-action {
    color: #09FAC4 !important;
}

/* Card 2: Legal Series (#B682ED) */
.cat-legal .category-count {
    color: #B682ED !important;
}

.cat-legal .category-line {
    background-color: #B682ED !important;
}

.cat-legal:hover {
    border-color: color-mix(in oklab, #B682ED 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #B682ED !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.cat-legal:hover .category-logo-svg .logo-v {
    fill: #B682ED !important;
}

.cat-legal:hover .category-action {
    color: #B682ED !important;
}

/* Card 3: Crime Series (#F05653) */
.cat-crime .category-count {
    color: #F05653 !important;
}

.cat-crime .category-line {
    background-color: #F05653 !important;
}

.cat-crime:hover {
    border-color: color-mix(in oklab, #F05653 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #F05653 !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.cat-crime:hover .category-logo-svg .logo-v {
    fill: #F05653 !important;
}

.cat-crime:hover .category-action {
    color: #F05653 !important;
}

/* Card 4: Activities Series (#4C9DEB) */
.cat-activities .category-count {
    color: #4C9DEB !important;
}

.cat-activities .category-line {
    background-color: #4C9DEB !important;
}

.cat-activities:hover {
    border-color: color-mix(in oklab, #4C9DEB 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #4C9DEB !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.cat-activities:hover .category-logo-svg .logo-v {
    fill: #4C9DEB !important;
}

.cat-activities:hover .category-action {
    color: #4C9DEB !important;
}

/* --- CUSTOM SCROLLBAR (10px) --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0A0D0B;
}

::-webkit-scrollbar-thumb {
    background-color: #3B403D;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background-color 0.15s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #646B66;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Scrollbar Buttons (Top arrow strictly at top, Bottom arrow strictly at bottom) */
::-webkit-scrollbar-button {
    display: block;
    height: 14px;
    width: 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none !important;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233B403D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m18 15-6-6-6 6'/></svg>");
}

::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233B403D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* ==========================================================================
   VALIDATED PRODUCTION MODULES (MIGRATED FROM TEST-STYLE.CSS)
   ========================================================================== */

/* --- CATEGORY HERO SECTION --- */
.category-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #292E30;
    background-color: #0A0D0D;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 416px;
    display: flex;
    align-items: center;
}

.vignette-radial {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(120% 90% at 50% -10%, #0C2231, transparent 55%);
}

.category-hero .hero-content {
    position: relative;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 416px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    box-sizing: border-box !important;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #A5ADA8;
}

.breadcrumb a {
    color: #A5ADA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #F1F4F2;
}

.breadcrumb .text-faint {
    color: #555;
}

.breadcrumb .text-ink {
    color: #F1F4F2;
}

/* Text Block */
.hero-text-block {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 780px;
}

.eyebrow-mono {
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    color: #09FAC4;
}

.category-hero .hero-title {
    margin-top: 10px;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: #F1F4F2;
}

.category-hero .hero-description {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #A5ADA8;
    max-width: 760px;
}

/* Chips (Catégories) */
.chips-container {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

a.chip {
    width: auto !important;
    height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #292E30;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: #191B1E;
    font-size: 13.6px;
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.5;
    color: #A5ADA8;
    text-decoration: none;
}

.chip:hover {
    border-color: #3C453F;
    color: #F1F4F2;
}

a.chip.chip-active {
    width: auto !important;
    height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #0AFAC480 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: #0C272E !important;
    font-size: 13.6px;
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.5;
    color: #09FAC4 !important;
}

a.chip.chip-active:hover {
    background: #191B1E !important;
    border-color: #3C453F !important;
    color: #F1F4F2 !important;
}

/* --- TOOLBAR SECTION --- */
.toolbar-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.0);
    background-color: #0A0D0D;
}

.toolbar-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    .toolbar-layout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Filters */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.filter-pill {
    height: 32px;
    padding: 0 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: #A5ADA8;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #F1F4F2;
}

button.filter-pill.filter-pill-active {
    width: 145.031px;
    height: 38px;
    padding: 0px 14.4px;
    border: 1px solid #09FAC4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 12px;
    background: #09FAC4;
    font-size: 13.6px;
    font-family: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
    color: #081410;
    transition: none;
}

button.filter-pill.filter-pill-active:hover {
    color: #F1F4F2;
    transform: scale(calc(37 / 38));
    transition: none;
}

/* Search & Sort Inputs */
.search-sort-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

@media (min-width: 1024px) {
    .search-sort-group {
        width: auto;
    }
}

.input-wrapper {
    position: relative;
}

.search-wrapper {
    flex: 1;
    min-width: 200px;
}

.sort-wrapper {
    flex-shrink: 0;
}

.field-input {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #F1F4F2;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    outline: none;
    transition: none;
}

.field-input:focus,
.field-input:active {
    border-color: #09FAC4 !important;
    outline: none !important;
    box-shadow: none !important;
}

.padding-left-icon {
    padding: 0 16px 0 36px;
}

input.field-input.padding-left-icon {
    width: 224px;
    height: 44px;
    padding: 0px 13.6px 0px 36px;
    border: 1px solid #3D4540;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 12px;
    background: #191B1E;
    font-size: 15px;
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #F1F4F2;
    transition: none;
}

input.field-input.padding-left-icon:focus,
input.field-input.padding-left-icon:active {
    border-color: #09FAC4 !important;
    outline: none !important;
    box-shadow: none !important;
}

.padding-right-icon {
    padding: 0 36px 0 16px;
}

.sort-select {
    cursor: pointer;
    appearance: none;
    min-width: 170px;
}

select#sort.field-input.sort-select.padding-right-icon {
    width: 174.594px;
    height: 44px;
    padding: 0px 36px 0px 13.6px;
    border: 1px solid #3D4540;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 12px;
    background: #191B1E;
    font-size: 15px;
    font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    white-space: pre;
    line-height: 1.5;
    color: #F1F4F2;
    transition: none;
}

select#sort.field-input.sort-select.padding-right-icon:focus,
select#sort.field-input.sort-select.padding-right-icon:active {
    border-color: #09FAC4 !important;
    outline: none !important;
    box-shadow: none !important;
}

.sort-select option {
    background: #0A0D0B;
    color: #F1F4F2;
}

.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #A5ADA8;
    pointer-events: none;
}

.left-icon {
    left: 12px;
}

.right-icon {
    right: 12px;
}

/* Utils */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Product Count */
.product-count {
    margin-top: 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: #A5ADA8;
}

/* --- PRODUCTS GRID SECTION --- */
.products-section {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
}

.products-grid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1350px) {

    .products-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {

    .products-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    background: #071018 !important;
    border: 1px solid #104953 !important;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 372px;
    width: 345px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.1s ease;
}

.product-card:hover {
    border-color: color-mix(in oklab, #09FAC4 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #09FAC4 !important;
    transform: translateY(-3px);
}

.product-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: radial-gradient(circle at center, #0A2635 0%, #071018 100%) !important;
    border-bottom: 1px solid #104953 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-placeholder-icon {
    font-size: 2.5rem;
    color: #5db2cc !important;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.product-card:hover .product-placeholder-icon {
    transform: scale(1.15);
}

.product-body {
    background: radial-gradient(circle at top left, #061722 0%, #090F12 100%) !important;
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.product-category {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-faint, #9fa7a2);
    letter-spacing: 0.05em;
}

.product-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
}

.product-title a {
    color: var(--color-ink, #f1f4f2);
    text-decoration: none;
    transition: none !important;
}

.product-title a:hover,
.product-card:hover .product-title a {
    color: var(--color-primary, #09fac4);
}

.product-desc {
    font-size: 0.85rem;
    color: var(--color-muted, #a5ada8);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-price {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-ink, #f1f4f2);
}

.btn-add {
    width: 76px;
    height: 38px;
    min-height: 38px;
    background-color: #09FAC4 !important;
    color: #081410 !important;
    border: none !important;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: background-color 0.2s ease, box-shadow 0s !important;
}

.btn-add svg {
    color: #081410 !important;
    stroke: #081410 !important;
}

.btn-add:hover {
    background-color: #22fbca !important;
    color: #081410 !important;
    border: none !important;
    transform: none !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    transition: background-color 0.2s ease, box-shadow 0s !important;
}

.btn-add:hover svg {
    color: #081410 !important;
    stroke: #081410 !important;
}

.btn-add:active {
    transform: none !important;
}

/* ========================================== */
/* DESIGN SYSTEM - SUBSCRIPTIONS SECTION      */
/* ========================================== */
.subscriptions-section {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
}

.subscriptions-header {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2.5rem;
}

.subscriptions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

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

@media (max-width: 639px) {
    .subscriptions-grid {
        grid-template-columns: 1fr;
    }
}

.subscription-card {
    background: radial-gradient(circle at top left, #061722 0%, #090F12 100%) !important;
    border: 1px solid #104953 !important;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: none !important;
    width: 345px !important;
    max-width: 345px !important;
    height: 822px !important;
    margin: 0 auto;
}

.subscription-card:hover {
    border-color: color-mix(in oklab, var(--series-accent, #09FAC4) 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px var(--series-accent, #09FAC4) !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.subscription-media {
    position: relative;
    aspect-ratio: 343 / 214 !important;
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-logo-svg {
    width: 35px !important;
    height: 29px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.subscription-card:hover .subscription-logo-svg,
.subscription-logo-svg:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.subscription-logo-svg .logo-top {
    fill: #3C4445 !important;
}

.subscription-logo-svg .logo-bottom {
    fill: var(--series-accent, #09FAC4) !important;
}

.subscription-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--series-accent, #09FAC4);
    opacity: 0.9;
}

.subscription-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.subscription-badge {
    height: 24px !important;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-color: var(--series-accent, #09FAC4);
    color: #0A0D0D;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    -webkit-text-stroke: 0.3px #0A0D0D;
}

.subscription-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.2;
}

.subscription-desc {
    font-size: 0.85rem;
    color: var(--color-muted, #a1a1aa);
    text-align: center;
    margin-top: 6px;
}

.subscription-select-wrapper {
    position: relative;
    width: 100%;
    max-width: 16rem;
    margin: 0 auto;
}

.subscription-select {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    background-color: #0A0D0D;
    border: 1px solid #292E30;
    color: #FFFFFF;
    border-radius: var(--radius-md, 8px);
    padding: 10px 32px 10px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: none !important;
    animation: none !important;
}

.subscription-select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-muted, #a1a1aa);
    font-size: 0.7rem;
    transition: none !important;
    animation: none !important;
}

.subscription-select-wrapper:focus-within .subscription-select-arrow,
.subscription-select:focus+.subscription-select-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: #09FAC4;
    transition: none !important;
    animation: none !important;
}

.subscription-select:hover {
    border-color: #3A4043 !important;
    transition: none !important;
    animation: none !important;
}

.subscription-select:focus,
.subscription-select:active {
    outline: 2px solid #09FAC4 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #0A0D0D, 0 0 0 4px #09FAC4 !important;
    border-color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.subscription-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    height: 21px;
    padding: 0 8px;
    background-color: #3B321A;
    color: #F3B73A;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 8px;
}

.subscription-price-box {
    text-align: center;
    margin-top: 12px;
}

.subscription-old-price {
    font-family: var(--font-mono, monospace);
    font-size: 1.2rem;
    font-weight: 600;
    color: #9EA7A2;
    text-decoration: line-through;
    margin-right: 6px;
}

.subscription-price {
    font-family: var(--font-mono, monospace);
    font-size: 1.75rem;
    font-weight: 700;
    color: #09FAC4 !important;
    -webkit-text-stroke: 0.50px;
}

.subscription-period {
    font-size: 0.85rem;
    color: var(--color-muted, #a1a1aa);
    margin-left: 4px;
}

.subscription-equivalent {
    font-size: 0.85rem;
    color: var(--color-muted, #a1a1aa);
    margin-top: 4px;
    font-weight: 500;
}

.subscription-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subscription-features li {
    font-size: 0.875rem;
    color: #E2E8F0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.subscription-features li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #09FAC4 !important;
    margin-top: 6px;
    flex-shrink: 0;
}

.subscription-packages-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #FFFFFF;
    border-top: 1px solid #292E30;
    padding-top: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.subscription-packages-count {
    font-family: var(--font-mono, monospace);
    color: var(--color-faint, #52525b);
    font-weight: 500;
}

.packages-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.package-mini-thumb {
    aspect-ratio: 4 / 3;
    background-color: #0A0D0D;
    border: 1px solid #292E30;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--color-faint, #52525b);
    text-decoration: none;
    overflow: hidden;
    transition: none !important;
    animation: none !important;
}

.package-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    display: block;
}

.package-mini-thumb:hover img {
    opacity: 1;
}

.package-mini-thumb:hover {
    border-color: #09FAC4 !important;
    background-color: #12171A !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.subscription-btn {
    margin-top: auto;
    width: 100%;
    background-color: #09FAC4 !important;
    color: #0A0D0D !important;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    padding: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: none !important;
    animation: none !important;
    box-shadow: 0 10px 28px -4px color-mix(in oklab, #09FAC4 45%, transparent) !important;
}

.subscription-btn:hover {
    background-color: #4FFBCA !important;
    border-color: color-mix(in oklab, #09FAC4 65%, transparent) !important;
    box-shadow: 0 14px 34px -4px color-mix(in oklab, #09FAC4 65%, transparent) !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* =========================================
   TEMPLATE DÉTAILS PRODUIT (.mscript-product-*)
   ========================================= */

/* Layout principal interne */
.mscript-product-details {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    .mscript-product-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }
}

/* Zone des Visuels / Galerie */
.mscript-product-gallery-sticky {
    min-width: 0;
}

@media (min-width: 1024px) {
    .mscript-product-gallery-sticky {
        position: sticky;
        top: 6rem;
        align-self: flex-start;
    }
}

.mscript-product-gallery {
    min-width: 0;
    max-width: 100%;
}

.mscript-product-gallery-inner {
    position: relative;
    min-width: 0;
}

.mscript-product-media-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid #1C2225 !important;
}

.mscript-product-media-track {
    display: flex;
}

.mscript-product-media-slide {
    position: relative;
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
}

.mscript-product-video-placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mscript-product-video-tag {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 0.875rem;
    border: 1px solid var(--hairline-strong);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

/* Zone Info Produit */
.mscript-product-info {
    min-width: 0;
}

.mscript-product-series-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mscript-product-series-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-decoration: none;
}

.mscript-product-series-link:hover {
    text-decoration: underline;
}

.mscript-product-title {
    margin-top: 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    font-family: var(--font-display);
    color: var(--ink);
}

/* Carte de Prix & Actions */
.mscript-product-pricing-card {
    margin-top: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid #104953 !important;
    padding: 1rem;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
}

@media (min-width: 640px) {
    .mscript-product-pricing-card {
        padding: 1.25rem;
    }
}

.mscript-product-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mscript-product-price-row {
        gap: 1rem;
    }
}

.mscript-product-price-wrapper {
    min-width: 0;
}

.mscript-product-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.625rem;
}

.mscript-product-price-amount,
.mscript-product-price {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    -webkit-text-stroke: 0.50px;
}

@media (min-width: 640px) {

    .mscript-product-price-amount,
    .mscript-product-price {
        font-size: 2rem;
    }
}

.mscript-product-price-subtext {
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-actions {
    margin-top: 1.25rem;
}

.mscript-product-actions-grid {
    display: grid;
    gap: 0.625rem;
}

.mscript-product-actions-row-top {
    position: relative;
}

.mscript-product-actions-flex {
    display: flex;
    gap: 0.625rem;
}

.mscript-product-action-btn {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mscript-product-btn-buy {
    min-width: 0;
    flex: 2 1 0%;
    min-height: 48px !important;
    font-size: 1rem !important;
}

.mscript-product-btn-gift {
    min-width: 0;
    flex: 1 1 0%;
    min-height: 48px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    font-size: 1rem !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mscript-product-btn-gift:hover {
    background-color: var(--surface-2);
}

.mscript-product-btn-cart {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.mscript-product-btn-cart:hover {
    background-color: var(--surface-2);
}

/* Grille d'avantages (Perks) */
.mscript-product-perks-grid {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mscript-product-perks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mscript-product-perk-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.85rem;
    color: var(--muted);
}

@media (min-width: 640px) {
    .mscript-product-perk-item {
        justify-content: center;
    }
}

.mscript-product-perk-icon {
    flex-shrink: 0;
    color: var(--primary);
}

/* Description produit */
.mscript-product-description {
    margin-top: 1.25rem;
    font-size: 0.975rem !important;
    line-height: 1.625;
    letter-spacing: -0.01em !important;
    color: var(--muted);
}

/* Onglets Caractéristiques & Dépendances */
.mscript-product-tabs-wrapper {
    margin-top: 1.25rem;
}

.mscript-product-tab-list {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--hairline);
}

.mscript-product-tab-btn {
    position: relative;
    margin-bottom: -1px;
    padding: 0.625rem 0.875rem;
    font-size: 0.88rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.2s ease;
}

.mscript-product-tab-btn:hover {
    color: var(--ink);
}

.mscript-product-tab-btn-active {
    color: var(--ink);
}

.mscript-product-tab-indicator {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--primary);
}

/* Onglets Dépendances Produit */
.mscript-product-dependency-wrapper {
    margin-top: 24px !important;
}

.mscript-product-dependency-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.mscript-product-dependency-card {
    position: relative;
    width: 100%;
    max-width: 696px;
    height: 56px;
    background: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

.mscript-dependency-badge-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: none !important;
}

.mscript-dependency-badge-link:hover {
    background: rgba(30, 102, 143, 0.25) !important;
    transition: none !important;
}

.mscript-dependency-badge-link.info-only,
.mscript-dependency-badge-link.disabled,
.mscript-dependency-badge-info {
    cursor: default !important;
    pointer-events: none !important;
    background: transparent !important;
}

.mscript-dependency-badge-link.info-only:hover,
.mscript-dependency-badge-link.disabled:hover,
.mscript-dependency-badge-info:hover {
    background: transparent !important;
}

.mscript-dependency-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
}

.mscript-dependency-icon.info-only,
.mscript-dependency-icon.disabled {
    stroke: #64748B !important;
    color: #64748B !important;
}

.mscript-dependency-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

.mscript-product-feature-grid {
    margin-top: 24px !important;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 420px) {
    .mscript-product-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mscript-product-feature-card {
    width: 100%;
    max-width: 343px;
    min-height: 119px;
    height: auto !important;
    box-sizing: border-box;
    background-color: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: flex-start;
    transition: none !important;
}

.mscript-product-feature-card:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-feature-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #104953 !important;
    margin-right: 0.875rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.mscript-product-feature-body {
    min-width: 0;
    padding-top: 0.125rem;
}

.mscript-product-feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.375;
    color: var(--ink);
    font-family: var(--font-sans);
}

.mscript-product-feature-desc {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.625;
    color: var(--muted);
    font-family: var(--font-sans);
}

/* Sub-section: Used By */
.mscript-product-used-by-section,
#mscript-used-by-servers {
    border-top: 1px solid var(--hairline);
    margin-top: 24px !important;
    padding-top: 24px !important;
}

.mscript-product-sub-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    font-family: var(--font-display);
}

.mscript-product-stats-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.mscript-product-stat-card {
    width: 100%;
    max-width: 343px;
    min-height: 119px;
    height: 119px;
    box-sizing: border-box;
    background-color: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: var(--radius-lg);
    padding: 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: none !important;
}

.mscript-product-stat-card:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-stat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
}

.mscript-product-stat-icon {
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.mscript-product-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-stat-value,
.mscript-product-used-by .mscript-product-stat-value,
.mscript-product-used-by-section .mscript-product-stat-value {
    display: block;
    font-family: 'Bricolage Grotesque', var(--font-display), sans-serif !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1;
    color: #F1F4F2 !important;
    -webkit-text-stroke: 0.50px #F1F4F2 !important;
}

/* Sub-section: Subscription Banner */
.mscript-product-sub-banner-section {
    border-top: 1px solid var(--hairline);
    padding-top: 1.5rem;
    margin-top: 60px !important;
}

.mscript-product-sub-banner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid #1C2225 !important;
    background-color: #090F12 !important;
    transition: none !important;
}

@media (min-width: 640px) {
    .mscript-product-sub-banner {
        flex-direction: row;
        align-items: stretch;
    }
}

.mscript-product-sub-banner:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-sub-media {
    position: relative;
    height: 6rem;
    width: 100%;
    flex-shrink: 0;
    border-right: 1px solid #292E30;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mscript-product-sub-media img,
.mscript-product-video-placeholder img,
.subscription-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 640px) {
    .mscript-product-sub-media {
        height: auto;
        width: min(48%, 15.5rem);
    }
}

.mscript-product-sub-placeholder {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 10px;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #090F12 !important;
    background: #090F12 !important;
}

.mscript-product-sub-body {
    min-width: 0;
    flex: 1 1 0%;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
}

.mscript-product-sub-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.mscript-product-sub-heading {
    margin-top: 0.125rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    font-family: var(--font-display);
}

.mscript-product-sub-desc {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-sub-actions {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mscript-product-sub-btn {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mscript-product-sub-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.mscript-product-sub-link:hover {
    color: var(--primary);
}

/* =========================================
   SECTION : FEATURES (PRÉSENTATION SCRIPT)
   ========================================= */
.mscript-features-wrapper {
    width: 100%;
    max-width: 2550px;
    margin: 0px 0px;
    padding: 64px 0px 64px 0px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Hairline-top 1px */
    background-color: var(--surface-color, var(--surface-2, #090F12));
    height: auto !important;
}

.mscript-features-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.mscript-features-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
}

.mscript-feature-item {
    display: flex;
    align-items: center;
    gap: 48px;
    width: 1452px;
    max-width: 100%;
    height: auto;
}

.mscript-feature-item.mscript-feature-reverse {
    flex-direction: row-reverse;
}

.mscript-feature-visual {
    width: 512px;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    min-width: 0;
}

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

.mscript-img-placeholder {
    width: 512px;
    height: 256px;
    background-color: var(--surface, #061722);
    border: 1px solid var(--hairline, #292E30);
    border-radius: var(--radius-lg, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.875rem;
    color: var(--muted, #a1a1aa);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.mscript-feature-title {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink, #ffffff);
    margin-bottom: 16px;
}

.mscript-feature-desc {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted, #a1a1aa);
}

@media (max-width: 900px) {

    .mscript-feature-item,
    .mscript-feature-item.mscript-feature-reverse {
        flex-direction: column;
        gap: 24px;
        height: auto;
        width: 100%;
    }

    .mscript-feature-visual,
    .mscript-img-placeholder {
        width: 100%;
        max-width: 512px;
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .mscript-features-list {
        gap: 48px;
    }
}

/* =========================================
   SECTION : YOU MIGHT ALSO NEED
   ========================================= */
.mscript-related-container {
    width: 100% !important;
    max-width: 1452px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 0px solid #29302C !important;
    display: block;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-family: var(--font-sans, Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #F1F4F2 !important;
}

@media (max-width: 2550px) {
    .mscript-related-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.mscript-related-title {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--ink, #ffffff);
    margin-bottom: 0;
    line-height: 1.2;
}

.mscript-related-grid {
    width: 100%;
    max-width: 1452px;
    margin: 24px 0px 0px;
    border: 0px solid #29302C;
    display: grid;
    grid-template-columns: repeat(4, 351px);
    gap: 16px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: var(--font-sans, Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif);
    font-weight: 400;
    line-height: 1.5;
    color: #F1F4F2;
}

.mscript-related-grid .mscript-product-card {
    width: 351px;
    height: 312px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.mscript-related-grid .mscript-card-header {
    width: 351px;
    height: 197px;
    flex-shrink: 0;
}

.mscript-related-grid .mscript-card-body {
    width: 351px;
    height: 115px;
    padding-top: 12px !important;
    padding-bottom: 13px !important;
    padding-left: 16px !important;
    padding-right: 13px !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mscript-related-grid .product-footer,
.mscript-related-grid .mscript-card-footer {
    margin-top: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}

@media (max-width: 1480px) {
    .mscript-related-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        width: 100%;
    }

    .mscript-related-grid .mscript-product-card,
    .mscript-related-grid .mscript-card-header,
    .mscript-related-grid .mscript-card-body {
        width: 100%;
    }
}

/* ========================================== */
/* MODALE POPUP : GIFT THIS PACKAGE           */
/* ========================================== */

/* Conteneur Superposition / Overlay Flottant (10px sous les boutons Buy Now / Gift) */
.mscript-product-actions-row-top {
    position: relative !important;
}

.mscript-modal-overlay {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    margin-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: auto !important;
    transition: none !important;
}

.mscript-modal-overlay.is-active {
    display: flex !important;
}

/* Conteneur principal de la carte */
.mscript-gift-modal {
    width: 100%;
    max-width: 656px;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
    border: 1px solid #104953 !important;
    border-radius: 10px;
    padding: 13px 17px 19px 17px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* En-tête */
.mscript-gift-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mscript-gift-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mscript-gift-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}

.mscript-gift-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    color: #A1A1AA;
    margin: 0;
}

/* Carré de hover 32x32px et 8px de border-radius pour la croix */
.mscript-gift-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A1A1AA;
    transition: none !important;
}

.mscript-gift-close:hover {
    background: #191B1E !important;
    transition: none !important;
}

/* Input */
.mscript-gift-input {
    width: 100%;
    height: 41px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 6px;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    box-sizing: border-box;
    margin-top: 14px;
}

.mscript-gift-input::placeholder {
    color: #A1A1AA;
}

.mscript-gift-input:focus {
    outline: none;
    border-color: #09FAC4;
}

/* Footer / Boutons (Espace de 41px depuis l'input) */
.mscript-gift-footer {
    display: flex;
    gap: 16px;
    margin-top: 41px;
}

.mscript-gift-btn-cancel,
.mscript-gift-btn-add {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Bouton Cancel : Hover accent color texte & bordure sans transition (instant hover) */
.mscript-gift-btn-cancel {
    background: #191B1E;
    border: 1px solid #292E30;
    color: #FFFFFF;
    transition: none !important;
}

.mscript-gift-btn-cancel:hover {
    color: #09FAC4 !important;
    border-color: #09FAC4 !important;
    filter: none !important;
    transition: none !important;
}

/* Bouton Add Gift : Mêmes double "glow" que le btn Buy Now avec instant hover */
.mscript-gift-btn-add {
    background: #09FAC4 !important;
    border: none !important;
    color: #0A0D0D !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
}

.mscript-gift-btn-add:hover {
    background: #22fbca !important;
    color: #0A0D0D !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
}

.product-card,
.mscript-product-card,
[data-href] {
    cursor: pointer;
}

/* ========================================== */
/* COMPOSANT : STICKY BUY BAR                 */
/* ========================================== */

/* Conteneur global fixe au bas de l'écran (caché par défaut, aucune transition) */
.mscript-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 76px;
    background: rgba(10, 13, 11, 0.5) !important;
    /* Même transparence que le header */
    backdrop-filter: none !important;
    /* Aucun flou */
    border-top: 1px solid #292E30;
    z-index: 90;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Classe ajoutée par JS pour faire apparaître la barre */
.mscript-sticky-bar.is-visible {
    transform: translateY(0);
}

/* Conteneur interne (sans margin sur les côtés, padding top 14px et 32px sur les côtés) */
.mscript-sticky-inner {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* Bloc Gauche : Image + Textes */
.mscript-sticky-left {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Espace de 10px entre image et meta */
}

/* Emplacement Image du produit (boîte vide [IMG]) */
.mscript-sticky-img {
    width: 70px;
    height: 43px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191B1E;
    border: 1px solid #292E30;
    color: #A1A1AA;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
    overflow: hidden;
}

.mscript-sticky-img img,
.product-media img,
.mscript-card-header img,
.mscript-card-image img,
.sub-card-img,
.package-mini-thumb img,
.mscript-checkout-item .mscript-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: none !important;
}

.product-card:hover .product-media img,
.mscript-product-card:hover .product-media img,
.product-card:hover .mscript-card-header img,
.mscript-product-card:hover .mscript-card-header img,
.product-card:hover .mscript-card-image img,
.mscript-product-card:hover .mscript-card-image img {
    transform: scale(1.03) translateZ(0) !important;
    transition: none !important;
}

/* Meta : Titre et Prix */
.mscript-sticky-meta,
.mscript-sticky-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Espace de 3px en hauteur entre titre et prix */
}

.mscript-sticky-title {
    font-family: 'Inter', sans-serif;
    font-size: 15.2px;
    font-weight: 600;
    color: #F1F4F2;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
}

.mscript-sticky-price {
    font-family: 'JetBrains Mono', monospace;
    /* Utilise la police système ou JetBrains si chargée */
    font-size: 18px;
    font-weight: 600;
    color: #F1F4F2;
    line-height: 1.25;
    margin: 0;
}

/* Bouton Add to cart */
.mscript-sticky-btn {
    width: auto !important;
    min-width: fit-content !important;
    height: 48px;
    padding: 0 20px;
    background: #191B1E !important;
    border: 1px solid #292E30 !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F1F4F2 !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

.mscript-sticky-btn:hover {
    background: #191B1E !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

.mscript-sticky-btn:hover svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
}

.mscript-sticky-btn.is-added,
.mscript-sticky-bar .mscript-btn-add.is-added {
    background: #191B1E !important;
    border: 1px solid #09FAC4 !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-sticky-btn.is-added svg,
.mscript-sticky-bar .mscript-btn-add.is-added svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
}

/* ========================================== */
/* COMPOSANT : SIDE CART MENU                 */
/* ========================================== */

/* Overlay Global et Backdrop */
.mscript-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mscript-cart-overlay.is-open {
    pointer-events: auto;
    opacity: 1;
}

.mscript-cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

/* Figer le scroll de la page quand le panier est ouvert */
body.cart-is-open {
    overflow: hidden;
}

/* Panier Latéral */
.mscript-cart-panel {
    position: relative;
    width: 419px;
    max-width: 100vw;
    height: 100dvh;
    background-color: var(--surface-color, #0A0D0D);
    border-left: 1px solid var(--hairline-strong, rgba(255, 255, 255, 0.2));
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.mscript-cart-overlay.is-open .mscript-cart-panel {
    transform: translateX(0);
}

/* Layout Interne du Panier - Header */
.mscript-cart-header {
    width: 419px;
    max-width: 100%;
    height: 64px;
    min-height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid var(--hairline, #1C2225);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.mscript-cart-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.mscript-cart-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: #A1A1AA;
}

.mscript-cart-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #A1A1AA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: none !important;
}

.mscript-cart-close svg {
    width: 22px;
    height: 22px;
}

.mscript-cart-close:hover {
    background-color: #191B1E !important;
    color: #FFFFFF !important;
    transition: none !important;
}

/* Zone Scrollable des produits */
.mscript-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #292E30 transparent;
}

/* Container-empty-cart */
.mscript-cart-empty-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    position: relative;
    width: 100%;
    max-width: 419px;
    margin: 40px auto;
    box-sizing: border-box;
}

/* Container-empty-checkout */
.mscript-checkout-empty-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    position: relative;
    width: 512px;
    height: 286px;
    max-width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.mscript-checkout-empty-container .mscript-cart-empty-icon-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 80px;
    height: 80px;
    background: radial-gradient(120% 90% at 50% -10%, rgba(9, 93, 250, 0.14) 0%, rgba(9, 93, 250, 0) 88.11%);
    border: 1px solid #292E30;
    border-radius: 9999px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-checkout-empty-container .mscript-cart-empty-icon {
    width: 35px;
    height: 31px;
    object-fit: contain;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-checkout-empty-container .mscript-cart-empty-title {
    font-size: 40px;
    font-weight: 800;
    margin-top: 24px;
}

.mscript-checkout-empty-container .mscript-cart-empty-text {
    font-size: 16px;
    font-weight: 400;
    margin-top: 12px;
}

.mscript-cart-empty-icon-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 64px;
    height: 64px;
    background: radial-gradient(120% 90% at 50% -10%, rgba(9, 93, 250, 0.14) 0%, rgba(9, 93, 250, 0) 88.11%);
    border: 1px solid #292E30;
    border-radius: 9999px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-cart-empty-icon {
    width: 29px;
    height: 25px;
    object-fit: contain;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-cart-empty-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px 0px;
    width: 100%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.mscript-cart-empty-title {
    width: 100%;
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18.4px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.368px;
    color: #F1F4F2;
}

.mscript-cart-empty-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0px 0px;
    width: 100%;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.mscript-cart-empty-text {
    width: 256px;
    max-width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14.4px;
    line-height: 23px;
    text-align: center;
    color: #A5ADA8;
}

.mscript-cart-empty-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0px 0px;
    width: 100%;
    flex: none;
    order: 3;
    flex-grow: 0;
}

.mscript-cart-empty-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 18.4px;
    gap: 8px;
    width: 144.8px;
    height: 44px;
    min-height: 44px;
    background: #09FAC4 !important;
    color: #081410 !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    border-radius: 12px;
    border: none !important;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-empty-btn:hover {
    background: #4FFBCA !important;
    color: #081410 !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* Wrapper pour chaque item de panier */
.mscript-cart-item-wrapper {
    padding: 15px 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Carte Produit dans le panier */
.mscript-cart-item {
    width: 387px;
    max-width: 100%;
    height: 101px;
    padding: 12px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    box-sizing: border-box;
}

.mscript-cart-item+.mscript-cart-item {
    margin-top: 12px;
}

.mscript-cart-item .mscript-sticky-img,
.mscript-cart-item-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.mscript-cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    flex: 1;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-top: 10px;
}

.mscript-cart-item-category {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: #A1A1AA;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mscript-cart-item-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.mscript-cart-item-name a,
.mscript-cart-item-title-link {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-item-name a:hover,
.mscript-cart-item-title-link:hover {
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-item-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    text-align: right;
}

.mscript-cart-item-delete {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    background: transparent;
    border: none;
    color: #A1A1AA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
    transition: color 0.2s;
}

.mscript-cart-item>.mscript-cart-item-delete {
    top: 12px;
    right: 12px;
}

.mscript-cart-item-delete svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.mscript-cart-item-delete:hover {
    color: #ff4a4a !important;
}

/* Footer du Panier */
.mscript-cart-footer {
    width: 419px;
    max-width: 100%;
    height: 159.719px;
    min-height: 159.719px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 24px;
    border-top: 1px solid var(--hairline, #1C2225);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.mscript-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #A1A1AA;
}

.mscript-cart-total-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
}

.mscript-cart-btn-view {
    width: 379px;
    max-width: 100%;
    height: 44px;
    background: #09FAC4 !important;
    color: #0A0D0D !important;
    border: none !important;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-btn-view:hover {
    background: #22fbca !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-continue {
    text-align: center;
    background: transparent;
    border: none;
    color: #A1A1AA;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: none !important;
}

.mscript-cart-continue:hover {
    color: #09FAC4 !important;
    transition: none !important;
}

/* ========================================== */
/* ÉTATS DES BOUTONS D'AJOUT AU PANIER         */
/* ========================================== */

/* Adaptation de la largeur automatique et alignement du texte/SVG */
.btn-add.is-added,
.mscript-btn-add.is-added,
.mscript-gift-btn-add.is-added,
.mscript-sticky-btn.is-added,
.mscript-product-btn-buy.is-added,
.mscript-product-action-btn.is-added,
.btn-add.is-in-cart,
.mscript-btn-add.is-in-cart,
.mscript-gift-btn-add.is-in-cart,
.mscript-sticky-btn.is-in-cart,
.mscript-product-btn-buy.is-in-cart,
.mscript-product-action-btn.is-in-cart {
    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.mscript-product-btn-cart.is-added,
.mscript-product-btn-cart.is-in-cart {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

/* Alignement et dimensions SVG (17x17px blanc) */
.btn-add.is-added svg,
.mscript-btn-add.is-added svg,
.mscript-gift-btn-add.is-added svg,
.mscript-sticky-btn.is-added svg,
.mscript-product-btn-buy.is-added svg,
.mscript-product-action-btn.is-added svg,
.btn-add.is-in-cart svg,
.mscript-btn-add.is-in-cart svg,
.mscript-gift-btn-add.is-in-cart svg,
.mscript-sticky-btn.is-in-cart svg,
.mscript-product-btn-buy.is-in-cart svg,
.mscript-product-action-btn.is-in-cart svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

/* État 1 : Added (2 secondes) */
.btn-add.is-added,
.mscript-btn-add.is-added,
.mscript-gift-btn-add.is-added,
.mscript-sticky-btn.is-added,
.mscript-product-btn-buy.is-added,
.mscript-product-action-btn.is-added {
    cursor: default;
    background: #191B1E !important;
    border: 1px solid #09FAC4 !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.btn-add.is-added svg,
.mscript-btn-add.is-added svg,
.mscript-gift-btn-add.is-added svg,
.mscript-sticky-btn.is-added svg,
.mscript-product-btn-buy.is-added svg,
.mscript-product-action-btn.is-added svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
}

/* État 2 : In cart - View (au bout des 5s) */
.btn-add.is-in-cart,
.mscript-btn-add.is-in-cart,
.mscript-gift-btn-add.is-in-cart,
.mscript-sticky-btn.is-in-cart,
.mscript-product-btn-buy.is-in-cart,
.mscript-product-action-btn.is-in-cart {
    background: #191B1E !important;
    border: 1px solid #292E30 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

.btn-add.is-in-cart:hover,
.mscript-btn-add.is-in-cart:hover,
.mscript-gift-btn-add.is-in-cart:hover,
.mscript-sticky-btn.is-in-cart:hover,
.mscript-product-btn-buy.is-in-cart:hover,
.mscript-product-action-btn.is-in-cart:hover {
    background: #191B1E !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* Le SVG "done" dans le dernier état (In cart - View) : blanc au repos, #09FAC4 au hover */
.btn-add.is-in-cart svg,
.mscript-btn-add.is-in-cart svg,
.mscript-gift-btn-add.is-in-cart svg,
.mscript-sticky-btn.is-in-cart svg,
.mscript-product-btn-buy.is-in-cart svg,
.mscript-product-action-btn.is-in-cart svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    transition: none !important;
}

.btn-add.is-in-cart:hover svg,
.mscript-btn-add.is-in-cart:hover svg,
.mscript-gift-btn-add.is-in-cart:hover svg,
.mscript-sticky-btn.is-in-cart:hover svg,
.mscript-product-btn-buy.is-in-cart:hover svg,
.mscript-product-action-btn.is-in-cart:hover svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
}

/* Style des images de la section Features */
.mscript-feature-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #1C2225;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ========================================== */
/* STYLES DES PAGES PRODUITS & PANIER         */
/* ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
    --bg: #0A0D0D;
    --surface: #061722;
    --surface-2: #090F12;
    --ink: #ffffff;
    --muted: #a1a1aa;
    --faint: #52525b;
    --primary: #09FAC4;
    --primary-ink: #0A0D0B;
    --sale: #ef4444;
    --hairline: #292E30;
    --hairline-strong: rgba(255, 255, 255, 0.2);
    --radius-sm: 0.375rem;
    --radius-md: 12px;
    --radius-lg: 20px;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body {
    font-family: var(--font-sans);
    background-color: #0A0D0D !important;
    color: var(--ink);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: var(--font-display);
}

.font-mono {
    font-family: var(--font-mono);
}

.font-sans {
    font-family: var(--font-sans);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-ink);
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
    transform: none !important;
}

.btn-primary:hover {
    background-color: #4FFBCA !important;
    color: var(--primary-ink) !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    transition: none !important;
}

.btn-secondary {
    background-color: transparent;
    color: var(--ink);
}

.btn-secondary:hover {
    background-color: var(--surface-2);
    border-color: var(--primary);
    color: var(--primary);
}

/* Utility Token Mappings */
.bg-surface {
    background-color: var(--surface);
}

.bg-surface-2 {
    background-color: var(--surface-2);
}

.border-hairline {
    border-color: #292E30 !important;
}

.border-hairline-strong {
    border-color: var(--hairline-strong);
}

.text-ink {
    color: var(--ink);
}

.text-muted {
    color: var(--muted);
}

.text-primary {
    color: var(--primary);
}

/* Feature, Stat & Subscription Banner Cards Styling & Instant Hover Brightening */
.product-feature-card,
.product-stat-card,
.product-sub-banner,
.mscript-product-feature-card,
.mscript-product-stat-card,
.mscript-product-sub-banner {
    width: 100%;
    box-sizing: border-box;
    background-color: #090F12 !important;
    border-color: #1C2225 !important;
    transition: none !important;
    animation: none !important;
}

.product-feature-card,
.product-stat-card,
.mscript-product-feature-card {
    max-width: 343px;
    min-height: 119px;
    height: auto !important;
    text-align: left;
}

.product-stat-card,
.mscript-product-stat-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 20px 22px !important;
    gap: 10px !important;
}

.product-feature-card:hover,
.product-stat-card:hover,
.product-sub-banner:hover,
.mscript-product-feature-card:hover,
.mscript-product-stat-card:hover,
.mscript-product-sub-banner:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    transition: none !important;
    animation: none !important;
    cursor: default !important;
}

/* Component Section Layout Overrides */
.product-media-wrapper {
    border-color: #1C2225 !important;
}

.product-pricing-card,
.product-sub-body {
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
}

.product-feature-grid {
    margin-top: 24px !important;
}

#component section.border-t {
    margin-top: 24px !important;
    padding-top: 24px !important;
}

#component aside.border-t {
    margin-top: 60px !important;
}

#component {
    padding-top: 32px !important;
    padding-bottom: 0px !important;
}


/* Test Area Container */
#test-area {
    margin-top: 40px;
    padding: 40px;
    background-color: #0A0D0D;
    border: 2px dashed #333;
    border-radius: 12px;
    min-height: 300px;
}

/* =========================================
   ANIMATION GLITCH AVEC LISERÉ 1PX HOLLOW
   ========================================= */

.chromatic-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    padding: 40px;
    width: fit-content;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    user-select: none;
}

/* Conteneurs Div individuels des deux logos (dimensions strictement égales) */
.logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 290px;
    padding: 30px 20px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.logo-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;
}

.mscript-brand {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-group .logo-img {
    height: 35px;
    width: auto;
    object-fit: contain;
}

/* Second Logo : Taille spécifique 21x18px */
.small-brand .logo-img {
    width: 21px;
    height: 18px;
    object-fit: contain;
}

.logo-group .logo-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: #F1F4F2;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}

.accent-m {
    color: #09FAC4;
}

/* Logo principal fixe (au premier plan) */
.main-logo {
    position: relative;
    z-index: 2;
}

/* Couches de Glitch (en arrière-plan) */
.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

/* Liseré 1px Cyan (Texte creux + Contour SVG pur de logo.png sans aucun fond) */
.glitch-cyan .logo-text,
.glitch-cyan .accent-m {
    color: transparent !important;
    -webkit-text-stroke: 1px #09FAC4;
}

.glitch-cyan .logo-img {
    filter: url(#outline-cyan);
}

/* Liseré 1px Magenta #F51DD3 (Texte creux + Contour SVG pur de logo.png sans aucun fond) */
.glitch-magenta .logo-text,
.glitch-magenta .accent-m {
    color: transparent !important;
    -webkit-text-stroke: 1px #F51DD3;
}

.glitch-magenta .logo-img {
    filter: url(#outline-magenta);
}

/* Keyframes du logo principal d'origine */
@keyframes main-logo-jitter {

    0%,
    21% {
        transform: translate(0, 0);
    }

    21.8% {
        transform: translate(5px, -3px);
    }

    22.6%,
    71% {
        transform: translate(0, 0);
    }

    71.8% {
        transform: translate(-5px, 3px);
    }

    72.6%,
    100% {
        transform: translate(0, 0);
    }
}

/* Keyframes Cyan */
@keyframes glitch-cyan-anim {

    0%,
    6% {
        transform: translate(0, 0);
        opacity: 0;
    }

    8% {
        transform: translate(-10px, 3px);
        opacity: 1;
    }

    10%,
    28% {
        transform: translate(0, 0);
        opacity: 0;
    }

    30% {
        transform: translate(14px, -5px);
        opacity: 1;
    }

    32%,
    58% {
        transform: translate(0, 0);
        opacity: 0;
    }

    60% {
        transform: translate(-12px, 4px);
        opacity: 1;
    }

    62%,
    84% {
        transform: translate(0, 0);
        opacity: 0;
    }

    86% {
        transform: translate(10px, -6px);
        opacity: 1;
    }

    88%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

/* Keyframes Magenta */
@keyframes glitch-magenta-anim {

    0%,
    14% {
        transform: translate(0, 0);
        opacity: 0;
    }

    16% {
        transform: translate(12px, -4px);
        opacity: 1;
    }

    18%,
    42% {
        transform: translate(0, 0);
        opacity: 0;
    }

    44% {
        transform: translate(-14px, 5px);
        opacity: 1;
    }

    46%,
    74% {
        transform: translate(0, 0);
        opacity: 0;
    }

    76% {
        transform: translate(10px, 3px);
        opacity: 1;
    }

    78%,
    94% {
        transform: translate(0, 0);
        opacity: 0;
    }

    96% {
        transform: translate(-8px, -4px);
        opacity: 1;
    }

    98%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

/* Déclenchement au Survol (Logo Standard) */
.mscript-brand:hover .main-logo {
    animation: main-logo-jitter 1.5s steps(1) infinite;
}

.mscript-brand:hover .glitch-cyan {
    animation: glitch-cyan-anim 1.5s steps(1) infinite;
}

.mscript-brand:hover .glitch-magenta {
    animation: glitch-magenta-anim 1.7s steps(1) infinite;
}

/* Keyframes réduits pour le Logo Compact */
@keyframes glitch-cyan-anim-small {

    0%,
    6% {
        transform: translate(0, 0);
        opacity: 0;
    }

    8% {
        transform: translate(-6px, 2px);
        opacity: 1;
    }

    10%,
    28% {
        transform: translate(0, 0);
        opacity: 0;
    }

    30% {
        transform: translate(8px, -3px);
        opacity: 1;
    }

    32%,
    58% {
        transform: translate(0, 0);
        opacity: 0;
    }

    60% {
        transform: translate(-7px, 2px);
        opacity: 1;
    }

    62%,
    84% {
        transform: translate(0, 0);
        opacity: 0;
    }

    86% {
        transform: translate(6px, -4px);
        opacity: 1;
    }

    88%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

@keyframes glitch-magenta-anim-small {

    0%,
    14% {
        transform: translate(0, 0);
        opacity: 0;
    }

    16% {
        transform: translate(7px, -2px);
        opacity: 1;
    }

    18%,
    42% {
        transform: translate(0, 0);
        opacity: 0;
    }

    44% {
        transform: translate(-8px, 3px);
        opacity: 1;
    }

    46%,
    74% {
        transform: translate(0, 0);
        opacity: 0;
    }

    76% {
        transform: translate(6px, 2px);
        opacity: 1;
    }

    78%,
    94% {
        transform: translate(0, 0);
        opacity: 0;
    }

    96% {
        transform: translate(-5px, -2px);
        opacity: 1;
    }

    98%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

/* Déclenchement au Survol (Logo Compact) */
.small-brand:hover .glitch-cyan {
    animation: glitch-cyan-anim-small 1.5s steps(1) infinite;
}

.small-brand:hover .glitch-magenta {
    animation: glitch-magenta-anim-small 1.7s steps(1) infinite;
}

/* --- SECOND CHROMATIC WRAPPER VARIANT (BLUE THEME) --- */
.chromatic-wrapper-alt {
    margin-top: 30px;
    background-color: #071119;
    background-image: radial-gradient(circle at top left, rgba(10, 71, 135, 0.2) 0%, rgba(1, 9, 16, 0.2) 50%);
    border: 1px solid #104953;
}

.chromatic-wrapper-alt .logo-box.logo-variant-standard,
.chromatic-wrapper-alt .logo-box.logo-variant-compact {
    background: radial-gradient(circle at bottom right, rgba(7, 16, 24, 0) 0%, rgba(17, 75, 86, 0.2) 100%);
    border: 1px solid #104953;
}

/* --- EXCLUSIVE STYLES FOR PRODUCT CARD IN TEST AREA --- */
#test-area .product-card {
    background: #071018 !important;
    border: 1px solid #104953 !important;
    transition: none !important;
}

#test-area .product-card:hover {
    border-color: color-mix(in oklab, #09FAC4 65%, transparent) !important;
    box-shadow: 0 18px 40px -24px #09FAC4 !important;
    transform: translateY(-4px) !important;
    transition: none !important;
}

#test-area .product-media,
#test-area .product-media.placeholder-ambulance {
    background: radial-gradient(circle at center, #0A2635 0%, #071018 100%) !important;
    border-bottom: 1px solid #104953 !important;
}

#test-area .product-placeholder-icon {
    color: #5db2cc !important;
}

#test-area .product-body {
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

#test-area .btn-add {
    background-color: #09FAC4 !important;
    color: #081410 !important;
    border: none !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: background-color 0.2s ease, box-shadow 0s !important;
}

#test-area .btn-add svg {
    color: #081410 !important;
    stroke: #081410 !important;
}

#test-area .btn-add:hover {
    background-color: #22fbca !important;
    color: #081410 !important;
    border: none !important;
    transform: none !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    transition: background-color 0.2s ease, box-shadow 0s !important;
}

#test-area .btn-add:hover svg {
    color: #081410 !important;
    stroke: #081410 !important;
}

#test-area .btn-add:active {
    transform: none !important;
}

/* ==========================================================================
   mScript Semantic Architecture & De-Tailwinded Component Classes
   ========================================================================== */

/* Breadcrumb Navigation */
.mscript-breadcrumb-wrapper {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    box-sizing: border-box;
}

.mscript-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    height: 20px;
    color: #9CA39E;
}

.soon-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 15px;
    font-size: 9px;
    background-color: #13344C;
    color: #09FAC4;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

footer .soon-badge,
.mscript-footer .soon-badge,
.footer-col .soon-badge,
.mscript-footer-col .soon-badge,
.footer-container .soon-badge,
.mscript-footer-container .soon-badge {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 15px !important;
    font-size: 9px !important;
    background-color: #13344C !important;
    color: #09FAC4 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}

/* CTA Shop Bundles Button Hover Text Swap */
.mscript-btn-bundles-cta .btn-text {
    position: relative;
    display: inline-block;
}

.mscript-btn-bundles-cta:hover .btn-text {
    color: transparent !important;
}

.mscript-btn-bundles-cta:hover .btn-text::after {
    content: attr(data-hover);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-ink, #0A0D0B) !important;
    white-space: nowrap;
}

/* Fallbacks multilingues si data-hover n'est pas encore injecté */
html[lang="fr"] .mscript-btn-bundles-cta:hover .btn-text:not([data-hover])::after {
    content: "Bientôt disponible";
}

html:not([lang="fr"]) .mscript-btn-bundles-cta:hover .btn-text:not([data-hover])::after {
    content: "Comming soon";
}

/* Subcategory Card Bundles Browse Link Hover Text Swap */
.mscript-subcategory-card-bundles .sub-link-text {
    position: relative;
    display: inline-block;
}

.mscript-subcategory-card-bundles:hover .sub-link-text {
    color: transparent !important;
}

.mscript-subcategory-card-bundles:hover .sub-link-text::after {
    content: "Comming soon";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary, #09FAC4) !important;
    white-space: nowrap;
}

/* =========================================
   CONTAINER PRODUIT (.mscript-product-container)
   ========================================= */
.mscript-product-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding-top: 32px !important;
    padding-bottom: 0px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* =========================================
   TEMPLATE DÉTAILS PRODUIT (.mscript-product-*)
   ========================================= */

/* Layout principal interne */
.mscript-product-details {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 32px !important;
}

@media (min-width: 1024px) {
    .mscript-product-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }
}

/* Zone des Visuels / Galerie */
.mscript-product-gallery-sticky {
    min-width: 0;
}

@media (min-width: 1024px) {
    .mscript-product-gallery-sticky {
        position: sticky;
        top: 6rem;
        align-self: flex-start;
    }
}

.mscript-product-gallery {
    min-width: 0;
    max-width: 100%;
}

.mscript-product-gallery-inner {
    position: relative;
    min-width: 0;
}

.mscript-product-media-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid #1C2225 !important;
}

.mscript-product-media-track {
    display: flex;
}

.mscript-product-media-slide {
    position: relative;
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
}

.mscript-product-video-placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mscript-product-video-tag {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 0.875rem;
    border: 1px solid var(--hairline-strong);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

/* Zone Info Produit */
.mscript-product-info {
    min-width: 0;
}

.mscript-product-series-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mscript-product-series-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-decoration: none;
}

.mscript-product-series-link:hover {
    text-decoration: underline;
}

.mscript-product-title {
    margin-top: 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    font-family: var(--font-display);
    color: var(--ink);
}

/* Carte de Prix & Actions */
.mscript-product-pricing-card {
    margin-top: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid #104953 !important;
    padding: 1rem;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
}

@media (min-width: 640px) {
    .mscript-product-pricing-card {
        padding: 1.25rem;
    }
}

.mscript-product-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mscript-product-price-row {
        gap: 1rem;
    }
}

.mscript-product-price-wrapper {
    min-width: 0;
}

.mscript-product-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.625rem;
}

.mscript-product-price-amount,
.mscript-product-price {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

@media (min-width: 640px) {

    .mscript-product-price-amount,
    .mscript-product-price {
        font-size: 2rem;
    }
}

.mscript-product-price-subtext {
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-actions {
    margin-top: 1.25rem;
}

.mscript-product-actions-grid {
    display: grid;
    gap: 0.625rem;
}

.mscript-product-actions-row-top {
    position: relative;
}

.mscript-product-actions-flex {
    display: flex;
    gap: 0.625rem;
}

.mscript-product-action-btn {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mscript-product-btn-buy {
    min-width: 0;
    flex: 2 1 0%;
    min-height: 48px !important;
    font-size: 1rem !important;
}

.mscript-product-btn-gift {
    min-width: 0;
    flex: 1 1 0%;
    min-height: 48px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    font-size: 1rem !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mscript-product-btn-gift:hover {
    background-color: var(--surface-2);
}

.mscript-product-btn-cart {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.mscript-product-btn-cart:hover {
    background-color: var(--surface-2);
}

/* Grille d'avantages (Perks) */
.mscript-product-perks-grid {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mscript-product-perks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mscript-product-perk-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.85rem;
    color: var(--muted);
}

@media (min-width: 640px) {
    .mscript-product-perk-item {
        justify-content: center;
    }
}

.mscript-product-perk-icon {
    flex-shrink: 0;
    color: var(--primary);
}

/* Description produit */
.mscript-product-description {
    margin-top: 1.25rem;
    font-size: 0.975rem !important;
    line-height: 1.625;
    letter-spacing: -0.01em !important;
    color: var(--muted);
}

/* Onglets Caractéristiques & Dépendances */
.mscript-product-tabs-wrapper {
    margin-top: 1.25rem;
}

.mscript-product-tab-list {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--hairline);
}

.mscript-product-tab-btn {
    position: relative;
    margin-bottom: -1px;
    padding: 0.625rem 0.875rem;
    font-size: 0.88rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.2s ease;
}

.mscript-product-tab-btn:hover {
    color: var(--ink);
}

.mscript-product-tab-btn-active {
    color: var(--ink);
}

.mscript-product-tab-indicator {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--primary);
}

/* Onglets Dépendances Produit */
.mscript-product-dependency-wrapper {
    margin-top: 24px !important;
}

.mscript-product-dependency-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.mscript-product-dependency-card {
    position: relative;
    width: 100%;
    max-width: 696px;
    height: 56px;
    background: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

.mscript-dependency-badge-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: none !important;
}

.mscript-dependency-badge-link:hover {
    background: rgba(30, 102, 143, 0.25) !important;
    transition: none !important;
}

.mscript-dependency-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #09FAC4;
    transition: none !important;
}

.mscript-dependency-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

.mscript-product-feature-grid {
    margin-top: 24px !important;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 420px) {
    .mscript-product-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mscript-product-feature-card {
    width: 100%;
    max-width: 343px;
    min-height: 119px;
    height: auto !important;
    box-sizing: border-box;
    background-color: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: flex-start;
    transition: none !important;
}

.mscript-product-feature-card:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-feature-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #104953 !important;
    margin-right: 0.875rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.mscript-product-feature-body {
    min-width: 0;
    padding-top: 0.125rem;
}

.mscript-product-feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.375;
    color: var(--ink);
    font-family: var(--font-sans);
}

.mscript-product-feature-desc {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.625;
    color: var(--muted);
    font-family: var(--font-sans);
}

/* Sub-section: Used By */
.mscript-product-used-by-section,
#mscript-used-by-servers {
    border-top: 1px solid var(--hairline);
    margin-top: 24px !important;
    padding-top: 24px !important;
}

.mscript-product-sub-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    font-family: var(--font-display);
}

.mscript-product-stats-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.mscript-product-stat-card {
    width: 100%;
    max-width: 343px;
    min-height: 119px;
    height: 119px;
    box-sizing: border-box;
    background-color: #090F12 !important;
    border: 1px solid #1C2225 !important;
    border-radius: var(--radius-lg);
    padding: 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: none !important;
}

.mscript-product-stat-card:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-stat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
}

.mscript-product-stat-icon {
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.mscript-product-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-stat-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

/* Sub-section: Subscription Banner */
.mscript-product-sub-banner-section {
    border-top: 1px solid var(--hairline);
    padding-top: 1.5rem;
    margin-top: 60px !important;
}

.mscript-product-sub-banner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid #1C2225 !important;
    background-color: #090F12 !important;
    transition: none !important;
}

@media (min-width: 640px) {
    .mscript-product-sub-banner {
        flex-direction: row;
        align-items: stretch;
    }
}

.mscript-product-sub-banner:hover {
    background-color: #0d161b !important;
    border-color: #293338 !important;
    filter: brightness(1.15) !important;
    cursor: default !important;
}

.mscript-product-sub-media {
    position: relative;
    height: 9rem;
    width: 100%;
    flex-shrink: 0;
    border-right: 1px solid #292E30;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .mscript-product-sub-media {
        height: auto;
        width: min(48%, 15.5rem);
    }
}

.mscript-product-sub-placeholder {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 10px;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mscript-product-sub-body {
    min-width: 0;
    flex: 1 1 0%;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
}

.mscript-product-sub-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.mscript-product-sub-heading {
    margin-top: 0.125rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    font-family: var(--font-display);
}

.mscript-product-sub-desc {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--font-sans);
}

.mscript-product-sub-actions {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mscript-product-sub-btn {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mscript-product-sub-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.mscript-product-sub-link:hover {
    color: var(--primary);
}

/* =========================================
   SECTION : FEATURES (PRÉSENTATION SCRIPT)
   ========================================= */
.mscript-features-wrapper {
    height: auto !important;
    width: 100%;
    max-width: 2550px;
    margin: 0px 0px;
    padding: 64px 0px 64px 0px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Hairline-top 1px */
    background-color: var(--surface-color, var(--surface-2, #090F12));
}

.mscript-features-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.mscript-features-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
}

.mscript-feature-item {
    display: flex;
    align-items: center;
    gap: 48px;
    width: 1452px;
    max-width: 100%;
    height: auto;
}

.mscript-feature-item.mscript-feature-reverse {
    flex-direction: row-reverse;
}

.mscript-feature-visual {
    width: 512px;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    min-width: 0;
}

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

.mscript-img-placeholder {
    width: 512px;
    height: 256px;
    background-color: var(--surface, #061722);
    border: 1px solid var(--hairline, #292E30);
    border-radius: var(--radius-lg, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.875rem;
    color: var(--muted, #a1a1aa);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.mscript-feature-title {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink, #ffffff);
    margin-bottom: 16px;
}

.mscript-feature-desc {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted, #a1a1aa);
}

@media (max-width: 900px) {

    .mscript-feature-item,
    .mscript-feature-item.mscript-feature-reverse {
        flex-direction: column;
        gap: 24px;
        height: auto;
        width: 100%;
    }

    .mscript-feature-visual,
    .mscript-img-placeholder {
        width: 100%;
        max-width: 512px;
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .mscript-features-list {
        gap: 48px;
    }
}

/* =========================================
   SECTION : YOU MIGHT ALSO NEED
   ========================================= */
.mscript-related-container {
    width: 100% !important;
    max-width: 1500px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 525px !important;
    margin-right: 525px !important;
    border: 0px solid #29302C !important;
    display: block;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-family: var(--font-sans, Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #F1F4F2 !important;
}

@media (max-width: 2550px) {
    .mscript-related-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.mscript-related-title {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--ink, #ffffff);
    margin-bottom: 0;
    line-height: 1.2;
}

.mscript-related-grid {
    width: 100%;
    max-width: 1452px;
    margin: 24px 0px 0px;
    border: 0px solid #29302C;
    display: grid;
    grid-template-columns: repeat(4, 351px);
    gap: 16px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: var(--font-sans, Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif);
    font-weight: 400;
    line-height: 1.5;
    color: #F1F4F2;
}

.mscript-related-grid .mscript-product-card {
    width: 351px;
    height: 312px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.mscript-related-grid .mscript-card-header {
    width: 351px;
    height: 197px;
    flex-shrink: 0;
}

.mscript-related-grid .mscript-card-body {
    width: 351px;
    height: 115px;
    padding-top: 12px !important;
    padding-bottom: 13px !important;
    padding-left: 16px !important;
    padding-right: 13px !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mscript-related-grid .product-footer,
.mscript-related-grid .mscript-card-footer {
    margin-top: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}

@media (max-width: 1480px) {
    .mscript-related-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        width: 100%;
    }

    .mscript-related-grid .mscript-product-card,
    .mscript-related-grid .mscript-card-header,
    .mscript-related-grid .mscript-card-body {
        width: 100%;
    }
}

/* =========================================
   SECTION : AVIS CLIENTS (CARROUSEL REVIEWS)
   ========================================= */
body.page-product #reviews,
body.page-product .mscript-reviews-container {
    width: 100% !important;
    max-width: 1500px !important;
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 525px !important;
    margin-right: 525px !important;
    box-sizing: border-box !important;
}

@media (max-width: 2550px) {

    body.page-product #reviews,
    body.page-product .mscript-reviews-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.reviews-carousel-wrapper,
.mscript-reviews-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    touch-action: pan-y;
}

.reviews-track,
.mscript-reviews-track {
    display: flex;
    width: max-content;
}

.review-card,
.mscript-review-card {
    flex: 0 0 368px;
    width: 368px;
    height: 190px;
    background-color: rgba(20, 21, 24, 0.5) !important;
    border: var(--border-thin, 1px solid rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg, 16px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
}

/* =========================================
   SECTION : ABONNEMENTS (SUBSCRIPTIONS)
   ========================================= */
body.page-product #subscriptions,
body.page-product .subscriptions-section {
    width: 100% !important;
    max-width: 1500px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 2550px) {

    body.page-product #subscriptions,
    body.page-product .subscriptions-section {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Bouton d'abonnement bleu (#60A5FA) avec glow fixe et glow hover */
body.page-product #subscriptions .btn.mscript-btn-subscribe-blue,
body.page-product #subscriptions .btn-primary.mscript-btn-subscribe-blue,
.mscript-activities-subscription-section .btn,
.mscript-activities-subscription-section .btn-primary,
.mscript-btn-subscribe-blue,
.btn-primary-blue {
    background: #60A5FA !important;
    background-color: #60A5FA !important;
    color: #06121E !important;
    box-shadow: 0 8px 20px -4px rgba(96, 165, 250, 0.45), 0 4px 10px -2px rgba(96, 165, 250, 0.25) !important;
    border: none !important;
    transition: none !important;
    transform: none !important;
}

body.page-product #subscriptions .btn.mscript-btn-subscribe-blue:hover,
body.page-product #subscriptions .btn-primary.mscript-btn-subscribe-blue:hover,
.mscript-activities-subscription-section .btn:hover,
.mscript-activities-subscription-section .btn-primary:hover,
.mscript-btn-subscribe-blue:hover,
.btn-primary-blue:hover {
    background: #93C5FD !important;
    background-color: #93C5FD !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(96, 165, 250, 0.6), 0 5px 12px -2px rgba(96, 165, 250, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.sub-preview-card,
.mscript-sub-card,
.mscript-sub-preview-card {
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%) !important;
    border: 1px solid #292E30 !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

/* =========================================
   SECTION : FAQ (FOIRE AUX QUESTIONS)
   ========================================= */
body.page-product #section-faq {
    width: 100% !important;
    max-width: 1500px !important;
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body.page-product #section-faq .mscript-faq-wrapper,
body.page-product #section-faq .faq-accordion {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 640px) {

    .review-card,
    .mscript-review-card {
        flex: 0 0 calc(100vw - 48px) !important;
        width: calc(100vw - 48px) !important;
        max-width: 368px !important;
    }

    .faq-question,
    .mscript-faq-question {
        height: auto !important;
        min-height: 50px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }

    .faq-answer,
    .mscript-faq-answer {
        height: auto !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================== */
/* MODALE POPUP : GIFT THIS PACKAGE           */
/* ========================================== */

/* Conteneur Superposition / Overlay Flottant (10px sous les boutons Buy Now / Gift) */
.mscript-product-actions-row-top {
    position: relative !important;
}

.mscript-modal-overlay {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    margin-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: auto !important;
    transition: none !important;
}

.mscript-modal-overlay.is-active {
    display: flex !important;
}

/* Conteneur principal de la carte */
.mscript-gift-modal {
    width: 100%;
    max-width: 656px;
    background: radial-gradient(circle at top left, #061722 0%, #071018 100%) !important;
    border: 1px solid #104953 !important;
    border-radius: 10px;
    padding: 13px 17px 19px 17px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* En-tête */
.mscript-gift-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mscript-gift-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mscript-gift-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}

.mscript-gift-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    color: #A1A1AA;
    margin: 0;
}

/* Carré de hover 32x32px et 8px de border-radius pour la croix */
.mscript-gift-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A1A1AA;
    transition: none !important;
}

.mscript-gift-close:hover {
    background: #191B1E !important;
    transition: none !important;
}

/* Input */
.mscript-gift-input {
    width: 100%;
    height: 41px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 6px;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    box-sizing: border-box;
    margin-top: 14px;
}

.mscript-gift-input::placeholder {
    color: #A1A1AA;
}

.mscript-gift-input:focus {
    outline: none;
    border-color: #09FAC4;
}

/* Footer / Boutons (Espace de 41px depuis l'input) */
.mscript-gift-footer {
    display: flex;
    gap: 16px;
    margin-top: 41px;
}

.mscript-gift-btn-cancel,
.mscript-gift-btn-add {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Bouton Cancel : Hover accent color texte & bordure sans transition (instant hover) */
.mscript-gift-btn-cancel {
    background: #191B1E;
    border: 1px solid #292E30;
    color: #FFFFFF;
    transition: none !important;
}

.mscript-gift-btn-cancel:hover {
    color: #09FAC4 !important;
    border-color: #09FAC4 !important;
    filter: none !important;
    transition: none !important;
}

/* Bouton Add Gift : Mêmes double "glow" que le btn Buy Now avec instant hover */
.mscript-gift-btn-add {
    background: #09FAC4 !important;
    border: none !important;
    color: #0A0D0D !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
}

.mscript-gift-btn-add:hover {
    background: #22fbca !important;
    color: #0A0D0D !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
}

/* ========================================== */
/* COMPOSANT : SIDE CART MENU                 */
/* ========================================== */

body.cart-is-open {
    overflow: hidden;
}

.mscript-cart-panel {
    position: relative;
    width: 419px;
    max-width: 100vw;
    height: 100dvh;
    background-color: var(--surface-color, #0A0D0D);
    border-left: 1px solid var(--hairline-strong, rgba(255, 255, 255, 0.2));
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.mscript-cart-overlay.is-open .mscript-cart-panel {
    transform: translateX(0);
}

.mscript-cart-header {
    width: 419px;
    max-width: 100%;
    height: 64px;
    min-height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid var(--hairline, #1C2225);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.mscript-cart-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.mscript-cart-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: #A1A1AA;
}

.mscript-cart-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #A1A1AA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: none !important;
}

.mscript-cart-close svg {
    width: 22px;
    height: 22px;
}

.mscript-cart-close:hover {
    background-color: #191B1E !important;
    color: #FFFFFF !important;
    transition: none !important;
}

.mscript-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #292E30 transparent;
}

/* Container-empty-cart */
.mscript-cart-empty-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    position: relative;
    width: 100%;
    max-width: 419px;
    margin: auto 0;
    box-sizing: border-box;
}

.mscript-cart-empty-icon-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 64px;
    height: 64px;
    background: radial-gradient(120% 90% at 50% -10%, rgba(9, 93, 250, 0.14) 0%, rgba(9, 93, 250, 0) 88.11%);
    border: 1px solid #292E30;
    border-radius: 9999px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-cart-empty-icon {
    width: 29px;
    height: 25px;
    object-fit: contain;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.mscript-cart-empty-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px 0px;
    width: 100%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.mscript-cart-empty-title {
    width: 100%;
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18.4px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.368px;
    color: #F1F4F2;
}

.mscript-cart-empty-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0px 0px;
    width: 100%;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.mscript-cart-empty-text {
    width: 256px;
    max-width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14.4px;
    line-height: 23px;
    text-align: center;
    color: #A5ADA8;
}

.mscript-cart-empty-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0px 0px;
    width: 100%;
    flex: none;
    order: 3;
    flex-grow: 0;
}

.mscript-cart-empty-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 18.4px;
    gap: 8px;
    width: 144.8px;
    height: 44px;
    min-height: 44px;
    background: #09FAC4 !important;
    color: #081410 !important;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    border-radius: 12px;
    border: none !important;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-empty-btn:hover {
    background: #4FFBCA !important;
    color: #081410 !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-item-wrapper {
    padding: 15px 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mscript-cart-item {
    width: 387px;
    max-width: 100%;
    height: 101px;
    padding: 12px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    box-sizing: border-box;
}

.mscript-cart-item .mscript-sticky-img,
.mscript-cart-item-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.mscript-cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    flex: 1;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-top: 10px;
}

.mscript-cart-item-category {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: #A1A1AA;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mscript-cart-item-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.mscript-cart-item-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    text-align: right;
}

.mscript-cart-item-delete {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    background: transparent;
    border: none;
    color: #A1A1AA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
    transition: color 0.2s;
}

.mscript-cart-item>.mscript-cart-item-delete {
    top: 12px;
    right: 12px;
}

.mscript-cart-item-delete svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.mscript-cart-item-delete:hover {
    color: #ff4a4a !important;
}

.mscript-cart-footer {
    width: 419px;
    max-width: 100%;
    height: 159.719px;
    min-height: 159.719px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 24px;
    border-top: 1px solid var(--hairline, #1C2225);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.mscript-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #A1A1AA;
}

.mscript-cart-total-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
}

.mscript-cart-btn-view {
    width: 379px;
    max-width: 100%;
    height: 44px;
    background: #09FAC4 !important;
    color: #0A0D0D !important;
    border: none !important;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-btn-view:hover {
    background: #22fbca !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-cart-continue {
    text-align: center;
    background: transparent;
    border: none;
    color: #A1A1AA;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: none !important;
}

.mscript-cart-continue:hover {
    color: #09FAC4 !important;
    transition: none !important;
}

/* ========================================== */
/* ÉTATS DES BOUTONS D'AJOUT AU PANIER         */
/* ========================================== */

/* Adaptation de la largeur automatique et alignement du texte/SVG */
.btn-add.is-added,
.mscript-btn-add.is-added,
.mscript-gift-btn-add.is-added,
.mscript-sticky-btn.is-added,
.mscript-product-btn-buy.is-added,
.mscript-product-action-btn.is-added,
.btn-add.is-in-cart,
.mscript-btn-add.is-in-cart,
.mscript-gift-btn-add.is-in-cart,
.mscript-sticky-btn.is-in-cart,
.mscript-product-btn-buy.is-in-cart,
.mscript-product-action-btn.is-in-cart {
    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

#test-area .mscript-product-btn-cart.is-added,
#test-area .mscript-product-btn-cart.is-in-cart,
.mscript-product-btn-cart.is-added,
.mscript-product-btn-cart.is-in-cart {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

/* Alignement et dimensions SVG (17x17px blanc) */
.btn-add.is-added svg,
.mscript-btn-add.is-added svg,
.mscript-gift-btn-add.is-added svg,
.mscript-sticky-btn.is-added svg,
.mscript-product-btn-buy.is-added svg,
.mscript-product-action-btn.is-added svg,
.btn-add.is-in-cart svg,
.mscript-btn-add.is-in-cart svg,
.mscript-gift-btn-add.is-in-cart svg,
.mscript-sticky-btn.is-in-cart svg,
.mscript-product-btn-buy.is-in-cart svg,
.mscript-product-action-btn.is-in-cart svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

/* État 1 : Added (2 secondes) */
.btn-add.is-added,
.mscript-btn-add.is-added,
.mscript-gift-btn-add.is-added,
.mscript-sticky-btn.is-added,
.mscript-product-btn-buy.is-added,
.mscript-product-action-btn.is-added {
    cursor: default;
    background: #191B1E !important;
    border: 1px solid #09FAC4 !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.btn-add.is-added svg,
.mscript-btn-add.is-added svg,
.mscript-gift-btn-add.is-added svg,
.mscript-sticky-btn.is-added svg,
.mscript-product-btn-buy.is-added svg,
.mscript-product-action-btn.is-added svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
}

/* État 2 : In cart - View (au bout des 5s) */
.btn-add.is-in-cart,
.mscript-btn-add.is-in-cart,
.mscript-gift-btn-add.is-in-cart,
.mscript-sticky-btn.is-in-cart,
.mscript-product-btn-buy.is-in-cart,
.mscript-product-action-btn.is-in-cart {
    background: #191B1E !important;
    border: 1px solid #292E30 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

.btn-add.is-in-cart:hover,
.mscript-btn-add.is-in-cart:hover,
.mscript-gift-btn-add.is-in-cart:hover,
.mscript-sticky-btn.is-in-cart:hover,
.mscript-product-btn-buy.is-in-cart:hover,
.mscript-product-action-btn.is-in-cart:hover {
    background: #191B1E !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* Le SVG "done" dans le dernier état (In cart - View) : blanc au repos, #09FAC4 au hover */
.btn-add.is-in-cart svg,
.mscript-btn-add.is-in-cart svg,
.mscript-gift-btn-add.is-in-cart svg,
.mscript-sticky-btn.is-in-cart svg,
.mscript-product-btn-buy.is-in-cart svg,
.mscript-product-action-btn.is-in-cart svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    transition: none !important;
}

.btn-add.is-in-cart:hover svg,
.mscript-btn-add.is-in-cart:hover svg,
.mscript-gift-btn-add.is-in-cart:hover svg,
.mscript-sticky-btn.is-in-cart:hover svg,
.mscript-product-btn-buy.is-in-cart:hover svg,
.mscript-product-action-btn.is-in-cart:hover svg {
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
}

/* ========================================== */
/* PRECISE OVERRIDES FOR PRODUCT PAGE & SECTIONS */
/* ========================================== */

/* 1. (ACTIVITIES SERIES) en couleur d'accentuation */
.mscript-product-series-link {
    color: #09FAC4 !important;
}

/* 2. Ligne de surlignage pour (mscript-product-tab-list) */
.mscript-product-tab-list {
    display: flex !important;
    gap: 0.25rem !important;
    border-bottom: 1px solid var(--hairline, #292E30) !important;
}

.mscript-product-tab-btn {
    position: relative !important;
}

.mscript-product-tab-btn-active,
.mscript-product-tab-btn.active {
    color: #F1F4F2 !important;
}

.mscript-product-tab-indicator {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 2px !important;
    border-radius: 9999px !important;
    background-color: #09FAC4 !important;
    display: block !important;
}

/* 3. (mscript-breadcrumb-nav) alignement parfait à gauche */
.mscript-breadcrumb-wrapper {
    width: 100% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 24px !important;
    padding-bottom: 0px !important;
    box-sizing: border-box !important;
}

.mscript-breadcrumb-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    height: 20px !important;
    color: #9CA39E !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. (container.mscript-product-details) padding-bottom: 32px */
.mscript-product-details,
.container.mscript-product-details,
.mscript-product-container.mscript-product-details {
    padding-bottom: 32px !important;
}

/* 5. Icons dans (mscript-product-perks-grid) en couleur d'accentuation */
.mscript-product-perks-grid .mscript-product-perk-icon,
.mscript-product-perks-grid .mscript-product-perk-icon svg {
    color: #09FAC4 !important;
    stroke: #09FAC4 !important;
}

/* 6. Icons dans (product-feature-card) en couleur #104953 en taille 30x30px avec dégradé transparent de 10px sur le bord droit */
.product-feature-card .mscript-product-feature-icon,
.product-feature-card .mscript-product-feature-icon svg,
.product-feature-card .mscript-product-feature-icon i,
.mscript-product-feature-card .mscript-product-feature-icon,
.mscript-product-feature-card .mscript-product-feature-icon svg,
.mscript-product-feature-card .mscript-product-feature-icon i {
    color: #104953 !important;
    fill: #104953 !important;
    stroke: none !important;
    font-size: 30px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 1 !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

/* ========================================== */
/* COMPOSANT PRESET : PRODUCT BOTTOM SECTIONS */
/* ========================================== */
.mscript-product-bottom-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mscript-product-related-section {
    max-width: 1500px;
    width: 100%;
    margin: 0px auto 0px auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    box-sizing: border-box;
}

.mscript-product-related-section .mscript-related-title {
    font-size: 32px !important;
    font-weight: 800;
    color: #F1F4F2;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.mscript-product-bottom-wrapper #reviews .section-title,
.mscript-product-bottom-wrapper #section-faq .section-title {
    font-size: 32px !important;
}

.mscript-product-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .mscript-product-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mscript-product-related-grid {
        grid-template-columns: 1fr;
    }
}

/* 7. Carousel : padding-top: 0px, padding-bottom: 40px, côtés 24px */
#reviews,
.mscript-reviews-container,
.reviews-section {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* 8. (mscript-activities-subscription-section & mscript-product-sub-section) : padding-top: 0px, padding-bottom: 40px, côtés 24px */
.mscript-activities-subscription-section,
.mscript-product-sub-section,
#subscriptions.mscript-product-sub-section,
.mscript-product-bottom-wrapper #subscriptions,
.mscript-product-bottom-wrapper section#subscriptions,
.page-product #subscriptions,
.page-product .subscriptions-section {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-top: none !important;
    box-sizing: border-box !important;
}

/* 9. (faq.section.mscript-container) : padding-top: 0px, padding-bottom: 40px, côtés 24px */
.mscript-faq-container,
.faq-section,
.faq-section.mscript-container,
#section-faq {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* 10. Home Page ONLY : (home-subscriptions, faq & reviews) */
body.page-home #home-subscriptions,
body.page-home #home-subscriptions.section.mscript-container,
body.page-home .home-subscriptions-section,
body.page-home #section-faq,
body.page-home #section-faq.section.mscript-container,
body.page-home .faq.section.mscript-container,
body.page-home #reviews,
body.page-home #reviews.section.mscript-container,
body.page-home .reviews.section.mscript-container {
    padding-top: 96px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 0px !important;
    box-sizing: border-box !important;
}


/* ========================================== */
/* STYLES PAGE CHECKOUT / PANIER FINAL        */
/* ========================================== */

/* --- CHECKOUT LAYOUT --- */
.mscript-checkout-page {
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 789px !important;
    padding-top: 40px !important;
    padding-bottom: 0px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* --- CHECKOUT LAYOUT (EMPTY STATE) --- */
/* Styles spécifiques pour la page de checkout lorsque le panier est vide */
.mscript-checkout-page.is-empty {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Styles spécifiques pour la section 'You might also need' lorsque le panier est vide */
.mscript-checkout-page.is-empty .mscript-checkout-related {
    margin: 64px 0px 0px 0px !important;
    padding: 0px !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    border-top: none !important;
}

.mscript-checkout-page.is-empty .mscript-checkout-related .mscript-related-title {
    text-align: center !important;
}

.mscript-checkout-related .mscript-related-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #A1A1AA !important;
}

.mscript-checkout-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.mscript-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13.12px;
    color: #A5ADA8;
}

.mscript-breadcrumb .is-active {
    color: #F1F4F2;
}

.breadcrumb a,
.mscript-breadcrumb a,
.mscript-breadcrumb-nav a {
    transition: none !important;
    animation: none !important;
}

.breadcrumb a:hover,
.mscript-breadcrumb a:hover,
.mscript-breadcrumb-nav a:hover {
    color: #FFFFFF !important;
    transition: none !important;
    animation: none !important;
}

.mscript-checkout-title-group {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-top: 16px;
}

.mscript-checkout-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.88px;
    color: #F1F4F2;
    margin: 0;
    line-height: 1;
}

.mscript-checkout-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.6px;
    color: #A5ADA8;
}

.mscript-checkout-grid {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .mscript-checkout-grid {
        flex-direction: column;
    }
}

/* --- LEFT : ITEMS --- */
.mscript-checkout-left {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mscript-checkout-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mscript-checkout-item {
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    padding: 15px 16px;
    display: flex;
    gap: 16px;
    position: relative;
    min-height: 114px;
    box-sizing: border-box;
}

.mscript-item-img {
    width: 128px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    background: #191B1E;
    align-self: center;
}

.mscript-item-center {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
}

.mscript-item-category {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.88px;
    font-weight: 400;
    color: #9FA7A2;
    text-transform: uppercase;
    letter-spacing: 0.27px;
    line-height: 1.2;
    margin-top: 7px;
}

.mscript-item-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16.8px;
    font-weight: 700;
    color: #F1F4F2;
    letter-spacing: -0.33px;
    margin: 5px 0 0 0;
    line-height: 1.2;
}

.mscript-item-name a,
.mscript-checkout-item-title-link {
    color: #F1F4F2 !important;
    text-decoration: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-item-name a:hover,
.mscript-checkout-item-title-link:hover {
    color: #09FAC4 !important;
    text-decoration: none !important;
    transition: none !important;
    animation: none !important;
}

.mscript-item-license {
    font-family: 'Inter', sans-serif;
    font-size: 12.8px;
    color: #A5ADA8;
    margin-top: auto;
    line-height: 1.2;
}

.mscript-item-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.mscript-item-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600 !important;
    color: #F1F4F2 !important;
    -webkit-text-stroke: 0.3px #F1F4F2;
}

.mscript-btn-remove {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A5ADA8;
    margin: 0;
    transition: none !important;
}

.mscript-btn-remove svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #A5ADA8;
    transition: none !important;
}

.mscript-btn-remove:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FF4D4D !important;
    transition: none !important;
}

.mscript-btn-remove:hover svg {
    stroke: #FF4D4D !important;
    color: #FF4D4D !important;
    transition: none !important;
}

.mscript-checkout-continue {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    color: #A5ADA8;
    text-decoration: none;
    padding: 8px 0;
    transition: none !important;
    animation: none !important;
}

.mscript-checkout-continue svg {
    stroke: currentColor;
    transition: none !important;
}

.mscript-checkout-continue:hover {
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.mscript-checkout-continue:hover svg {
    stroke: #09FAC4 !important;
    transition: none !important;
}

/* --- RIGHT : SIDEBAR --- */
.mscript-checkout-sidebar {
    width: 532.5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1024px) {
    .mscript-checkout-sidebar {
        width: 100%;
    }
}

.mscript-sidebar-card {
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 532px;
    min-height: 642px;
    height: auto;
    box-sizing: border-box;
}

@media (min-width: 1025px) {
    .mscript-checkout-sidebar {
        align-self: stretch;
    }

    .mscript-sidebar-card {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height, 64px) + 24px);
        z-index: 10;
    }
}

.mscript-sidebar-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18.4px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: #F1F4F2;
    margin: 0 0 20px 0;
}

.mscript-sidebar-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mscript-sidebar-label {
    font-family: 'Inter', sans-serif;
    font-size: 14.72px;
    color: #A5ADA8;
}

.mscript-sidebar-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14.72px;
    color: #F1F4F2;
}

.mscript-sidebar-block {
    border-top: 1px solid #292E30;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mscript-block-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mscript-block-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mscript-block-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14.72px;
    font-weight: 600;
    letter-spacing: -0.29px;
    color: #F1F4F2;
    margin: 0;
}

.mscript-block-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12.8px;
    color: #A5ADA8;
    margin: 0;
}

.mscript-coupon-group {
    display: flex;
    gap: 8px;
}

.mscript-input-coupon {
    flex: 1;
    height: 39px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    padding: 0 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: #F1F4F2;
}

.mscript-input-coupon::placeholder {
    color: #9FA7A2;
}

.mscript-input-coupon:focus {
    outline: none;
    border-color: #09FAC4;
}

.mscript-btn-secondary {
    height: 38px;
    padding: 0 12px;
    background: #191B1E !important;
    border: 1px solid #3C4445;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #F1F4F2;
    cursor: pointer;
    white-space: nowrap;
    transition: none !important;
    animation: none !important;
}

.mscript-btn-secondary:hover {
    background: #191B1E !important;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.mscript-sidebar-total-block {
    border-top: 1px solid #292E30;
    margin: 0px 0px 0px;
    padding: 40px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mscript-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mscript-total-label {
    font-family: 'Inter', sans-serif;
    font-size: 16.8px;
    font-weight: 700;
    color: #F1F4F2;
    position: relative;
    top: -10px;
}

.mscript-total-taxes {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9FA7A2;
    text-align: right;
    width: 100%;
}

.mscript-total-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 25.6px;
    font-weight: 600 !important;
    color: #F1F4F2 !important;
    -webkit-text-stroke: 0.75px #F1F4F2;
    line-height: 1;
    position: relative;
    top: -10px;
}

.mscript-btn-checkout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
    margin: 20px 0 0 0 !important;
    padding: 0 16px !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    background: #09FAC4 !important;
    box-shadow: 0px 6px 20px 0px rgba(9, 250, 196, 0.4) !important;
    border: none !important;
    outline: none !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #081410 !important;
    cursor: pointer !important;
    transition: none !important;
    animation: none !important;
}

.mscript-btn-checkout:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0px 10px 24px -4px rgba(9, 250, 196, 0.65) !important;
    transition: none !important;
    animation: none !important;
}

.mscript-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    border-top: none !important;
    border: none !important;
}

.mscript-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mscript-badge span {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.12px !important;
    font-weight: 400 !important;
    line-height: 19.68px !important;
    color: #A5ADA8 !important;
    text-transform: none !important;
}

.mscript-badge svg {
    flex-shrink: 0;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    stroke: #09FAC4 !important;
    color: #09FAC4 !important;
}

/* --- CHECKOUTRELATED CONTAINER --- */
.mscript-related-container.mscript-checkout-related {
    width: 100% !important;
    max-width: 1452px !important;
    padding-top: 40px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-top: 56px !important;
    margin-bottom: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-top: 1px solid #292E30 !important;
    box-sizing: border-box !important;
}

.mscript-related-container.mscript-checkout-related.is-hidden,
.mscript-checkout-related.is-hidden,
.mscript-related-container.is-hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   HERO SECTION CONTENT - FIVEM SCRIPTS CATALOG
   ========================================================================== */

.mscript-fivem-scripts-hero-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px 24px 40px;
    position: relative;
    width: 1500px;
    height: 416px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mscript-fivem-scripts-hero-container .hero-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 0px;
}

.mscript-fivem-scripts-hero-container .breadcrumb-link {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #A5ADA8;
    text-decoration: none;
}

.mscript-fivem-scripts-hero-container .breadcrumb-link:hover {
    color: #F1F4F2;
    transition: none !important;
    animation: none !important;
}

.mscript-fivem-scripts-hero-container .breadcrumb-icon {
    font-size: 10px;
    color: #9FA7A2;
}

.mscript-fivem-scripts-hero-container .breadcrumb-current {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #F1F4F2;
}

.mscript-fivem-scripts-hero-container .hero-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    position: relative;
    margin-top: 20px;
}

.mscript-fivem-scripts-hero-container .hero-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: #09FAC4;
    margin-bottom: 8px;
}

.mscript-fivem-scripts-hero-container .hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 48px !important;
    line-height: 60px !important;
    letter-spacing: -0.96px;
    color: #F1F4F2;
    margin: 0;
}

.mscript-fivem-scripts-hero-container .hero-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A5ADA8;
    margin-top: 12px;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
}

.mscript-fivem-scripts-hero-container .hero-filters {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: auto;
    gap: 8px;
    width: 100%;
}

.mscript-fivem-scripts-hero-container .filter-tag {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 13.6px;
    height: 34px;
    background: rgba(25, 27, 30, 0.5);
    border: 1px solid #25292B;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13.6px;
    color: #A5ADA8;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

.mscript-fivem-scripts-hero-container .filter-tag:hover {
    background: rgba(25, 27, 30, 0.5);
    color: #F1F4F2;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

.mscript-fivem-scripts-hero-container .filter-tag.active {
    background: #0C272E;
    border: 1px solid rgba(10, 250, 196, 0.5);
    color: #09FAC4;
    transition: none !important;
    animation: none !important;
}

.mscript-fivem-scripts-hero-container .filter-tag.active:hover {
    color: #ffffff;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   SECTION SEARCH BAR - FIVEM SCRIPTS CATALOG
   Description : Styles de la barre de filtres (Bouton, Input, Select, Compteur)
   ========================================================================== */

/* Conteneur principal (Layout global) */
.mscript-fivem-scripts-search-bar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px !important;
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- LIGNE DU HAUT : BOUTON ET INPUTS --- */
.search-bar-top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
    margin-bottom: 0px;
    /* Espace avant le compteur de produits */
}

/* Bouton vert fluo (All frameworks) */
.framework-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 14.4px;
    height: 38px;
    background: #09FAC4;
    border: 1px solid #09FAC4;
    border-radius: 12px;

    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 13.6px;
    color: #081410;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

.framework-btn:hover {
    color: #ffffff !important;
    background-color: #22fbca;
    border: 1px solid transparent !important;
    transform: scale(0.98) !important;
    transition: none !important;
    animation: none !important;
}

/* Conteneur alignant la barre de recherche et le menu de tri à droite */
.search-controls-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* --- CHAMP DE RECHERCHE --- */
.search-input-group {
    position: relative;
    width: 224px;
    height: 44px;
}

/* Icône loupe dans le champ de recherche */
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9FA7A2;
    font-size: 14px;
    pointer-events: none;
    /* Laisse le clic passer à travers vers l'input */
}

/* Style du champ de saisie de texte */
.search-input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #191B1E;
    border: 1px solid #3A4043;
    border-radius: 12px;
    padding: 0px 13.6px 0px 36px;
    /* Padding-left plus grand pour la loupe */

    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #9FA6A7;
    outline: none;
    transition: none !important;
    animation: none !important;
}

.search-input:hover {
    transition: none !important;
    animation: none !important;
}

.search-input:focus {
    border-color: #09FAC4;
    transition: none !important;
    animation: none !important;
}

/* --- MENU DÉROULANT DE TRI (SELECT) --- */
.sort-dropdown-group {
    position: relative;
    width: 175px;
    height: 44px;
}

/* Style de la balise <select> native */
.sort-select {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #191B1E;
    border: 1px solid #3A4043;
    border-radius: 12px;
    padding: 0px 36px 0px 16px;
    /* Espace à droite pour l'icône chevron */

    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9FA6A7;
    cursor: pointer;

    /* Masque la flèche native du navigateur pour utiliser FontAwesome */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: none !important;
    animation: none !important;
}

.sort-select:hover {
    transition: none !important;
    animation: none !important;
}

.sort-select:focus {
    border-color: #09FAC4;
    transition: none !important;
    animation: none !important;
}

/* Icône chevron du menu déroulant */
.dropdown-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9FA6A7;
    font-size: 12px;
    pointer-events: none;
}

/* --- LIGNE DU BAS : COMPTEUR DE PRODUITS --- */
.search-bar-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.product-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12.8px;
    color: #9FA6A7;
}

/* ==========================================================================
   SECTION PRODUCTS GRID - FIVEM SCRIPTS CATALOG (CONTAINER SPÉCIFIQUE)
   ========================================================================== */

.mscript-catalog-products-container {
    padding: 0px 24px 32px !important;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Grille indépendante copiée sur le modèle de l'accueil */
.mscript-fivem-scripts-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1350px) {
    .mscript-fivem-scripts-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .mscript-fivem-scripts-product-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CATALOG FEATURES & COMPATIBILITY SECTION
   ========================================================================== */

/* Wrapper principal (Fond et Bordure) */
.mscript-catalog-features-wrapper {
    background-color: #090F12;
    border-top: 1px solid #2A2E30;
    padding-top: 0px !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

.catalog-features-container {
    width: 100%;
    max-width: 1500px;
    padding: 64px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* --- TOP GRID --- */
.features-top-grid {
    display: grid;
    grid-template-columns: 1fr 555px;
    /* Layout Figma: Contenu large + Sidebar fixe */
    gap: 64px;
    align-items: start;
}

/* Texte de gauche */
.features-main-content {
    display: flex;
    flex-direction: column;
}

.features-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: #09FAC4;
    margin-bottom: 8px;
}

.features-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
    color: #F1F3F4;
    margin: 0 0 12px 0;
}

.features-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #9FA6A7;
    margin: 0 0 24px 0;
    max-width: 657px;
}

/* Liste des atouts (2 colonnes) */
.features-perks-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.perk-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #9FA6A7;
}

.perk-icon {
    width: 16px;
    height: 16px;
    stroke: #09FAC4 !important;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Sidebar de droite */
.features-sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.18px;
    color: #F1F4F4;
    margin: 0 0 4px 0;
}

.sidebar-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #9FA6A7;
    margin: 0 0 16px 0;
}

.sidebar-links-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #2A2E30;
    margin-bottom: 24px;
}

.sidebar-link-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #2A2E30;
    text-decoration: none;
}

.sidebar-link-item:hover .link-title,
.sidebar-link-item.active .link-title {
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

.sidebar-link-item:hover .link-icon,
.sidebar-link-item.active .link-icon {
    transform: translateX(4px);
    transition: none !important;
    animation: none !important;
}

.link-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #F1F4F4;
    transition: none !important;
    animation: none !important;
}

.link-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #9FA6A7;
}

.link-icon {
    width: 16px;
    height: 16px;
    stroke: #09FAC4 !important;
    flex-shrink: 0;
    transition: none !important;
    animation: none !important;
}

.sidebar-discord-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #09FAC4;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

.sidebar-discord-link:hover {
    transition: none !important;
    animation: none !important;
}

.sidebar-discord-link:hover span {
    text-decoration: underline !important;
    transition: none !important;
    animation: none !important;
}

.discord-icon-wrapper {
    background-color: #090F12;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: relative;
}

.discord-icon-wrapper img,
.discord-icon-wrapper svg {
    position: relative;
    z-index: 10;
}

.discord-icon-wrapper svg path {
    fill: #09FAC4 !important;
}

/* --- BOTTOM SECTION : FRAMEWORKS --- */
.features-frameworks-section {
    display: flex;
    flex-direction: column;
    margin-top: 96px;
    padding-top: 64px;
    border-top: 1px solid #2A2E30;
}

.frameworks-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -0.56px;
    color: #F1F4F4;
    margin: 0 0 12px 0;
}

.frameworks-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #9FA6A7;
    margin-bottom: 32px;
}

.frameworks-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #2A2E30;
}

.framework-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 0;
    border-bottom: 1px solid #2A2E30;
}

.framework-name {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.35px;
    color: #09FAC4;
    -webkit-text-stroke: 0.50px;
    width: 152px;
    /* Fixe la largeur pour aligner le texte à droite */
    flex-shrink: 0;
    margin: 0;
}

.framework-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1300px;
}

.fw-main-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
    color: #9FA6A7;
    margin: 0;
}

.fw-sub-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #9FA7A6;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Mobiles & Tablettes)
   ========================================================================== */
@media (max-width: 1024px) {
    .features-top-grid {
        grid-template-columns: 1fr;
        /* Empile la description et la sidebar sur petits écrans */
        gap: 40px;
    }

    .features-perks-list {
        grid-template-columns: 1fr;
        /* Une seule colonne pour les atouts */
    }

    .framework-item {
        flex-direction: column;
        /* Superpose le nom du framework et sa description */
        gap: 12px;
    }
}

/* ==========================================================================
   DEVELOPER ACCESS MODAL (MAINTENANCE MODE)
   ========================================================================== */
.brand-logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.brand-logo-trigger {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.2s ease;
}

.brand-logo-trigger:hover {
    opacity: 0.9;
}

.mscript-dev-modal {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 99999;
    width: 360px;
    background-color: #0F1112 !important;
    border: 1px solid #292E30 !important;
    border-radius: 12px !important;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(41, 46, 48, 0.5);
    display: none;
    transition: none !important;
    animation: none !important;
}

.mscript-dev-modal.active {
    display: block !important;
    transition: none !important;
    animation: none !important;
}

.mscript-dev-modal * {
    transition: none !important;
    animation: none !important;
}

.dev-modal-header {
    margin-bottom: 12px;
}

.dev-modal-title {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #09FAC4;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-modal-warning {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.dev-form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dev-user-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
}

.dev-user-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    background-color: #191B1E !important;
    border: 1px solid #292E30 !important;
    border-radius: 8px !important;
    color: #9CA3AF !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: none !important;
    animation: none !important;
}

.dev-user-btn:hover {
    background-color: #191B1E !important;
    border-color: #3F4448 !important;
    color: #E5E7EB !important;
    transition: none !important;
    animation: none !important;
}

.dev-user-btn.active[data-user="jarod"] {
    background-color: #191B1E !important;
    border: 1px solid #A577D8 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

.dev-user-btn.active[data-user="moon"] {
    background-color: #191B1E !important;
    border: 1px solid #09FAC4 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

.dev-user-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dev-user-dot-purple {
    background-color: #A577D8;
    box-shadow: 0 0 6px #A577D8;
}

.dev-user-dot-cyan {
    background-color: #09FAC4;
    box-shadow: 0 0 6px #09FAC4;
}

.dev-user-name {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dev-user-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.4px;
}

.dev-user-tag.tag-purple {
    background: rgba(165, 119, 216, 0.22);
    color: #A577D8;
    border: 1px solid rgba(165, 119, 216, 0.4);
}

.dev-user-tag.tag-cyan {
    background: rgba(9, 250, 196, 0.22);
    color: #09FAC4;
    border: 1px solid rgba(9, 250, 196, 0.4);
}

.dev-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.dev-password-input {
    width: 100%;
    background-color: #191B1E !important;
    border: 1px solid #292E30 !important;
    border-radius: 12px !important;
    padding: 12px 42px 12px 14px;
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    box-sizing: border-box;
}

.dev-password-input:focus {
    border-color: #09FAC4 !important;
    box-shadow: 0 0 0 2px rgba(9, 250, 196, 0.15);
}

.dev-eye-toggle {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-eye-toggle:hover {
    color: #09FAC4;
}

.dev-submit-btn {
    width: 100%;
    background-color: #09FAC4 !important;
    color: #0B0C0E !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: none !important;
    transition: none !important;
    box-shadow: 0 5px 14px rgba(9, 250, 196, 0.35), -4px 3px 10px rgba(9, 250, 196, 0.2), 4px 3px 10px rgba(9, 250, 196, 0.2) !important;
}

.dev-submit-btn:hover {
    background-color: #25FDDE !important;
    box-shadow: 0 8px 16px rgba(9, 250, 196, 0.33), -4px 3px 8px rgba(9, 250, 196, 0.19), 4px 3px 8px rgba(9, 250, 196, 0.19) !important;
    animation: none !important;
    transition: none !important;
}

.dev-submit-btn:disabled,
.dev-submit-btn:disabled:hover {
    background-color: #1C2225 !important;
    color: #4B5563 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.dev-error-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #EF4444;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 4px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
}

.dev-error-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

/* ==========================================================================
   DÉBUT SECTIONS BANNIÈRES D'ABONNEMENT PAR CATÉGORIE
   ========================================================================== */

/* ==========================================================================
   DÉBUT SECTION 1 : section#mscript-activities-subscription-section-blue
   ========================================================================== */

#mscript-activities-subscription-section-blue {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px 40px !important;
    position: relative;
    width: 1500px;
    max-width: 1500px;
    min-height: 574.22px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
}

#mscript-activities-subscription-section-blue .subscription-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 1452px;
    max-width: 100%;
    height: 526.22px;
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-activities-subscription-section-blue .sub-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 694.05px;
    height: 342.88px;
    left: 40px;
    top: 90.67px;
}

#mscript-activities-subscription-section-blue .sub-tag-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 694.05px;
    height: 18px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .sub-tag {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 11.52px;
    line-height: 17px;
    letter-spacing: 0.288px;
    text-transform: uppercase;
    color: #60A5FA;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .sub-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px 0px;
    width: 694.05px;
    height: 101.91px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .heading-line1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #F1F4F2;
}

#mscript-activities-subscription-section-blue .heading-line2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #60A5FA;
    padding-top: 4px;
}

#mscript-activities-subscription-section-blue .sub-desc-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0px 0px;
    width: 448px;
    height: 64px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .sub-desc {
    width: 448px;
    height: 52px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A5ABAD;
    margin: 0;
}

#mscript-activities-subscription-section-blue .sub-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0px 0px;
    gap: 16px;
    width: 694.05px;
    height: 159.8px;
    flex: none;
    order: 3;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .sub-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 214.2px;
    height: 67.8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .price-label {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #9FA7A2;
}

#mscript-activities-subscription-section-blue .price-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

#mscript-activities-subscription-section-blue .price-amount {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 45.6px;
    line-height: 46px;
    letter-spacing: -1.14px;
    color: #F1F4F2;
    -webkit-text-stroke: 0.75px #F1F4F2 !important;
}

#mscript-activities-subscription-section-blue .price-period {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 23px;
    color: #A5ABAD;
}

#mscript-activities-subscription-section-blue .btn-subscribe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    gap: 8px;
    width: auto !important;
    min-width: 183px;
    white-space: nowrap;
    height: 48px;
    min-height: 48px;
    background: #60A5FA !important;
    background-color: #60A5FA !important;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #06121E !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-shadow: 0 8px 20px -4px rgba(96, 165, 250, 0.45), 0 4px 10px -2px rgba(96, 165, 250, 0.25) !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .btn-subscribe:hover {
    background: #93C5FD !important;
    background-color: #93C5FD !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(96, 165, 250, 0.6), 0 5px 12px -2px rgba(96, 165, 250, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .sub-right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 627.95px;
    height: 444.22px;
    left: 782.05px;
    top: 40px;
}

#mscript-activities-subscription-section-blue .subs-grid {
    position: relative;
    width: 628px;
    height: 396px;
    flex: none;
    order: 0;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-activities-subscription-section-blue .subs-track {
    display: flex;
    flex-direction: row;
    width: 2512px;
    height: 396px;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#mscript-activities-subscription-section-blue .subs-page {
    position: relative;
    width: 628px;
    height: 396px;
    flex-shrink: 0;
}

#mscript-activities-subscription-section-blue .sub-card {
    box-sizing: border-box;
    position: absolute;
    width: 309px;
    height: 193px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .sub-card:hover {
    background-color: #22252A;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .sub-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#mscript-activities-subscription-section-blue .sub-card-placeholder-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3C4445;
    font-size: 2.2rem;
    z-index: 0;
}

#mscript-activities-subscription-section-blue .subs-page .sub-card:nth-child(1) {
    left: 0px;
    top: 0px;
}

#mscript-activities-subscription-section-blue .subs-page .sub-card:nth-child(2) {
    left: 319px;
    top: 0px;
}

#mscript-activities-subscription-section-blue .subs-page .sub-card:nth-child(3) {
    left: 0px;
    top: 203px;
}

#mscript-activities-subscription-section-blue .subs-page .sub-card:nth-child(4) {
    left: 319px;
    top: 203px;
}

#mscript-activities-subscription-section-blue .sub-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 13, 11, 0.8) 0%, rgba(10, 13, 11, 0.1) 50%, rgba(10, 13, 11, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .sub-card:hover .sub-card-overlay {
    opacity: 0.8;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .sub-card-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 26px;
    position: absolute;
    width: 307px;
    left: 1px;
    top: 139.2px;
    box-sizing: border-box;
    z-index: 2;
}

#mscript-activities-subscription-section-blue .sub-card-title {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 10.88px;
    line-height: 16px;
    letter-spacing: 0.2176px;
    color: #F1F4F2;
}

#mscript-activities-subscription-section-blue .sub-card-included {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    -webkit-text-stroke: 0.5px #60A5FA !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    color: #60A5FA;
    margin-top: 7px;
}

#mscript-activities-subscription-section-blue .sub-card:hover .sub-card-included {
    display: block;
}

#mscript-activities-subscription-section-blue .subs-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px 0px;
    gap: 12px;
    width: 627.95px;
    height: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
}

#mscript-activities-subscription-section-blue .page-indicator {
    position: relative;
    width: 28.77px;
    height: 17.27px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .page-current {
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-activities-subscription-section-blue .page-slash {
    position: absolute;
    left: 10.92px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #3C4445;
}

#mscript-activities-subscription-section-blue .page-total {
    position: absolute;
    left: 21.84px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-activities-subscription-section-blue .page-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 80px;
    height: 36px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-activities-subscription-section-blue .page-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    background: #191B1E;
    border: 1px solid #3C4445;
    border-radius: 12px;
    color: #F1F4F2;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .page-btn:hover {
    background: #22252A;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

#mscript-activities-subscription-section-blue .page-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   FIN SECTION 1 : section#mscript-activities-subscription-section-blue
   ========================================================================== */


/* ==========================================================================
   DÉBUT SECTION 2 : section#mscript-advanced-subscription-section-cyan
   ========================================================================== */

#mscript-advanced-subscription-section-cyan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px 40px !important;
    position: relative;
    width: 1500px;
    max-width: 1500px;
    min-height: 574.22px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
}

#mscript-advanced-subscription-section-cyan .subscription-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 1452px;
    max-width: 100%;
    height: 526.22px;
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-advanced-subscription-section-cyan .sub-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 694.05px;
    height: 342.88px;
    left: 40px;
    top: 90.67px;
}

#mscript-advanced-subscription-section-cyan .sub-tag-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 694.05px;
    height: 18px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .sub-tag {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 11.52px;
    line-height: 17px;
    letter-spacing: 0.288px;
    text-transform: uppercase;
    color: #09FAC4;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .sub-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px 0px;
    width: 694.05px;
    height: 101.91px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .heading-line1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #F1F4F2;
}

#mscript-advanced-subscription-section-cyan .heading-line2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #09FAC4;
    padding-top: 4px;
}

#mscript-advanced-subscription-section-cyan .sub-desc-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0px 0px;
    width: 448px;
    height: 64px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .sub-desc {
    width: 448px;
    height: 52px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A5ABAD;
    margin: 0;
}

#mscript-advanced-subscription-section-cyan .sub-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0px 0px;
    gap: 16px;
    width: 694.05px;
    height: 159.8px;
    flex: none;
    order: 3;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .sub-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 214.2px;
    height: 67.8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .price-label {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #9FA7A2;
}

#mscript-advanced-subscription-section-cyan .price-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

#mscript-advanced-subscription-section-cyan .price-amount {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 45.6px;
    line-height: 46px;
    letter-spacing: -1.14px;
    color: #F1F4F2;
    -webkit-text-stroke: 0.75px #F1F4F2 !important;
}

#mscript-advanced-subscription-section-cyan .price-period {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 23px;
    color: #A5ABAD;
}

#mscript-advanced-subscription-section-cyan .btn-subscribe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    gap: 8px;
    width: auto !important;
    min-width: 183px;
    white-space: nowrap;
    height: 48px;
    min-height: 48px;
    background: #09FAC4 !important;
    background-color: #09FAC4 !important;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #06121E !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-shadow: 0 8px 20px -4px rgba(9, 250, 196, 0.45), 0 4px 10px -2px rgba(9, 250, 196, 0.25) !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .btn-subscribe:hover {
    background: #5EFFD8 !important;
    background-color: #5EFFD8 !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(9, 250, 196, 0.6), 0 5px 12px -2px rgba(9, 250, 196, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .sub-right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 627.95px;
    height: 444.22px;
    left: 782.05px;
    top: 40px;
}

#mscript-advanced-subscription-section-cyan .subs-grid {
    position: relative;
    width: 628px;
    height: 396px;
    flex: none;
    order: 0;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-advanced-subscription-section-cyan .subs-track {
    display: flex;
    flex-direction: row;
    width: 2512px;
    height: 396px;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#mscript-advanced-subscription-section-cyan .subs-page {
    position: relative;
    width: 628px;
    height: 396px;
    flex-shrink: 0;
}

#mscript-advanced-subscription-section-cyan .sub-card {
    box-sizing: border-box;
    position: absolute;
    width: 309px;
    height: 193px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .sub-card:hover {
    background-color: #22252A;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .sub-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#mscript-advanced-subscription-section-cyan .sub-card-placeholder-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3C4445;
    font-size: 2.2rem;
    z-index: 0;
}

#mscript-advanced-subscription-section-cyan .subs-page .sub-card:nth-child(1) {
    left: 0px;
    top: 0px;
}

#mscript-advanced-subscription-section-cyan .subs-page .sub-card:nth-child(2) {
    left: 319px;
    top: 0px;
}

#mscript-advanced-subscription-section-cyan .subs-page .sub-card:nth-child(3) {
    left: 0px;
    top: 203px;
}

#mscript-advanced-subscription-section-cyan .subs-page .sub-card:nth-child(4) {
    left: 319px;
    top: 203px;
}

#mscript-advanced-subscription-section-cyan .sub-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 13, 11, 0.8) 0%, rgba(10, 13, 11, 0.1) 50%, rgba(10, 13, 11, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .sub-card:hover .sub-card-overlay {
    opacity: 0.8;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .sub-card-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 26px;
    position: absolute;
    width: 307px;
    left: 1px;
    top: 139.2px;
    box-sizing: border-box;
    z-index: 2;
}

#mscript-advanced-subscription-section-cyan .sub-card-title {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 10.88px;
    line-height: 16px;
    letter-spacing: 0.2176px;
    color: #F1F4F2;
}

#mscript-advanced-subscription-section-cyan .sub-card-included {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    -webkit-text-stroke: 0.5px #09FAC4 !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    color: #09FAC4;
    margin-top: 7px;
}

#mscript-advanced-subscription-section-cyan .sub-card:hover .sub-card-included {
    display: block;
}

#mscript-advanced-subscription-section-cyan .subs-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px 0px;
    gap: 12px;
    width: 627.95px;
    height: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
}

#mscript-advanced-subscription-section-cyan .page-indicator {
    position: relative;
    width: 28.77px;
    height: 17.27px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .page-current {
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-advanced-subscription-section-cyan .page-slash {
    position: absolute;
    left: 10.92px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #3C4445;
}

#mscript-advanced-subscription-section-cyan .page-total {
    position: absolute;
    left: 21.84px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-advanced-subscription-section-cyan .page-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 80px;
    height: 36px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-advanced-subscription-section-cyan .page-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    background: #191B1E;
    border: 1px solid #3C4445;
    border-radius: 12px;
    color: #F1F4F2;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .page-btn:hover {
    background: #22252A;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

#mscript-advanced-subscription-section-cyan .page-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   FIN SECTION 2 : section#mscript-advanced-subscription-section-cyan
   ========================================================================== */


/* ==========================================================================
   DÉBUT SECTION 3 : section#mscript-legal-subscription-section-purple
   ========================================================================== */

#mscript-legal-subscription-section-purple {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px 40px !important;
    position: relative;
    width: 1500px;
    max-width: 1500px;
    min-height: 574.22px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
}

#mscript-legal-subscription-section-purple .subscription-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 1452px;
    max-width: 100%;
    height: 526.22px;
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-legal-subscription-section-purple .sub-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 694.05px;
    height: 342.88px;
    left: 40px;
    top: 90.67px;
}

#mscript-legal-subscription-section-purple .sub-tag-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 694.05px;
    height: 18px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .sub-tag {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 11.52px;
    line-height: 17px;
    letter-spacing: 0.288px;
    text-transform: uppercase;
    color: #B682ED;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .sub-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px 0px;
    width: 694.05px;
    height: 101.91px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .heading-line1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #F1F4F2;
}

#mscript-legal-subscription-section-purple .heading-line2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #B682ED;
    padding-top: 4px;
}

#mscript-legal-subscription-section-purple .sub-desc-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0px 0px;
    width: 448px;
    height: 64px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .sub-desc {
    width: 448px;
    height: 52px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A5ABAD;
    margin: 0;
}

#mscript-legal-subscription-section-purple .sub-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0px 0px;
    gap: 16px;
    width: 694.05px;
    height: 159.8px;
    flex: none;
    order: 3;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .sub-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 214.2px;
    height: 67.8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .price-label {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #9FA7A2;
}

#mscript-legal-subscription-section-purple .price-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

#mscript-legal-subscription-section-purple .price-amount {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 45.6px;
    line-height: 46px;
    letter-spacing: -1.14px;
    color: #F1F4F2;
    -webkit-text-stroke: 0.75px #F1F4F2 !important;
}

#mscript-legal-subscription-section-purple .price-period {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 23px;
    color: #A5ABAD;
}

#mscript-legal-subscription-section-purple .btn-subscribe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    gap: 8px;
    width: auto !important;
    min-width: 183px;
    white-space: nowrap;
    height: 48px;
    min-height: 48px;
    background: #B682ED !important;
    background-color: #B682ED !important;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #06121E !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-shadow: 0 8px 20px -4px rgba(182, 130, 237, 0.45), 0 4px 10px -2px rgba(182, 130, 237, 0.25) !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .btn-subscribe:hover {
    background: #D3ADFF !important;
    background-color: #D3ADFF !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(182, 130, 237, 0.6), 0 5px 12px -2px rgba(182, 130, 237, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .sub-right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 627.95px;
    height: 444.22px;
    left: 782.05px;
    top: 40px;
}

#mscript-legal-subscription-section-purple .subs-grid {
    position: relative;
    width: 628px;
    height: 396px;
    flex: none;
    order: 0;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-legal-subscription-section-purple .subs-track {
    display: flex;
    flex-direction: row;
    width: 2512px;
    height: 396px;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#mscript-legal-subscription-section-purple .subs-page {
    position: relative;
    width: 628px;
    height: 396px;
    flex-shrink: 0;
}

#mscript-legal-subscription-section-purple .sub-card {
    box-sizing: border-box;
    position: absolute;
    width: 309px;
    height: 193px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .sub-card:hover {
    background-color: #22252A;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .sub-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#mscript-legal-subscription-section-purple .sub-card-placeholder-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3C4445;
    font-size: 2.2rem;
    z-index: 0;
}

.sub-card-placeholder-bg .sub-card-logo-svg {
    width: 35px !important;
    height: 29px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.sub-card:hover .sub-card-placeholder-bg .sub-card-logo-svg,
.sub-card-placeholder-bg:hover .sub-card-logo-svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.sub-card-logo-svg .logo-top,
.sub-card:hover .sub-card-logo-svg .logo-top {
    fill: #3C4445 !important;
}

#mscript-legal-subscription-section-purple .subs-page .sub-card:nth-child(1) {
    left: 0px;
    top: 0px;
}

#mscript-legal-subscription-section-purple .subs-page .sub-card:nth-child(2) {
    left: 319px;
    top: 0px;
}

#mscript-legal-subscription-section-purple .subs-page .sub-card:nth-child(3) {
    left: 0px;
    top: 203px;
}

#mscript-legal-subscription-section-purple .subs-page .sub-card:nth-child(4) {
    left: 319px;
    top: 203px;
}

#mscript-legal-subscription-section-purple .sub-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 13, 11, 0.8) 0%, rgba(10, 13, 11, 0.1) 50%, rgba(10, 13, 11, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .sub-card:hover .sub-card-overlay {
    opacity: 0.8;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .sub-card-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 26px;
    position: absolute;
    width: 307px;
    left: 1px;
    top: 139.2px;
    box-sizing: border-box;
    z-index: 2;
}

#mscript-legal-subscription-section-purple .sub-card-title {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 10.88px;
    line-height: 16px;
    letter-spacing: 0.2176px;
    color: #F1F4F2;
}

#mscript-legal-subscription-section-purple .sub-card-included {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    -webkit-text-stroke: 0.5px #B682ED !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    color: #B682ED;
    margin-top: 7px;
}

#mscript-legal-subscription-section-purple .sub-card:hover .sub-card-included {
    display: block;
}

#mscript-legal-subscription-section-purple .subs-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px 0px;
    gap: 12px;
    width: 627.95px;
    height: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
}

#mscript-legal-subscription-section-purple .page-indicator {
    position: relative;
    width: 28.77px;
    height: 17.27px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .page-current {
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-legal-subscription-section-purple .page-slash {
    position: absolute;
    left: 10.92px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #3C4445;
}

#mscript-legal-subscription-section-purple .page-total {
    position: absolute;
    left: 21.84px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-legal-subscription-section-purple .page-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 80px;
    height: 36px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-legal-subscription-section-purple .page-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    background: #191B1E;
    border: 1px solid #3C4445;
    border-radius: 12px;
    color: #F1F4F2;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .page-btn:hover {
    background: #22252A;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

#mscript-legal-subscription-section-purple .page-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   FIN SECTION 3 : section#mscript-legal-subscription-section-purple
   ========================================================================== */


/* ==========================================================================
   DÉBUT SECTION 4 : section#mscript-crime-subscription-section-red
   ========================================================================== */

#mscript-crime-subscription-section-red {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px 40px !important;
    position: relative;
    width: 1500px;
    max-width: 1500px;
    min-height: 574.22px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
}

#mscript-crime-subscription-section-red .subscription-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 1452px;
    max-width: 100%;
    height: 526.22px;
    background: #090F12;
    border: 1px solid #292E30;
    border-radius: 20px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-crime-subscription-section-red .sub-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 694.05px;
    height: 342.88px;
    left: 40px;
    top: 90.67px;
}

#mscript-crime-subscription-section-red .sub-tag-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 694.05px;
    height: 18px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .sub-tag {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 11.52px;
    line-height: 17px;
    letter-spacing: 0.288px;
    text-transform: uppercase;
    color: #F05653;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .sub-heading-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px 0px;
    width: 694.05px;
    height: 101.91px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .heading-line1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #F1F4F2;
}

#mscript-crime-subscription-section-red .heading-line2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 41.6px;
    line-height: 45px;
    letter-spacing: -0.832px;
    color: #F05653;
    padding-top: 4px;
}

#mscript-crime-subscription-section-red .sub-desc-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0px 0px;
    width: 448px;
    height: 64px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .sub-desc {
    width: 448px;
    height: 52px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A5ABAD;
    margin: 0;
}

#mscript-crime-subscription-section-red .sub-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0px 0px;
    gap: 16px;
    width: 694.05px;
    height: 159.8px;
    flex: none;
    order: 3;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .sub-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 214.2px;
    height: 67.8px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .price-label {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #9FA7A2;
}

#mscript-crime-subscription-section-red .price-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

#mscript-crime-subscription-section-red .price-amount {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 45.6px;
    line-height: 46px;
    letter-spacing: -1.14px;
    color: #F1F4F2;
    -webkit-text-stroke: 0.75px #F1F4F2 !important;
}

#mscript-crime-subscription-section-red .price-period {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 23px;
    color: #A5ABAD;
}

#mscript-crime-subscription-section-red .btn-subscribe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    gap: 8px;
    width: auto !important;
    min-width: 183px;
    white-space: nowrap;
    height: 48px;
    min-height: 48px;
    background: #F05653 !important;
    background-color: #F05653 !important;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #06121E !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-shadow: 0 8px 20px -4px rgba(240, 86, 83, 0.45), 0 4px 10px -2px rgba(240, 86, 83, 0.25) !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .btn-subscribe:hover {
    background: #F88380 !important;
    background-color: #F88380 !important;
    color: #06121E !important;
    box-shadow: 0 10px 24px -4px rgba(240, 86, 83, 0.6), 0 5px 12px -2px rgba(240, 86, 83, 0.35) !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .sub-right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 627.95px;
    height: 444.22px;
    left: 782.05px;
    top: 40px;
}

#mscript-crime-subscription-section-red .subs-grid {
    position: relative;
    width: 628px;
    height: 396px;
    flex: none;
    order: 0;
    flex-grow: 0;
    overflow: hidden;
}

#mscript-crime-subscription-section-red .subs-track {
    display: flex;
    flex-direction: row;
    width: 2512px;
    height: 396px;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#mscript-crime-subscription-section-red .subs-page {
    position: relative;
    width: 628px;
    height: 396px;
    flex-shrink: 0;
}

#mscript-crime-subscription-section-red .sub-card {
    box-sizing: border-box;
    position: absolute;
    width: 309px;
    height: 193px;
    background: #191B1E;
    border: 1px solid #292E30;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .sub-card:hover {
    background-color: #22252A;
    border-color: #3A4043;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .sub-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#mscript-crime-subscription-section-red .sub-card-placeholder-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1C242C 0%, #0F1418 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3C4445;
    font-size: 2.2rem;
    z-index: 0;
}

#mscript-crime-subscription-section-red .subs-page .sub-card:nth-child(1) {
    left: 0px;
    top: 0px;
}

#mscript-crime-subscription-section-red .subs-page .sub-card:nth-child(2) {
    left: 319px;
    top: 0px;
}

#mscript-crime-subscription-section-red .subs-page .sub-card:nth-child(3) {
    left: 0px;
    top: 203px;
}

#mscript-crime-subscription-section-red .subs-page .sub-card:nth-child(4) {
    left: 319px;
    top: 203px;
}

#mscript-crime-subscription-section-red .sub-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 13, 11, 0.8) 0%, rgba(10, 13, 11, 0.1) 50%, rgba(10, 13, 11, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .sub-card:hover .sub-card-overlay {
    opacity: 0.8;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .sub-card-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 26px;
    position: absolute;
    width: 307px;
    left: 1px;
    top: 139.2px;
    box-sizing: border-box;
    z-index: 2;
}

#mscript-crime-subscription-section-red .sub-card-title {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 600;
    font-size: 10.88px;
    line-height: 16px;
    letter-spacing: 0.2176px;
    color: #F1F4F2;
}

#mscript-crime-subscription-section-red .sub-card-included {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    -webkit-text-stroke: 0.5px #F05653 !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 16px;
    color: #F05653;
    margin-top: 7px;
}

#mscript-crime-subscription-section-red .sub-card:hover .sub-card-included {
    display: block;
}

#mscript-crime-subscription-section-red .subs-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px 0px;
    gap: 12px;
    width: 627.95px;
    height: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    box-sizing: border-box;
}

#mscript-crime-subscription-section-red .page-indicator {
    position: relative;
    width: 28.77px;
    height: 17.27px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .page-current {
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-crime-subscription-section-red .page-slash {
    position: absolute;
    left: 10.92px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #3C4445;
}

#mscript-crime-subscription-section-red .page-total {
    position: absolute;
    left: 21.84px;
    top: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.52px;
    line-height: 17px;
    color: #9FA7A2;
}

#mscript-crime-subscription-section-red .page-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    width: 80px;
    height: 36px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

#mscript-crime-subscription-section-red .page-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    background: #191B1E;
    border: 1px solid #3C4445;
    border-radius: 12px;
    color: #F1F4F2;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .page-btn:hover {
    background: #22252A;
    border-color: #09FAC4 !important;
    color: #09FAC4 !important;
    transition: none !important;
    animation: none !important;
}

#mscript-crime-subscription-section-red .page-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   FIN SECTION 4 : section#mscript-crime-subscription-section-red
   ========================================================================== */

.chromatic-wrapper-alt .logo-box.logo-variant-standard,
.chromatic-wrapper-alt .logo-box.logo-variant-compact {
    background: radial-gradient(circle at bottom right, rgba(7, 16, 24, 0) 0%, rgba(17, 75, 86, 0.2) 100%);
    border: 1px solid #104953;
}

/* ==========================================================================
   FIN SECTIONS BANNIÈRES D'ABONNEMENT PAR CATÉGORIE
   ========================================================================== */

/* ==========================================================================
   DÉBUT SECTION : CATALOGUE - AUCUN RÉSULTAT (section-catalog-no-match)
   Description : Affichée lorsque la recherche par frappe ou les filtres 
                 ne retournent aucun script dans le catalogue.
   ========================================================================== */

/* Section Principale */
.section-catalog-no-match {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 24px 64px !important;
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Wrapper Interne */
.section-catalog-no-match .catalog-no-match-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    width: 100%;
    max-width: 1452px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Carte avec Bordure en Tirets */
.section-catalog-no-match .catalog-no-match-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 24px;
    width: 100%;
    max-width: 448px;
    background: rgba(25, 27, 30, 0.5);
    border: 1px dashed #3A4043;
    border-radius: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Conteneur de l'Icône */
.section-catalog-no-match .no-match-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    width: 100%;
    max-width: 446px;
    height: 48px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Cercle de l'Icône */
.section-catalog-no-match .no-match-icon-circle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 48px;
    height: 48px;
    background: #191B1E;
    border-radius: 50%;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Icône Loupe SVG */
.section-catalog-no-match .no-match-loupe {
    width: 22px;
    height: 22px;
    flex: none;
    order: 0;
    flex-grow: 0;
    stroke: #A5ADA8;
}

/* Conteneur du Titre */
.section-catalog-no-match .no-match-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0px 0px;
    width: 100%;
    max-width: 446px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Titre H2 */
.section-catalog-no-match .no-match-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18.4px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.368px;
    color: #F1F4F4;
    margin: 0;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Conteneur du Texte Descriptif */
.section-catalog-no-match .no-match-desc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0px 0px;
    width: 100%;
    max-width: 446px;
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* Texte Descriptif */
.section-catalog-no-match .no-match-desc {
    width: 320px;
    max-width: 100%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14.4px;
    line-height: 22px;
    text-align: center;
    color: #9FA6A7;
    margin: 0;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Conteneur d'Action (Bouton) */
.section-catalog-no-match .no-match-action-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 446px;
    padding: 20px 0px 0px;
    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
}

/* Bouton Clear Filters */
.section-catalog-no-match .no-match-clear-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 18.4px;
    gap: 8px;
    min-width: 123.8px;
    height: 44px;
    min-height: 44px;
    background: #191B1E;
    border: 1px solid #3A4043;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #F1F4F4;
    cursor: pointer;
    transition: none !important;
    animation: none !important;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.section-catalog-no-match .no-match-clear-btn:hover {
    background: #22252A;
    border-color: #09FAC4;
    color: #09FAC4;
    transition: none !important;
    animation: none !important;
}

/* Responsive Mobile & Tablet */
@media (max-width: 768px) {
    .section-catalog-no-match {
        padding: 0px 16px 48px;
    }

    .section-catalog-no-match .catalog-no-match-card {
        padding: 48px 16px;
        max-width: 100%;
    }

    .section-catalog-no-match .no-match-desc {
        width: 100%;
    }
}

/* ==========================================================================
   FIN SECTION : CATALOGUE - AUCUN RÉSULTAT (section-catalog-no-match)
   ========================================================================== */

/* ==========================================================================
   DÉBUT SECTION : MENU DROPDOWN CATÉGORIES (HEADER)
   ========================================================================== */

.nav-item.dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
    animation: none !important;
    transition: none !important;
}

.dropdown-btn * {
    pointer-events: none;
}

.dropdown-btn .dropdown-chevron {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    transform: rotate(0deg);
    animation: none !important;
    transition: none !important;
}

.dropdown-btn.is-open .dropdown-chevron,
.dropdown-btn:hover .dropdown-chevron {
    transform: rotate(180deg);
    animation: none !important;
    transition: none !important;
}

/* Container-dropdown-categorie-header */
.header-dropdown-menu {
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 520px;
    max-width: 2304px;
    height: 311px;
    background: rgba(25, 27, 30, 1);
    border: 1px solid #3A4043;
    box-shadow: 0px 24px 60px -20px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    display: none;
    z-index: 1000;
    animation: none !important;
    transition: none !important;
}

.header-dropdown-menu.is-open {
    display: block;
}

/* Pont invisible entre le bouton et le menu (gap de 10px) */
.header-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

/* Link items inside dropdown */
.header-dropdown-menu .dropdown-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 11.2px 12.8px;
    position: absolute;
    width: 249px;
    border-radius: 12px;
    text-decoration: none;
    background: transparent;
    animation: none !important;
    transition: none !important;
}

/* Item 1: All Packages */
.header-dropdown-menu .item-all-packages {
    height: 65.97px;
    left: 9px;
    top: 9px;
}

/* Item 2: Advanced Series */
.header-dropdown-menu .item-advanced-series {
    height: 65.97px;
    left: 262px;
    top: 9px;
}

/* Item 3: Legal Series */
.header-dropdown-menu .item-legal-series {
    height: 65.97px;
    left: 9px;
    top: 78.97px;
}

/* Item 4: Crime Series */
.header-dropdown-menu .item-crime-series {
    height: 65.97px;
    left: 262px;
    top: 78.97px;
}

/* Item 5: Activities Series */
.header-dropdown-menu .item-activities-series {
    height: 65.97px;
    left: 9px;
    top: 148.94px;
}

/* Item 6: Bundles */
.header-dropdown-menu .item-bundles {
    height: 65.97px;
    left: 262px;
    top: 148.94px;
}

/* Item 7: Holidays */
.header-dropdown-menu .item-holidays {
    height: 83.56px;
    left: 9px;
    top: 218.91px;
}

/* Row Container inside Item */
.header-dropdown-menu .dropdown-item-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    width: 223.4px;
    height: 24px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Title text */
.header-dropdown-menu .dropdown-item-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #F1F4F4;
    flex: none;
    order: 0;
    flex-grow: 0;
    animation: none !important;
    transition: none !important;
}

/* Counter text */
.header-dropdown-menu .dropdown-item-count {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11.2px;
    line-height: 17px;
    color: #9FA7A2;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Description paragraph */
.header-dropdown-menu .dropdown-item-desc {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 0px 0px;
    margin: 0;
    width: 223.4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12.8px;
    line-height: 18px;
    color: #9FA6A7;
    flex: none;
    order: 1;
    flex-grow: 0;
    animation: none !important;
    transition: none !important;
}

.header-dropdown-menu .item-holidays .dropdown-item-desc {
    height: 38px;
}

/* Hover on active links */
.header-dropdown-menu .dropdown-item:not(.is-disabled):hover {
    background: rgba(255, 255, 255, 0.05);
}

.header-dropdown-menu .dropdown-item:not(.is-disabled):hover .dropdown-item-title {
    color: #F1F4F4;
}

/* Disabled items (Bundles & Holidays) */
.header-dropdown-menu .dropdown-item.is-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.header-dropdown-menu .dropdown-item.is-disabled:hover {
    background: transparent !important;
}

.header-dropdown-menu .dropdown-item.is-disabled .dropdown-item-title,
.header-dropdown-menu .dropdown-item.is-disabled .dropdown-item-count,
.header-dropdown-menu .dropdown-item.is-disabled .dropdown-item-desc {
    color: #6C7275 !important;
}

/* ==========================================================================
   FIN SECTION : MENU DROPDOWN CATÉGORIES (HEADER)
   ========================================================================== */