/*!
 * PCM Hosting — Redesign moderne du thème Lagom2
 * Cible les VRAIES classes du CMS RSThemes (site-banner, site-section, feature, etc.)
 * Palette : conservée. Respecte prefers-reduced-motion.
 */

/* =========================================================
   0. Variables d'extension (timings, shadows, blur)
   ========================================================= */
:root {
    --pcm-ease:                cubic-bezier(.22, 1, .36, 1);
    --pcm-ease-snap:           cubic-bezier(.34, 1.56, .64, 1);
    --pcm-dur-fast:            .18s;
    --pcm-dur:                 .32s;
    --pcm-dur-slow:            .55s;

    --pcm-shadow-sm:           0 2px 8px -2px rgba(16, 98, 254, .12), 0 1px 2px rgba(23, 25, 28, .06);
    --pcm-shadow-md:           0 12px 28px -10px rgba(16, 98, 254, .22), 0 4px 12px rgba(23, 25, 28, .08);
    --pcm-shadow-lg:           0 8px 18px -8px rgba(16, 98, 254, .20), 0 2px 6px rgba(8, 63, 191, .08);
    --pcm-shadow-glow:         0 0 0 4px rgba(16, 98, 254, .12);

    --pcm-glass-bg:            rgba(255, 255, 255, .72);
    --pcm-glass-blur:          saturate(180%) blur(14px);

    --pcm-border-grad:         linear-gradient(135deg, #1966FF 0%, #009AFF 50%, #6298fe 100%);

    --pcm-radius:              14px;
    --pcm-radius-lg:           20px;
}

/* =========================================================
   0bis. Fix autofill GLOBAL — empêche le navigateur de mettre
   un fond blanc/jaune sur les inputs auto-remplis (Chrome/Safari).
   Applique sur TOUS les inputs du site, en ciblant les contextes
   thème sombre (panels, modals, login, register, user/*).
   ========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /* Force le fond foncé en remplissant l'inset shadow (le navigateur ne sait pas peindre par-dessus) */
    -webkit-box-shadow: 0 0 0 1000px rgba(0,8,30,0.55) inset !important;
            box-shadow: 0 0 0 1000px rgba(0,8,30,0.55) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    transition: background-color 9999s ease-in-out 0s !important;
    background-clip: content-box !important;
}
/* Variante pour les pages au fond clair (admin, factures avec datatable) — on respecte le contexte */
body.page-lagompage input:-webkit-autofill,
body.page-lagompage input:-webkit-autofill:hover,
body.page-lagompage input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.95) inset !important;
            box-shadow: 0 0 0 1000px rgba(255,255,255,0.95) inset !important;
    -webkit-text-fill-color: #0a1631 !important;
    caret-color: #0a1631 !important;
}

/* =========================================================
   1. Globaux : scroll fluide, sélection, focus
   ========================================================= */
html { scroll-behavior: smooth; }

::selection {
    background-color: rgba(16, 98, 254, .22);
    color: var(--gray-darker, #17191C);
}

*:focus-visible {
    outline: none;
    box-shadow: var(--pcm-shadow-glow);
    border-radius: 6px;
}

/* =========================================================
   1.5. Logo header en BLANC sur fond bleu marine (toutes pages)
   ========================================================= */
.app-nav-header a.logo img,
.app-nav-header img.logo,
.app-nav-header .logo img,
.main-header a.logo img,
.main-header img.logo,
.main-header .logo img,
.nav-header a.logo img,
.nav-header img.logo,
header a.logo img,
header img.logo,
.app-nav a.logo img,
.app-nav img.logo {
    filter: brightness(0) invert(1) !important;
}

/* =========================================================
   2. Header sticky + backdrop-blur quand scrollé
   ========================================================= */
/* Sub-sections of the sidebar (Factures/Support wrapped in a separate panel
   with its own bg in Lagom natif) — nuke every possible wrapper background. */
.app-nav-menu > *,
.app-nav-menu ul,
.app-nav-menu li,
.app-nav-menu li > div,
.app-nav-menu li > a,
.app-nav-menu .app-nav-menu-section,
.app-nav-menu .app-nav-menu-secondary,
.app-nav-menu .app-nav-menu-footer,
.app-nav-menu .app-nav-menu-additional,
.app-nav-menu .app-nav-menu-account,
.app-nav-menu .app-nav-menu-helper,
.app-nav-menu .app-nav-menu-helpdesk,
.app-nav-menu .app-nav-menu-billing,
.app-nav-menu [class*="menu-section"],
.app-nav-menu [class*="menu-group"],
.app-nav-menu [class*="--secondary"],
.app-nav-menu [class*="--additional"],
.app-nav-menu [class*="--account"],
.app-nav-menu [class*="--billing"],
.app-nav-menu [class*="--helpdesk"],
.app-nav-menu [class*="--support"],
.app-nav-menu [class*="-footer"],
.app-nav-menu .secondary,
.app-nav-menu .footer-menu,
.app-nav-menu .account-menu,
.app-nav-menu .helpdesk-menu,
.app-nav-menu [data-app-nav-section],
.app-nav-menu [data-section] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Pseudo-elements that may draw a separator/panel behind these items */
.app-nav-menu .app-nav-menu-secondary::before,
.app-nav-menu .app-nav-menu-secondary::after,
.app-nav-menu [class*="--secondary"]::before,
.app-nav-menu [class*="--secondary"]::after,
.app-nav-menu [class*="--additional"]::before,
.app-nav-menu [class*="--additional"]::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* ==== Sidebar / Header DEFAULT (logged-in client area) : flat modern navy ==== */
.app-nav,
.app-nav.app-nav-condensed,
.app-nav.sticky-navigation,
.app-nav.app-nav-condensed.sticky-navigation,
.app-nav-menu,
.app-nav-header,
.main-header,
header.app-nav,
.sticky-navigation,
.sticky-navigation .app-nav-header {
    background-color: #0f1d3f !important;
    background-image: none !important;
    background: #0f1d3f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(98,152,254,0.14) !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    border-color: rgba(98,152,254,0.12) !important;
}

/* Body background : darker navy, balanced. NO radial decorations. */
body, html, .app, .app-content, .app-main, .container-fluid {
    background-color: #08132e !important;
}

/* ===== NUCLEAR : kill EVERY background-image on EVERY container of
   internal client area pages. Buttons / badges keep their gradients
   via their own specific selectors. ===== */
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > div,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > section,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .main-content,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .main-content > div,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .container-fluid,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .container,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .row,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content [class*="col-"],
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .panel-body,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .form-group,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .form-group > div {
    background-image: none !important;
}

/* Kill all pseudo-elements on container divs/sections (preserves <i> FA glyphs) */
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > div::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > div::after,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > section::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content > section::after,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .main-content > div::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .main-content > div::after,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .container-fluid::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .container-fluid::after,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .row::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content .row::after,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content [class*="col-"]::before,
body:not(.page-lagompage):not(.page-login):not(.page-lagom-cms) .app-content [class*="col-"]::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Specific kill : decorative elements Lagom may inject */
.app-content .page-bg-circle,
.app-content .bg-circle,
.app-content .background-circle,
.app-content .page-decoration,
.app-content .hero-decoration,
.app-content [class*="bg-circle"],
.app-content [class*="hero-circle"],
.app-content [class*="page-decoration"],
.app-content [class*="background-decoration"],
.app-content [class*="bg-ornament"],
.app-content [data-decoration],
.app-content > svg:not([role]):not(.icon),
.app-content > .decoration {
    display: none !important;
    visibility: hidden !important;
}

/* ===== PUBLIC PAGES (home, login, CMS) : clean glass header — single layer ===== */
html body.page-lagompage .app-nav,
html body.page-lagompage .app-nav.app-nav-condensed,
html body.page-lagompage .app-nav.sticky-navigation,
html body.page-lagompage .app-nav.app-nav-condensed.sticky-navigation,
html body.page-lagompage .app-nav-header,
html body.page-lagompage .app-nav-menu,
html body.page-lagompage .main-header,
html body.page-lagompage .sticky-navigation,
html body.page-login .app-nav,
html body.page-login .app-nav-header,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav-header,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav-menu {
    background-color: rgba(8,16,40,0.55) !important;
    background: rgba(8,16,40,0.55) !important;
    background-image: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    box-shadow: none !important;
    border: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
}
html body.page-lagompage.pcm-scrolled .app-nav,
html body.page-lagompage.pcm-scrolled .app-nav-header,
html body.page-lagompage.pcm-scrolled .app-nav-menu,
html body.page-login.pcm-scrolled .app-nav {
    background-color: rgba(8,16,40,0.78) !important;
    background: rgba(8,16,40,0.78) !important;
}

/* (AI search feature removed by request) */

/* ============================================================
   /order/domain — domain search box + tabs + TLD chips
   ============================================================ */

/* Tab nav at top (Enregistrer / Transférer / Renouveler) */
.tab-nav.tab-nav--domain,
.tab-nav.tab-nav--section {
    background: linear-gradient(180deg, rgba(15,29,63,0.45), rgba(8,16,40,0.30)) !important;
    border: 1px solid rgba(98,152,254,0.15) !important;
    margin-bottom: 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    max-width: fit-content !important;
    position: relative !important;
}
/* Kill Lagom's native animated underline indicator that drifts */
.tab-nav.tab-nav--domain::before,
.tab-nav.tab-nav--domain::after,
.tab-nav.tab-nav--section::before,
.tab-nav.tab-nav--section::after,
.tab-nav--domain .tab-nav-indicator,
.tab-nav--domain .tab-indicator,
.tab-nav--domain [class*="indicator"],
.tab-nav--domain [class*="underline"] {
    display: none !important;
    content: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}
/* REAL Lagom DOM : .tab-nav--domain > ul.nav-tabs > li.nav-item > a.nav-link > span */
.tab-nav--domain ul.nav-tabs,
.tab-nav--domain .nav-tabs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.tab-nav--domain .nav-arrow {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.tab-nav--domain .nav-item,
.tab-nav--domain ul.nav-tabs > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    filter: none !important;
}
.tab-nav--domain .nav-item::before,
.tab-nav--domain .nav-item::after,
.tab-nav--domain ul.nav-tabs > li::before,
.tab-nav--domain ul.nav-tabs > li::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}
.tab-nav--domain .nav-item.active,
.tab-nav--domain ul.nav-tabs > li.active {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    box-shadow: 0 4px 12px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.tab-nav--domain .nav-link {
    color: #8fadc9 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
}
.tab-nav--domain .nav-item:hover .nav-link {
    color: #ffffff !important;
}
.tab-nav--domain .nav-item.active .nav-link,
.tab-nav--domain ul.nav-tabs > li.active .nav-link {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tab-nav--domain .nav-link input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
.tab-nav--domain .nav-link span { color: inherit !important; }

/* Ensure ALL tabs (active + inactive) are clickable — no overlay blocking */
.tab-nav--domain,
.tab-nav--domain *,
.tab-nav--domain .nav-item,
.tab-nav--domain .nav-link,
.tab-nav--domain ul.nav-tabs > li,
.tab-nav--domain ul.nav-tabs > li > a {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
}
.tab-nav--domain .nav-link span,
.tab-nav--domain .nav-link i {
    pointer-events: none !important;
}

/* ============================================================
   Top groups nav (order page) — produits / groupes
   Cible : ul.nav.nav-tabs.nav-lg[data-nav] PARTOUT (groupes, regTypes…)
   sauf à l'intérieur de .tab-nav--domain (déjà stylé séparément)
   ============================================================ */
body ul.nav.nav-tabs.nav-lg[data-nav] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    margin: 0 0 22px 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
/* Tue le border-bottom Bootstrap natif des .nav-tabs et tout artefact */
body ul.nav.nav-tabs::after,
body ul.nav.nav-tabs::before,
body ul.nav.nav-tabs[data-nav]::after,
body ul.nav.nav-tabs[data-nav]::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li,
body ul.nav.nav-tabs.nav-lg[data-nav] > li.nav-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.12) !important;
    border-bottom: 1px solid rgba(98,152,254,0.12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transition: border-color .15s, background .15s !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li::before,
body ul.nav.nav-tabs.nav-lg[data-nav] > li::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(98,152,254,0.35) !important;
}
/* ACTIF : design plat propre — dégradé cyan, pas de relief 3D */
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px -2px rgba(25,102,255,0.30) !important;
    transform: none !important;
}
/* Pas de halo / glow strip — on enlève le côté 3D moche */
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active::before,
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
    box-shadow: none !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #8fadc9 !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    letter-spacing: 0.1px !important;
}
/* Bootstrap nav-link a un border par défaut + change de border-color au hover/focus — on tue tout */
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link:hover,
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link:focus,
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link:active,
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active > a.nav-link:hover,
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active > a.nav-link:focus {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Item actif : pas de bordure du tout (le pill EST le bg) — tue les artefacts aux extrémités */
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active {
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Force-hide pour addons (fallback CSS au cas où JS ne couvre pas) */
body .pcm-hidden-addons,
body li.pcm-hidden-addons,
body a.pcm-hidden-addons {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Cache les alertes / messages d'erreur VIDES + .hidden (force) */
body .alert:empty,
body .alert-danger:empty,
body .alert-warning:empty,
body .alert-success:empty,
body .alert-info:empty,
body .form-error:empty,
body .error-message:empty,
body .help-block:empty,
body [class*="error-text"]:empty,
body .alert.hidden,
body .alert-success.hidden,
body .alert-danger.hidden,
body .alert-warning.hidden,
body .alert-info.hidden,
body #oxSuccess.hidden,
body #oxLoadError.hidden,
body div#oxSuccess.alert.hidden,
body div#oxLoadError.alert.hidden,
body #oxSuccess:not(.alert-error-shown):has(span:empty),
body #oxLoadError:not(.alert-error-shown):has(span:empty) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* Cache aussi les alerts qui ne contiennent QUE des espaces / pseudo (le ::before ne compte pas comme content) */
.alert:not(:has(*)):not(:has(*::first-letter)) {
    /* fallback : si pas de contenu textuel visible */
}

/* ============================================================
   /submitticket.php — REDESIGN PCM premium
   STEP 1 : choix département (.list-group > a.list-group-item.has-icon)
   STEP 2 : formulaire (panel-form / file-input / actions)
   ============================================================ */

/* ===== Step 1 : Cards de département ===== */
body.page-submitticket .list-group,
body[class*="submitticket"] .list-group {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 14px !important;
}
body.page-submitticket .list-group-item.has-icon,
body[class*="submitticket"] .list-group-item.has-icon,
body[class*="submitticket"] a.list-group-item {
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -8px rgba(0,0,0,0.45) !important;
    padding: 22px 22px 20px 78px !important;
    margin: 0 !important;
    color: #cfe1ff !important;
    position: relative !important;
    text-decoration: none !important;
    transition: border-color .2s, box-shadow .2s, transform .2s !important;
    display: block !important;
    min-height: 100px !important;
}
body.page-submitticket .list-group-item.has-icon:hover,
body[class*="submitticket"] a.list-group-item:hover {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 12px 28px -10px rgba(25,102,255,0.40),
                0 0 0 1px rgba(0,154,255,0.20) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
body.page-submitticket .list-group-item.has-icon .list-group-item-icon,
body[class*="submitticket"] .list-group-item-icon.lm {
    position: absolute !important;
    left: 22px !important;
    top: 22px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.20), rgba(0,154,255,0.10)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #009AFF !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: background .2s, border-color .2s !important;
}
body[class*="submitticket"] a.list-group-item:hover .list-group-item-icon {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
body[class*="submitticket"] .list-group-item-heading {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
body[class*="submitticket"] .list-group-item-text {
    color: rgba(255,255,255,0.70) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
/* Labels success/danger dans le département */
body[class*="submitticket"] .list-group-item .label.label-success,
body[class*="submitticket"] .list-group-item .label.label-danger {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body[class*="submitticket"] .list-group-item .label.label-success {
    background: rgba(34,197,94,0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34,197,94,0.30) !important;
}
body[class*="submitticket"] .list-group-item .label.label-danger {
    background: rgba(239,68,68,0.12) !important;
    color: #ff8a80 !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
}

/* ===== Step 2 : Formulaire ===== */
body[class*="submitticket"] .section-header .section-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    position: relative !important;
    padding-left: 16px !important;
    display: flex !important;
    align-items: center !important;
}
body[class*="submitticket"] .section-header .section-title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 14px !important;
    background: linear-gradient(180deg, #1966FF, #009AFF) !important;
    border-radius: 2px !important;
}
body[class*="submitticket"] .section {
    margin-bottom: 22px !important;
}
body[class*="submitticket"] .panel.panel-form,
body[class*="submitticket"] .panel-default.panel-form {
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -8px rgba(0,0,0,0.40) !important;
    overflow: hidden !important;
}
body[class*="submitticket"] .panel-form .panel-body {
    padding: 22px !important;
    background: transparent !important;
}
body[class*="submitticket"] .panel-form label {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 0 7px !important;
    display: block !important;
}
body[class*="submitticket"] .panel-form input.form-control,
body[class*="submitticket"] .panel-form select.form-control,
body[class*="submitticket"] .panel-form textarea.form-control {
    background: rgba(0,8,30,0.55) !important;
    background-color: rgba(0,8,30,0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    height: auto !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body[class*="submitticket"] .panel-form input.form-control:focus,
body[class*="submitticket"] .panel-form select.form-control:focus,
body[class*="submitticket"] .panel-form textarea.form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background-color: rgba(0,8,30,0.70) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
    outline: none !important;
}
body[class*="submitticket"] .panel-form input.form-control::placeholder,
body[class*="submitticket"] .panel-form textarea.form-control::placeholder {
    color: #5a7494 !important;
}
body[class*="submitticket"] .panel-form input.form-control.disabled,
body[class*="submitticket"] .panel-form input.form-control[disabled] {
    background: rgba(0,8,30,0.30) !important;
    color: #8fadc9 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
body[class*="submitticket"] .panel-form textarea.form-control,
body[class*="submitticket"] textarea.markdown-editor {
    min-height: 200px !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
}

/* File upload zone — design drag-drop premium */
body[class*="submitticket"] .file-input.form-control {
    background: rgba(0,8,30,0.40) !important;
    border: 1.5px dashed rgba(98,152,254,0.35) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    min-height: 56px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s !important;
    color: #cfe1ff !important;
}
body[class*="submitticket"] .file-input.form-control:hover {
    border-color: rgba(0,154,255,0.55) !important;
    background: rgba(25,102,255,0.06) !important;
}
body[class*="submitticket"] .file-input-button.btn.btn-default {
    background: linear-gradient(135deg, rgba(25,102,255,0.15), rgba(0,154,255,0.08)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 9px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}
body[class*="submitticket"] .file-input-text.text-light {
    color: #8fadc9 !important;
    font-size: 13px !important;
    flex: 1 !important;
}
body[class*="submitticket"] .add-extra-attachement.btn-primary-faded {
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body[class*="submitticket"] .add-extra-attachement.btn-primary-faded:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body[class*="submitticket"] .add-extra-attachement i {
    margin-right: 6px !important;
}
body[class*="submitticket"] .ticket-attachments-message {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    margin-top: 10px !important;
}

/* Form actions */
body[class*="submitticket"] .form-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body[class*="submitticket"] .form-actions input.btn-primary.btn-lg,
body[class*="submitticket"] .form-actions #openTicketSubmit {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 11px !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px -3px rgba(25,102,255,0.35) !important;
    transition: filter .15s, box-shadow .15s !important;
}
body[class*="submitticket"] .form-actions input.btn-primary.btn-lg:hover:not([disabled]) {
    filter: brightness(1.10) !important;
    box-shadow: 0 10px 22px -3px rgba(25,102,255,0.50) !important;
}
body[class*="submitticket"] .form-actions a.btn-default.btn-lg {
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 11px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s !important;
}
body[class*="submitticket"] .form-actions a.btn-default.btn-lg:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* KB suggestions / autoAnswer dans le formulaire */
body[class*="submitticket"] #autoAnswerSuggestions {
    background: rgba(25,102,255,0.06) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-top: 18px !important;
}
body[class*="submitticket"] #autoAnswerSuggestions:empty {
    display: none !important;
}

/* Support hours badge dans la card département */
body[class*="submitticket"] .support-time-box.d-flex {
    background: rgba(98,152,254,0.12) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    color: #cfe1ff !important;
    font-weight: 600 !important;
}

/* ============================================================
   Step 1 — Enrichissements (statut, KB search, filtre, horaires)
   ============================================================ */
.pcm-status-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    margin: 0 0 18px !important;
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 999px !important;
    flex-wrap: wrap !important;
}
.pcm-status-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #cfe1ff;
    font-size: 12.5px;
    font-weight: 600;
}
.pcm-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74,222,128,0.65);
    flex-shrink: 0;
    position: relative;
}
.pcm-status-dot.is-ok::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(74,222,128,0.30);
    animation: pcm-pulse-ok 2s ease-in-out infinite;
    z-index: -1;
}
@keyframes pcm-pulse-ok {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0; }
}
.pcm-status-text {
    color: #4ade80;
    font-weight: 700;
}
.pcm-status-link {
    color: #6298fe !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    transition: background .15s, color .15s !important;
}
.pcm-status-link:hover {
    background: rgba(25,102,255,0.20) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* KB search avant ticket */
.pcm-kb-search-box {
    background: linear-gradient(135deg, rgba(25,102,255,0.08), rgba(0,154,255,0.03)) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin: 0 0 22px !important;
}
.pcm-kb-search-head {
    margin-bottom: 12px;
}
.pcm-kb-search-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}
.pcm-kb-search-sub {
    color: #8fadc9;
    font-size: 12.5px;
}
.pcm-kb-search-input-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pcm-kb-search-input {
    flex: 1 1 280px !important;
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.pcm-kb-search-input::placeholder { color: #5a7494; }
.pcm-kb-search-input:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background: rgba(0,8,30,0.70) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}
.pcm-kb-search-cta {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    min-height: 42px !important;
    transition: background .15s, border-color .15s, color .15s !important;
    white-space: nowrap !important;
}
.pcm-kb-search-cta:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.pcm-kb-search-results {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(98,152,254,0.18);
}
.pcm-kb-search-results.is-show {
    display: block;
}
.pcm-kb-results-title {
    color: #8fadc9;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
}
.pcm-kb-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 4px !important;
    background: rgba(0,8,30,0.40) !important;
    border: 1px solid rgba(98,152,254,0.15) !important;
    border-radius: 10px !important;
    color: #cfe1ff !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, color .12s !important;
}
.pcm-kb-result-item:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(0,154,255,0.45) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.pcm-kb-result-icon {
    color: #6298fe;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.pcm-kb-result-icon svg { width: 18px; height: 18px; display: block; }
.pcm-kb-result-title { flex: 1; }
.pcm-kb-result-arrow {
    color: #6298fe;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}
.pcm-kb-result-arrow svg { width: 14px; height: 14px; display: block; }
.pcm-kb-empty {
    color: #8fadc9;
    font-size: 12.5px;
    padding: 8px 12px;
    text-align: center;
}

/* Filtre départements */
.pcm-dept-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.25);
    border-radius: 12px;
    padding: 0 14px;
    margin: 0 0 16px;
    transition: border-color .15s, box-shadow .15s;
}
.pcm-dept-filter:focus-within {
    border-color: rgba(0,154,255,0.55);
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12);
}
.pcm-dept-filter-icon {
    color: #6298fe;
    flex-shrink: 0;
}
.pcm-dept-filter-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.pcm-dept-filter-input {
    flex: 1 !important;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    padding: 12px 0 !important;
    font-size: 13.5px !important;
    outline: none !important;
    min-height: 42px !important;
}
.pcm-dept-filter-input::placeholder { color: #5a7494; }

/* Badge "Réponse moyenne" dans chaque dept */
.pcm-response-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px !important;
    padding: 2px 9px !important;
    background: rgba(74,222,128,0.10) !important;
    border: 1px solid rgba(74,222,128,0.30) !important;
    border-radius: 999px !important;
    color: #4ade80 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.6 !important;
}
.pcm-response-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.65);
}

/* Bandeau horaires support en bas */
.pcm-support-hours {
    margin-top: 22px;
    padding: 18px 22px;
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 14px;
}
.pcm-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}
.pcm-hours-block {
    min-width: 0;
}
.pcm-hours-label {
    color: #6298fe;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}
.pcm-hours-value {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 3px;
}
.pcm-hours-note {
    color: #8fadc9;
    font-size: 12px;
    line-height: 1.4;
}
.pcm-hours-link {
    color: #009AFF !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(0,154,255,0.45) !important;
}
.pcm-hours-link:hover {
    color: #6298fe !important;
    border-bottom-color: #6298fe !important;
}

/* Indicateur d'étape (JS-injecté) */
.pcm-ticket-steps {
    display: flex !important;
    gap: 10px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}
.pcm-ticket-steps .pcm-step {
    flex: 1 1 0 !important;
    min-width: 180px !important;
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.pcm-ticket-steps .pcm-step .pcm-step-num {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(98,152,254,0.15) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    color: #6298fe !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}
.pcm-ticket-steps .pcm-step.is-active {
    background: linear-gradient(135deg, rgba(25,102,255,0.18), rgba(0,154,255,0.08)) !important;
    border-color: rgba(0,154,255,0.45) !important;
    color: #ffffff !important;
}
.pcm-ticket-steps .pcm-step.is-active .pcm-step-num {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
.pcm-ticket-steps .pcm-step.is-done {
    background: rgba(34,197,94,0.08) !important;
    border-color: rgba(34,197,94,0.30) !important;
    color: #4ade80 !important;
}
.pcm-ticket-steps .pcm-step.is-done .pcm-step-num {
    background: rgba(34,197,94,0.15) !important;
    border-color: rgba(34,197,94,0.40) !important;
    color: #4ade80 !important;
}

/* Compteur de caractères (JS-injecté) */
.pcm-char-counter {
    display: inline-block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8fadc9;
}
.pcm-char-counter.is-warn { color: #fcd34d; }
.pcm-char-counter.is-over { color: #ff8a80; }

/* ===== Brouillon restauré ===== */
.pcm-draft-banner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    margin: 0 0 16px !important;
    background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(252,211,77,0.04)) !important;
    border: 1px solid rgba(252,211,77,0.30) !important;
    border-radius: 12px !important;
    color: #fcd34d !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.pcm-draft-banner .pcm-draft-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.pcm-draft-banner .pcm-draft-text {
    flex: 1;
    color: #fcd34d;
}
.pcm-draft-banner .pcm-draft-discard {
    background: transparent;
    border: 1px solid rgba(252,211,77,0.40);
    color: #fcd34d;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.pcm-draft-banner .pcm-draft-discard:hover {
    background: rgba(252,211,77,0.15);
    border-color: rgba(252,211,77,0.65);
}

/* ===== Priorité — pills ===== */
.pcm-priority-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pcm-priority-pill {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.25);
    border-radius: 999px;
    color: #8fadc9;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.pcm-priority-pill:hover {
    border-color: rgba(0,154,255,0.45);
    color: #ffffff;
}
.pcm-priority-pill .pcm-priority-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(98,152,254,0.15);
    color: var(--pcm-pill-color, #6298fe);
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}
.pcm-priority-pill.is-active {
    border-color: var(--pcm-pill-color, #6298fe);
    background: linear-gradient(135deg,
        rgba(25,102,255,0.18),
        rgba(0,154,255,0.08));
    color: #ffffff;
    box-shadow: 0 4px 12px -4px var(--pcm-pill-color, rgba(25,102,255,0.30));
}
.pcm-priority-pill.is-active .pcm-priority-icon {
    background: var(--pcm-pill-color, #6298fe);
    color: #0a1631;
}

/* ===== File-input drag-over feedback ===== */
.file-input.form-control.is-dragover {
    border-color: rgba(0,154,255,0.65) !important;
    background: rgba(25,102,255,0.10) !important;
}
.file-input.form-control.has-file {
    border-style: solid !important;
    border-color: rgba(74,222,128,0.40) !important;
    background: rgba(34,197,94,0.06) !important;
}
.file-input.form-control.has-file .file-input-text {
    color: #4ade80 !important;
}

/* ===== KB suggestions sous le subject ===== */
.pcm-kb-suggestions {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(25,102,255,0.06);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 10px;
}
.pcm-kb-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #8fadc9;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.pcm-kb-item {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #6298fe;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.pcm-kb-item:hover {
    background: rgba(25,102,255,0.10);
    color: #ffffff;
    text-decoration: none;
}
.pcm-kb-item::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #6298fe;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    opacity: 0.7;
}

/* ===== Submit loading state ===== */
.pcm-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}
.pcm-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255,255,255,0.30);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pcm-spin .7s linear infinite;
}
@keyframes pcm-spin {
    to { transform: rotate(360deg); }
}

/* ===== Templates rapides (pills cliquables) ===== */
.pcm-templates {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(25,102,255,0.06), rgba(0,154,255,0.03));
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 12px;
}
.pcm-templates-label {
    color: #8fadc9;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
}
.pcm-templates-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pcm-template-pill {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    border-radius: 999px;
    color: #cfe1ff;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.pcm-template-pill:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ===== Hint priorité urgence ===== */
.pcm-urgency-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04));
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 10px;
    color: #ff8a80;
    font-size: 12.5px;
    font-weight: 600;
    animation: pcm-fadeIn .25s ease-out;
}
@keyframes pcm-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.pcm-urgency-hint .pcm-urgency-icon { font-size: 16px; }
.pcm-urgency-hint b { color: #ffffff; }
.pcm-urgency-hint .pcm-urgency-apply,
.pcm-urgency-hint .pcm-urgency-dismiss {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.20);
    color: #ffffff;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.pcm-urgency-hint .pcm-urgency-apply {
    background: linear-gradient(135deg, #ef4444, #f97316);
    border-color: transparent;
}
.pcm-urgency-hint .pcm-urgency-apply:hover { filter: brightness(1.1); }
.pcm-urgency-hint .pcm-urgency-dismiss:hover {
    background: rgba(255,255,255,0.08);
}

/* ===== Modal "Guide de mise en forme" — clean PCM ===== */
.pcm-md-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(2,6,20,0.55);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .2s;
}
.pcm-md-guide-backdrop.is-show { opacity: 1; }
.pcm-md-guide-modal {
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 60%, #08122e 100%);
    background-color: #0f1d3f;
    border: 1px solid rgba(98,152,254,0.30);
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.65),
                0 0 0 1px rgba(0,154,255,0.10) inset;
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #cfe1ff;
    transform: translateY(20px) scale(0.97);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.pcm-md-guide-backdrop.is-show .pcm-md-guide-modal {
    transform: translateY(0) scale(1);
}
.pcm-md-guide-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid rgba(98,152,254,0.18);
    background: linear-gradient(135deg, rgba(25,102,255,0.06), rgba(0,154,255,0.02));
    flex-shrink: 0;
}
.pcm-md-guide-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.pcm-md-guide-sub {
    color: #8fadc9;
    font-size: 12.5px;
    font-weight: 500;
}
.pcm-md-guide-close {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #8fadc9;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}
.pcm-md-guide-close:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.40);
    color: #ff8a80;
}
.pcm-md-guide-close svg { width: 16px; height: 16px; display: block; }
.pcm-md-guide-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.pcm-md-cat { margin-bottom: 24px; }
.pcm-md-cat:last-child { margin-bottom: 0; }
.pcm-md-cat-title {
    color: #6298fe;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(98,152,254,0.18);
}
.pcm-md-cat-items {
    display: grid;
    gap: 8px;
}
.pcm-md-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.15);
    border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.pcm-md-row:hover {
    background: rgba(25,102,255,0.06);
    border-color: rgba(98,152,254,0.30);
}
.pcm-md-syntax {
    min-width: 0;
}
.pcm-md-syntax pre {
    margin: 0 0 4px;
    padding: 4px 8px;
    background: rgba(0,8,30,0.65);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 6px;
    color: #6298fe;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
.pcm-md-hint {
    color: #8fadc9;
    font-size: 11px;
    font-weight: 500;
    display: block;
}
.pcm-md-arrow {
    color: #6298fe;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
}
.pcm-md-arrow svg { width: 14px; height: 14px; display: block; }
.pcm-md-result {
    min-width: 0;
    color: #ffffff;
    font-size: 13.5px;
    line-height: 1.5;
}
.pcm-md-result b { color: #ffffff; font-weight: 700; }
.pcm-md-result i { color: #cfe1ff; }
.pcm-md-result code {
    background: rgba(25,102,255,0.15);
    color: #6298fe;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}
.pcm-md-result s { color: #8fadc9; }
.pcm-h1-sample { font-size: 18px; font-weight: 800; color: #ffffff; }
.pcm-h2-sample { font-size: 15px; font-weight: 700; color: #ffffff; }
.pcm-h3-sample { font-size: 13px; font-weight: 700; color: #cfe1ff; }
@media (max-width: 640px) {
    .pcm-md-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .pcm-md-arrow {
        transform: rotate(90deg);
        height: 16px;
    }
}

/* ===== Éditeur complet (toolbar + textarea unifiés) ===== */
.pcm-editor {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.25);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.pcm-editor:focus-within {
    border-color: rgba(0,154,255,0.55);
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12);
}
.pcm-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(25,102,255,0.07), rgba(25,102,255,0.02));
    border-bottom: 1px solid rgba(98,152,254,0.18);
}
.pcm-editor-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #8fadc9;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}
.pcm-editor-btn:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(98,152,254,0.30);
    color: #ffffff;
}
.pcm-editor-btn:active {
    background: rgba(25,102,255,0.30);
    transform: scale(0.96);
}
.pcm-editor-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}
.pcm-editor-sep {
    width: 1px;
    height: 18px;
    background: rgba(98,152,254,0.22);
    margin: 0 5px;
    flex-shrink: 0;
}
.pcm-editor-textarea,
textarea.pcm-editor-textarea {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    min-height: 220px !important;
    width: 100% !important;
    display: block !important;
    resize: vertical !important;
    font-family: inherit !important;
}
.pcm-editor-textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
/* Override les règles génériques de panel-form pour le textarea wrappé */
body[class*="submitticket"] .panel-form .pcm-editor textarea.form-control,
body[class*="viewticket"] .panel-ticket-reply .pcm-editor textarea.form-control {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    min-height: 220px !important;
}
body[class*="submitticket"] .panel-form .pcm-editor textarea.form-control:focus,
body[class*="viewticket"] .panel-ticket-reply .pcm-editor textarea.form-control:focus {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* ===== Diagnostic système (collapsible) ===== */
.pcm-diagnostic {
    margin: 18px 0 0;
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 12px;
    overflow: hidden;
}
.pcm-diag-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfe1ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.pcm-diag-toggle:hover { background: rgba(25,102,255,0.06); }
.pcm-diag-arrow {
    color: #6298fe;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .15s;
}
.pcm-diag-badge {
    margin-left: auto;
    background: rgba(98,152,254,0.15);
    border: 1px solid rgba(98,152,254,0.30);
    color: #6298fe;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pcm-diag-body {
    padding: 0 16px 14px;
    border-top: 1px solid rgba(98,152,254,0.10);
}
.pcm-diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
    padding: 14px 0;
}
.pcm-diag-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pcm-diag-grid > div span {
    color: #6298fe;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}
.pcm-diag-grid > div b {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}
.pcm-diag-include {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cfe1ff;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
}
.pcm-diag-include input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #009AFF;
    cursor: pointer;
}

/* ===== Toast notification ===== */
.pcm-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    padding: 12px 18px;
    background: linear-gradient(135deg, #0f1d3f, #0a1631);
    border: 1px solid rgba(0,154,255,0.45);
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,0.50), 0 0 0 1px rgba(0,154,255,0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.pcm-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}
.pcm-toast::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(74,222,128,0.60);
}

/* ============================================================
   /viewticket.php — REDESIGN PCM
   Conversation timeline + cards + sidebar info premium
   ============================================================ */

/* ===== Reply box (Répondre collapsible) ===== */
body[class*="viewticket"] .panel.panel-ticket-reply,
body[class*="viewticket"] .panel-collapsable {
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px -8px rgba(0,0,0,0.40) !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
}
body[class*="viewticket"] .panel-ticket-reply .panel-heading {
    background: linear-gradient(135deg, rgba(25,102,255,0.10), rgba(0,154,255,0.04)) !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
}
body[class*="viewticket"] .panel-ticket-reply .panel-heading:hover {
    background: linear-gradient(135deg, rgba(25,102,255,0.16), rgba(0,154,255,0.06)) !important;
}
body[class*="viewticket"] .panel-ticket-reply .panel-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body[class*="viewticket"] .panel-ticket-reply .panel-title i {
    color: #6298fe !important;
    font-size: 14px !important;
}
body[class*="viewticket"] .panel-ticket-reply .collapse-icon {
    color: #6298fe !important;
    transition: transform .2s !important;
}
body[class*="viewticket"] .panel-ticket-reply .panel-body {
    padding: 22px !important;
    background: transparent !important;
}
body[class*="viewticket"] .panel-ticket-reply label {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 0 7px !important;
    display: block !important;
}
body[class*="viewticket"] .panel-ticket-reply input.form-control,
body[class*="viewticket"] .panel-ticket-reply textarea.form-control {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    min-height: 42px !important;
    box-shadow: none !important;
}
body[class*="viewticket"] .panel-ticket-reply input.form-control:focus,
body[class*="viewticket"] .panel-ticket-reply textarea.form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background: rgba(0,8,30,0.70) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
    outline: none !important;
}
body[class*="viewticket"] .panel-ticket-reply textarea.form-control {
    min-height: 160px !important;
    line-height: 1.6 !important;
}
body[class*="viewticket"] .panel-ticket-reply .form-actions {
    margin-top: 16px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}
body[class*="viewticket"] .panel-ticket-reply .btn.btn-primary {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.30) !important;
}
body[class*="viewticket"] .panel-ticket-reply .btn.btn-default {
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
}
body[class*="viewticket"] .panel-ticket-reply .btn.btn-default:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* ===== Reply timeline cards (compact, structuré) ===== */
body[class*="viewticket"] .ticket-reply {
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-left: 3px solid #6298fe !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,0.35) !important;
    margin-bottom: 12px !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
    position: relative !important;
}
/* Staff reply : couleur cyan PCM marquée */
body[class*="viewticket"] .ticket-reply.staff {
    border-left: 3px solid #009AFF !important;
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(8,18,46,0.92) 100%) !important;
}
/* Header : avatar | nom + badge | date — TOUT sur UNE ligne (grid pour structure stricte) */
body[class*="viewticket"] .ticket-reply-top,
.ticket-reply .ticket-reply-top {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "avatar user date" !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    text-align: left !important;
}
body[class*="viewticket"] .ticket-reply-top .client-avatar,
.ticket-reply .ticket-reply-top .client-avatar {
    grid-area: avatar !important;
}
body[class*="viewticket"] .ticket-reply-top .user,
.ticket-reply .ticket-reply-top .user {
    grid-area: user !important;
}
body[class*="viewticket"] .ticket-reply-top > .date,
.ticket-reply .ticket-reply-top > .date {
    grid-area: date !important;
}
body[class*="viewticket"] .ticket-reply .client-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(0,154,255,0.10)) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body[class*="viewticket"] .ticket-reply.staff .client-avatar {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    box-shadow: 0 3px 8px -2px rgba(0,154,255,0.35) !important;
}
body[class*="viewticket"] .ticket-reply .client-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* .user : column — name au-dessus du badge, collés à droite de l'avatar */
body[class*="viewticket"] .ticket-reply .user,
.ticket-reply .user {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    justify-content: center !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
body[class*="viewticket"] .ticket-reply .user-info,
.ticket-reply .user-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body[class*="viewticket"] .ticket-reply .user .name {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body[class*="viewticket"] .ticket-reply .user .name i {
    color: #6298fe !important;
    font-size: 13px !important;
    margin-right: 4px !important;
}
body[class*="viewticket"] .ticket-reply .user .type {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
body[class*="viewticket"] .ticket-reply .user .type_name {
    background: rgba(98,152,254,0.15) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #6298fe !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}
body[class*="viewticket"] .ticket-reply.staff .user .type_name {
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(0,154,255,0.10)) !important;
    border-color: rgba(0,154,255,0.45) !important;
    color: #ffffff !important;
}
/* Date : poussée à DROITE, sur la même ligne que name + badge */
body[class*="viewticket"] .ticket-reply .date {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Message : commence directement sans marge supplémentaire */
body[class*="viewticket"] .ticket-reply-message {
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== Titres de section sidebar — tagués par JS via texte ===== */
.pcm-sidebar-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    margin: 0 0 14px !important;
    padding: 8px 0 8px 16px !important;
    position: relative !important;
    line-height: 1.3 !important;
    background: linear-gradient(90deg, rgba(25,102,255,0.10), transparent 70%) !important;
    border-radius: 0 8px 8px 0 !important;
    display: block !important;
}
.pcm-sidebar-title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3px !important;
    background: linear-gradient(180deg, #1966FF, #009AFF) !important;
    border-radius: 2px !important;
}

/* ===== Étiquettes info (Demandeur, Soumis, etc.) — petites uppercase cyan ===== */
.pcm-info-label {
    color: #6298fe !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* ===== Alerte "Vous avez une facture impayée" (client-home-alert) ===== */
body .client-home-alert,
body .alert.client-home-alert,
body .alert.alert-faded,
.client-home-alerts .alert-warning,
.client-home-alerts .alert-danger,
.client-home-alerts .alert.alert-lagom {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)) !important;
    background-image: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)) !important;
    background-color: rgba(239,68,68,0.06) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    border-radius: 14px !important;
    color: #ffb0a8 !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 4px 18px -8px rgba(239,68,68,0.20) !important;
    margin: 0 0 18px !important;
}
.client-home-alert .alert-icon,
.client-home-alert span.alert-icon.ls,
.client-home-alert .ls-exclamation-circle {
    background: rgba(239,68,68,0.18) !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
    color: #ff8a80 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.client-home-alert .alert-body {
    flex: 1 !important;
    min-width: 0 !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.client-home-alert .alert-body * {
    color: inherit !important;
}
.client-home-alert .alert-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
/* Bouton .btn-warning GLOBAL (urgence sémantique : factures, renouvellements)
   Cible PARTOUT — productdetails, dashboard, panier, sidebar
   SPÉCIFICITÉ MAX : html body + tag + 2 classes + :is() pour battre Lagom natif */
html body a.btn.btn-warning,
html body button.btn.btn-warning,
html body input.btn.btn-warning,
html body .btn.btn-warning,
html body .btn-warning,
html body .alert .btn.btn-warning,
html body .alert-warning .btn.btn-warning,
html body .alert-danger .btn.btn-warning,
html body .client-home-alert .btn.btn-warning,
html body[class*="page-clientarea"] .btn.btn-warning,
html body[class*="productdetails"] .btn.btn-warning {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-color: #ef4444 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px -2px rgba(239,68,68,0.40) !important;
    transition: filter .15s, box-shadow .15s !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
html body a.btn.btn-warning:hover,
html body button.btn.btn-warning:hover,
html body .btn.btn-warning:hover,
html body .alert .btn.btn-warning:hover {
    filter: brightness(1.10) !important;
    box-shadow: 0 6px 18px -2px rgba(239,68,68,0.55) !important;
    color: #ffffff !important;
}
html body .btn.btn-warning i,
html body .btn.btn-warning .ls,
html body .btn.btn-warning .btn-text,
html body .btn.btn-warning span,
html body .btn.btn-warning .lm {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* OBSOLETE: ancien bloc spécifique alert (gardé pour rétrocompat, identique au global) */
body .alert .btn.btn-warning,
body .alert a.btn.btn-warning,
body .alert .btn.btn-warning.btn-sm,
body .client-home-alert .btn.btn-warning,
body .client-home-alert a.btn.btn-warning,
body .alert-danger .btn.btn-warning,
body .alert-warning .btn.btn-warning,
body a.btn.btn-warning[href*="invoices"],
body a.btn.btn-warning[href*="/cart/"] {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-color: #ef4444 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px -2px rgba(239,68,68,0.40) !important;
    transition: filter .15s, box-shadow .15s !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
body .alert .btn.btn-warning:hover,
body .alert a.btn.btn-warning:hover,
body .client-home-alert .btn.btn-warning:hover,
body .client-home-alert a.btn.btn-warning:hover,
body .alert-danger .btn.btn-warning:hover,
body a.btn.btn-warning[href*="invoices"]:hover {
    filter: brightness(1.10) !important;
    box-shadow: 0 6px 18px -2px rgba(239,68,68,0.55) !important;
    color: #ffffff !important;
}
body .alert .btn.btn-warning i,
body .alert .btn.btn-warning .ls,
body .client-home-alert .btn.btn-warning i {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.client-home-alert .btn-text {
    color: #ffffff !important;
}
.client-home-alert .btn-close-alert,
.client-home-alert .btn.btn-icon.btn-close-alert {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    color: #ff8a80 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.client-home-alert .btn-close-alert:hover {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.55) !important;
    color: #ffffff !important;
}

/* Cas alert-warning : JAUNE au lieu de rouge, si le contexte n'est pas client-home-alert critique */
body .alert.alert-lagom.alert-warning:not(.client-home-alert):not(.alert-danger) {
    background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(252,211,77,0.04)) !important;
    border: 1px solid rgba(252,211,77,0.30) !important;
    color: #fcd34d !important;
}

/* ===== Reply message content ===== */
body[class*="viewticket"] .ticket-reply-message {
    color: #cfe1ff !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    word-break: break-word !important;
}
body[class*="viewticket"] .ticket-reply-message hr {
    border: 0 !important;
    height: 1px !important;
    background: rgba(98,152,254,0.18) !important;
    margin: 14px 0 !important;
}
body[class*="viewticket"] .ticket-reply-message a {
    color: #009AFF !important;
    text-decoration: none !important;
}
body[class*="viewticket"] .ticket-reply-message a:hover {
    color: #6298fe !important;
    text-decoration: underline !important;
}
body[class*="viewticket"] .ticket-reply-message code {
    background: rgba(25,102,255,0.15) !important;
    color: #6298fe !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}
body[class*="viewticket"] .ticket-reply-message pre {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #cfe1ff !important;
    overflow-x: auto !important;
}
body[class*="viewticket"] .ticket-reply-message blockquote {
    border-left: 3px solid rgba(98,152,254,0.40) !important;
    padding: 8px 14px !important;
    margin: 12px 0 !important;
    background: rgba(25,102,255,0.06) !important;
    border-radius: 0 8px 8px 0 !important;
    color: #8fadc9 !important;
    font-style: italic !important;
}

/* ===== Attachments ===== */
body[class*="viewticket"] .ticket-reply-attachments {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(98,152,254,0.18) !important;
}
body[class*="viewticket"] .ticket-reply-attachments strong {
    color: #8fadc9 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: block !important;
    margin-bottom: 8px !important;
}
body[class*="viewticket"] .ticket-reply-attachments ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
body[class*="viewticket"] .ticket-reply-attachments li {
    padding: 0 !important;
    margin: 0 !important;
}
body[class*="viewticket"] .ticket-reply-attachments li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    color: #cfe1ff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body[class*="viewticket"] .ticket-reply-attachments li a:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body[class*="viewticket"] .ticket-reply-attachments li a i {
    color: #6298fe !important;
}
body[class*="viewticket"] .ticket-reply-attachments .attachment-extension {
    color: #6298fe !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
}

/* ===== Rating étoiles ===== */
body[class*="viewticket"] .ticket-reply-message .rating,
body[class*="viewticket"] .ticket-reply-message .rating-done {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(98,152,254,0.18) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}
body[class*="viewticket"] .ticket-reply-message .rating .star,
body[class*="viewticket"] .ticket-reply-message .rating-done .star {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    background: transparent !important;
    color: rgba(98,152,254,0.30) !important;
    font-size: 18px !important;
    transition: color .15s, transform .15s !important;
}
body[class*="viewticket"] .ticket-reply-message .rating .star::before,
body[class*="viewticket"] .ticket-reply-message .rating-done .star::before {
    content: "★";
}
body[class*="viewticket"] .ticket-reply-message .rating .star:hover,
body[class*="viewticket"] .ticket-reply-message .rating .star:hover ~ .star,
body[class*="viewticket"] .ticket-reply-message .rating-done .star.active {
    color: #fcd34d !important;
    transform: scale(1.05) !important;
}
body[class*="viewticket"] .ticket-reply-message .rated {
    margin-right: auto !important;
    color: #4ade80 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* ===== Sidebar info (Information de la demande) ===== */
body[class*="viewticket"] .ticket-info-card,
body[class*="viewticket"] .sidebar-card,
body[class*="viewticket"] aside .panel,
body[class*="viewticket"] aside .card,
body[class*="viewticket"] .sidebar-left .panel,
body[class*="viewticket"] [class*="panel-ticket-info"] {
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
/* État/Priorité badges (Fermé / Ouvert / Haute / Moyenne / Basse) */
body[class*="viewticket"] .label-status,
body[class*="viewticket"] .ticket-status,
body[class*="viewticket"] [class*="status-Closed"],
body[class*="viewticket"] [class*="status-Open"],
body[class*="viewticket"] [class*="status-Pending"],
body[class*="viewticket"] [class*="status-Answered"],
body[class*="viewticket"] [class*="status-InProgress"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ===== Sticky CTA "Répondre" en bas (mobile) ===== */
@media (max-width: 768px) {
    body[class*="viewticket"] .panel.panel-ticket-reply.panel-collapsable {
        position: sticky !important;
        bottom: 12px !important;
        z-index: 20 !important;
    }
}

/* ===== Toolbar actions au-dessus de la conversation ===== */
.pcm-ticket-toolbar {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 12px;
    flex-wrap: wrap;
}
.pcm-tb-btn {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #cfe1ff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
}
.pcm-tb-btn:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
}
.pcm-tb-icon { font-size: 13px; line-height: 1; }

/* ===== Canned responses (réponses rapides) ===== */
.pcm-canned {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: rgba(25,102,255,0.05);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 10px;
}
.pcm-canned-label {
    color: #8fadc9;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.pcm-canned-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pcm-canned-pill {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #cfe1ff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.pcm-canned-pill:hover {
    background: rgba(25,102,255,0.18);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ===== Brouillon restauré (réponse) ===== */
.pcm-draft-hint {
    color: #fcd34d;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(252,211,77,0.06);
    border: 1px solid rgba(252,211,77,0.25);
    border-radius: 8px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pcm-draft-hint a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 700;
}

/* ===== Highlight IPs et URLs ===== */
.pcm-msg-link {
    color: #009AFF !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(0,154,255,0.45) !important;
    transition: color .15s, border-color .15s !important;
}
.pcm-msg-link:hover {
    color: #6298fe !important;
    border-bottom-color: #6298fe !important;
    text-decoration: none !important;
}
.pcm-msg-ip {
    background: linear-gradient(135deg, rgba(252,211,77,0.15), rgba(252,211,77,0.05)) !important;
    border: 1px solid rgba(252,211,77,0.35) !important;
    color: #fcd34d !important;
    padding: 1px 8px !important;
    border-radius: 6px !important;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .12s !important;
}
.pcm-msg-ip:hover {
    background: linear-gradient(135deg, rgba(252,211,77,0.25), rgba(252,211,77,0.10)) !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li:hover > a.nav-link {
    color: #ffffff !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active > a.nav-link {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link > .nav-img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) opacity(0.55) !important;
    transition: filter .15s !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li:hover > a.nav-link > .nav-img,
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active > a.nav-link > .nav-img {
    filter: brightness(0) invert(1) opacity(1) !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link > span {
    color: inherit !important;
    pointer-events: none !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li > a.nav-link > i.lm-info {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
    margin-left: 2px !important;
}
body ul.nav.nav-tabs.nav-lg[data-nav] > li.active > a.nav-link > i.lm-info {
    color: rgba(255,255,255,0.85) !important;
}
/* La nav register/transfer est dans .tab-nav--domain — ne pas la toucher ici */
.tab-nav--domain ul.nav.nav-tabs.nav-lg[data-nav] {
    /* reset to let .tab-nav--domain block dominate */
    padding: 0 !important;
}

/* ============================================================
   Arrows ← / → (swiper-button-prev / swiper-button-next) — design carré PCM
   ============================================================ */
body .swiper-button,
body .swiper-button-prev,
body .swiper-button-next,
body .nav-arrow {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    color: #6298fe !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
    box-shadow: none !important;
    line-height: 1 !important;
    font-size: 0 !important; /* élimine inline gap des nodes texte */
    text-align: center !important;
    flex-shrink: 0 !important;
}
body .swiper-button:hover,
body .swiper-button-prev:hover,
body .swiper-button-next:hover,
body .nav-arrow:hover {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
/* Force le contenu (SVG / icon / pseudo) à être réellement centré */
body .swiper-button > *,
body .swiper-button-prev > *,
body .swiper-button-next > *,
body .nav-arrow > * {
    margin: 0 auto !important;
    display: block !important;
    line-height: 1 !important;
}
body .swiper-button svg,
body .swiper-button-prev svg,
body .swiper-button-next svg,
body .nav-arrow svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    margin: auto !important;
}
body .swiper-button svg path,
body .swiper-button-prev svg path,
body .swiper-button-next svg path,
body .nav-arrow svg path {
    stroke: currentColor !important;
    fill: currentColor !important;
}
/* Si l'icône est rendue via i.lm / i.ls font-icon */
body .swiper-button i,
body .swiper-button-prev i,
body .swiper-button-next i,
body .nav-arrow i {
    font-size: 14px !important;
    line-height: 1 !important;
    display: block !important;
    margin: auto !important;
}
/* Lagom natif utilise parfois ::before / ::after pour la flèche — recentrer */
body .swiper-button-prev::after,
body .swiper-button-next::after,
body .swiper-button-prev::before,
body .swiper-button-next::before {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}
body .swiper-button-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    background: rgba(98,152,254,0.06) !important;
    color: #5a7494 !important;
}
body .swiper-button-disabled:hover {
    background: rgba(98,152,254,0.06) !important;
    transform: none !important;
    color: #5a7494 !important;
}

/* ============================================================
   Form validation alerts — premium PCM design
   "L'accord sur les conditions est requis"
   "Veuillez remplir les champs obligatoires"
   ============================================================ */
.alert,
.alert-danger,
.alert-warning,
.alert-info,
.alert-success,
.form-error,
.error-message,
.help-block.has-error,
.has-error .help-block,
[class*="error-text"] {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    border-radius: 12px !important;
    color: #ff8a80 !important;
    padding: 12px 16px 12px 44px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    position: relative !important;
    display: block !important;
}
/* Masque toutes les icônes Lagom natif à l'intérieur des alertes (lm-warning, lm-info, fa-*, ls-*) */
.alert > i,
.alert-danger > i,
.alert-warning > i,
.alert-info > i,
.alert-success > i,
.alert .lm,
.alert .fa,
.alert .ls,
.alert .icon,
.alert-lagom > i,
.alert-lagom .lm,
.alert-lagom .fa,
.alert-lagom .ls {
    display: none !important;
}
/* Icône SVG propre (Lucide alert-circle) injectée en background-position */
.alert-danger::before,
.form-error::before,
.error-message::before,
.help-block.has-error::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 13px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.alert-info,
.alert-warning {
    background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(252,211,77,0.04)) !important;
    border: 1px solid rgba(252,211,77,0.30) !important;
    color: #fcd34d !important;
    box-shadow: none !important;
}
.alert-info::before,
.alert-warning::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 13px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.alert-success {
    background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04)) !important;
    border: 1px solid rgba(34,197,94,0.30) !important;
    color: #4ade80 !important;
    box-shadow: none !important;
}
.alert-success::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 13px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* "Veuillez remplir les champs obligatoires" — fixed banner style */
.form-error-banner,
.required-fields-banner,
.alert.form-error,
.alert--required-fields,
[class*="required-fields"] {
    margin: 14px 0 !important;
    border-radius: 12px !important;
}

/* Highlight invalid form fields */
.has-error input,
.has-error select,
.has-error textarea,
input.has-error,
select.has-error,
input.is-invalid,
input:invalid:not(:placeholder-shown) {
    border-color: rgba(239,68,68,0.45) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important;
}

/* ============================================================
   Hide Lagom natif password strength UI on REGISTER page only.
   We replace it via JS — don't hide on /user/password etc.
   ============================================================ */
body.page-register #passwordStrengthBar,
body.page-register-default #passwordStrengthBar,
body.page-register .password-content-top > .progress,
body.page-register .password-content-text,
body.page-register-default .password-content-text {
    display: none !important;
}
/* Neutralize any container styling that creates a "yellow rectangle" */
body.page-register .input-password-strenght,
body.page-register .password-content-top {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
}
body.page-register .input-password-strenght::before,
body.page-register .input-password-strenght::after,
body.page-register .password-content-top::before,
body.page-register .password-content-top::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   Custom PCM password strength bar (injected via JS)
   ============================================================ */
.pcm-pwd-strength {
    margin-top: 8px;
    margin-bottom: 8px;
}
.pcm-pwd-strength-bar {
    height: 6px;
    background: rgba(98,152,254,0.10);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.pcm-pwd-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: rgba(98,152,254,0.30);
    transition: width .3s ease, background .3s ease;
}
.pcm-pwd-strength-fill.strength-weak {
    width: 25%;
    background: linear-gradient(90deg, #dc2626, #ef4444);
}
.pcm-pwd-strength-fill.strength-medium {
    width: 55%;
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}
.pcm-pwd-strength-fill.strength-strong {
    width: 80%;
    background: linear-gradient(90deg, #1966FF, #009AFF);
}
.pcm-pwd-strength-fill.strength-very-strong {
    width: 100%;
    background: linear-gradient(90deg, #009AFF, #22c55e);
}
.pcm-pwd-strength-label {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pcm-pwd-strength-label.strength-weak { color: #ff8a80; }
.pcm-pwd-strength-label.strength-medium { color: #fcd34d; }
.pcm-pwd-strength-label.strength-strong { color: #009AFF; }
.pcm-pwd-strength-label.strength-very-strong { color: #4ade80; }
.pcm-pwd-strength-label.strength-empty { color: #5a7494; font-weight: 600; }

/* Password mismatch alert */
.pcm-pwd-mismatch {
    margin-top: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04));
    border: 1px solid rgba(239,68,68,0.30);
    border-left: 3px solid #ef4444;
    border-radius: 10px;
    color: #ff8a80;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    display: none;
    align-items: center;
    gap: 8px;
}
.pcm-pwd-mismatch.is-shown {
    display: flex;
}
.pcm-pwd-mismatch::before {
    content: "⚠";
    color: #ef4444;
    font-size: 14px;
    flex-shrink: 0;
}
.pcm-pwd-match {
    margin-top: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04));
    border: 1px solid rgba(34,197,94,0.30);
    border-left: 3px solid #22c55e;
    border-radius: 10px;
    color: #4ade80;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    display: none;
    align-items: center;
    gap: 8px;
}
.pcm-pwd-match.is-shown {
    display: flex;
}
.pcm-pwd-match::before {
    content: "✓";
    color: #22c55e;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

/* ============================================================
   Invoices page — ZIP download bar (injected via JS) — compact layout
   ============================================================ */
.pcm-invoices-zip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(8,16,40,0.40) 100%);
    border: 1px solid rgba(0,154,255,0.22);
    border-radius: 12px;
    position: relative;
    min-height: 56px;
}
.pcm-invoices-zip-bar::before {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.55), transparent);
}
.pcm-invoices-zip-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfe1ff;
    font-size: 13px;
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
}
.pcm-invoices-zip-info i {
    color: #009AFF;
    font-size: 16px;
    flex-shrink: 0;
}
.pcm-invoices-zip-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.pcm-zip-year {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    border-radius: 10px;
    color: #ffffff;
    padding: 0 12px;
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 130px;
    appearance: auto;
}
.pcm-zip-year:focus {
    border-color: rgba(0,154,255,0.55);
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15);
}
.pcm-zip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter .15s, box-shadow .15s, background .15s;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
}
.pcm-zip-btn-year {
    background: rgba(25,102,255,0.10);
    color: #cfe1ff;
    border: 1px solid rgba(98,152,254,0.30);
}
.pcm-zip-btn-year:hover {
    background: rgba(25,102,255,0.18);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff !important;
}
.pcm-zip-btn-year[data-disabled="1"] {
    opacity: 0.45;
    cursor: not-allowed;
}
.pcm-zip-btn-all {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
}
.pcm-zip-btn-all:hover {
    filter: brightness(1.10);
    box-shadow: 0 8px 22px rgba(25,102,255,0.50);
    color: #ffffff !important;
}
@media (max-width: 760px) {
    .pcm-invoices-zip-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pcm-invoices-zip-actions {
        flex-wrap: wrap;
    }
    .pcm-zip-year { flex: 1 1 100%; min-width: 0; }
    .pcm-zip-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Tables (services, invoices, tickets, etc.) — premium design
   ============================================================ */
table.dataTable,
table.table,
.dataTables_wrapper table,
.app-content table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border: 0 !important;
}
table.dataTable thead th,
table.table thead th,
.dataTables_wrapper table thead th {
    background: transparent !important;
    color: #5a7494 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    text-align: left !important;
}
table.dataTable tbody tr,
table.table tbody tr {
    background: transparent !important;
    transition: background .15s !important;
}
table.dataTable tbody tr:hover,
table.table tbody tr:hover {
    background: rgba(25,102,255,0.04) !important;
}
table.dataTable tbody td,
table.table tbody td,
.dataTables_wrapper table tbody td {
    padding: 16px 18px !important;
    color: #cfe1ff !important;
    font-size: 13.5px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.08) !important;
    background: transparent !important;
    vertical-align: middle !important;
}
table.dataTable tbody td strong,
table.table tbody td strong,
table.dataTable tbody td b,
table.table tbody td b {
    color: #ffffff !important;
    font-weight: 700 !important;
}
table.dataTable tbody tr:last-child td,
table.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Status badges (Actif / Suspendu / Terminé / etc.) */
.label-success,
.badge-success,
.status-active,
.label.label-success,
.badge.badge-success {
    background: rgba(34,197,94,0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34,197,94,0.35) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.label-warning,
.badge-warning,
.status-suspended,
.label.label-warning {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245,158,11,0.35) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.label-default,
.badge-default,
.status-terminated,
.status-cancelled {
    background: rgba(148,163,184,0.12) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148,163,184,0.30) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.label-danger,
.badge-danger,
.status-fraud,
.status-cancelled-overdue {
    background: rgba(239,68,68,0.15) !important;
    color: #ff8a80 !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* DataTables length/filter/info (les containers, pas les buttons — ceux-là sont stylés plus bas) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: #8fadc9 !important;
    font-size: 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ============================================================
   Password strength meter (page register : "SÉCURITÉ DU COMPTE")
   ============================================================ */
.password-strength,
.password-strength-bar,
.password-strength-meter,
.strength-meter,
.pwd-strength,
[class*="password-strength"],
[class*="strength-bar"] {
    height: 6px !important;
    background: rgba(98,152,254,0.10) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 8px 0 16px !important;
    box-shadow: none !important;
    border: 0 !important;
}
.password-strength-bar > div,
.password-strength > div,
.strength-meter > div,
[class*="strength"] > .progress-bar,
[class*="strength"] > [class*="bar"] {
    height: 100% !important;
    border-radius: 999px !important;
    transition: width .25s, background .25s !important;
    background: linear-gradient(90deg, #ef4444, #f59e0b) !important;
}
.password-strength.weak > div,
.password-strength[data-strength="weak"] > div,
.password-strength[data-strength="1"] > div {
    background: #ef4444 !important;
    width: 25% !important;
}
.password-strength.medium > div,
.password-strength[data-strength="medium"] > div,
.password-strength[data-strength="2"] > div {
    background: linear-gradient(90deg, #ef4444, #f59e0b) !important;
    width: 50% !important;
}
.password-strength.strong > div,
.password-strength[data-strength="strong"] > div,
.password-strength[data-strength="3"] > div {
    background: linear-gradient(90deg, #f59e0b, #009AFF) !important;
    width: 75% !important;
}
.password-strength.very-strong > div,
.password-strength[data-strength="4"] > div {
    background: linear-gradient(90deg, #009AFF, #22c55e) !important;
    width: 100% !important;
}

/* Section heading inside REGISTER form ONLY (don't break home page titles) */
body.page-register .lagom-form-section-title,
body.page-register-default .lagom-form-section-title,
body.page-register .field-section-title,
body.page-register form .section-title,
body.page-register form h3.subsection-title,
body.page-register .form-section-title {
    color: #6298fe !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 24px 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   Cookie banner — Lagom uses .cookie-bar with BEM modifiers
   Real DOM :
   <div class="cookie-bar cookie-bar--bottom-right">
     <div class="cookie-bar__content">
       <div class="cookie-bar__icon">...</div>
       <div class="cookie-bar__desc">...text...</div>
       <div class="cookie-bar__action"><button class="btn">Continuer</button></div>
     </div>
   </div>
   ============================================================ */
.cookie-bar {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    top: auto !important;
    max-width: 760px !important;
    width: calc(100% - 32px) !important;
    background: #0a1530 !important;
    background-color: #0a1530 !important;
    background-image: linear-gradient(160deg, rgba(15,29,63,0.98) 0%, rgba(8,16,40,0.98) 100%) !important;
    border: 1px solid rgba(0,154,255,0.30) !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    color: #cfe1ff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.50) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 9999 !important;
    margin: 0 !important;
}
.cookie-bar::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.65), transparent) !important;
    pointer-events: none !important;
}
.cookie-bar__content {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.cookie-bar__icon {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(0,154,255,0.20), rgba(0,154,255,0.05)) !important;
    border: 1px solid rgba(0,154,255,0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,154,255,0.18) !important;
}
.cookie-bar__icon img,
.cookie-bar__icon svg,
.cookie-bar__icon i {
    width: 24px !important;
    height: 24px !important;
    color: #009AFF !important;
    filter: brightness(1.2) saturate(1.2) !important;
}
.cookie-bar__desc {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #cfe1ff !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
}
.cookie-bar__desc a {
    color: #009AFF !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.cookie-bar__desc a:hover {
    color: #6298fe !important;
    text-decoration: underline !important;
}
.cookie-bar__action {
    flex: 0 0 auto !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.cookie-bar__action .btn,
.cookie-bar__action button,
.cookie-bar__action a.btn {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: filter .15s, box-shadow .15s !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cookie-bar__action .btn:hover {
    filter: brightness(1.10);
    box-shadow: 0 10px 24px rgba(25,102,255,0.50), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* Enhanced cookie bar : added Refuser + Personnaliser buttons */
.cookie-bar__action {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}
.cookie-bar .pcm-cookie-refuse,
.cookie-bar .pcm-cookie-customize {
    background: rgba(255,255,255,0.05) !important;
    color: #cfe1ff !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 12px !important;
    padding: 9px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
}
.cookie-bar .pcm-cookie-refuse:hover,
.cookie-bar .pcm-cookie-customize:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

@media (max-width: 720px) {
    .cookie-bar { padding: 16px !important; }
    .cookie-bar__content { flex-wrap: wrap !important; }
    .cookie-bar__desc { flex: 1 1 100% !important; order: 2 !important; }
    .cookie-bar__icon { order: 1 !important; }
    .cookie-bar__action { flex: 1 1 100% !important; order: 3 !important; flex-wrap: wrap !important; }
    .cookie-bar__action .btn,
    .cookie-bar__action .pcm-cookie-refuse,
    .cookie-bar__action .pcm-cookie-customize { flex: 1 1 auto !important; min-width: 100px !important; max-width: none !important; }
}

/* Cookie customize modal */
.pcm-cookie-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,8,30,0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.pcm-cookie-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.pcm-cookie-modal-box {
    background: linear-gradient(160deg, #0f1d3f 0%, #08132e 100%);
    border: 1px solid rgba(0,154,255,0.30);
    border-radius: 20px;
    padding: 28px 28px 24px;
    max-width: 580px;
    width: 100%;
    max-height: 86vh;
    overflow: auto;
    color: #cfe1ff;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,154,255,0.12);
}
.pcm-cookie-modal-box::before {
    content: ""; position: absolute;
    top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.65), transparent);
    pointer-events: none;
}
.pcm-cookie-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: 0;
    color: #8fadc9;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 8px;
}
.pcm-cookie-modal-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.pcm-cookie-modal-header h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff, #c4e3ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pcm-cookie-modal-header p {
    font-size: 13px;
    color: #8fadc9;
    margin: 0 0 20px;
    line-height: 1.55;
}
.pcm-cookie-cat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pcm-cookie-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 12px;
    cursor: pointer;
}
.pcm-cookie-row:hover { border-color: rgba(0,154,255,0.40); }
.pcm-cookie-row-info { flex: 1; min-width: 0; }
.pcm-cookie-row-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 8px;
}
.pcm-cookie-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,154,255,0.15);
    color: #6298fe;
    border: 1px solid rgba(0,154,255,0.30);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pcm-cookie-row-desc {
    font-size: 12px;
    color: #8fadc9;
    line-height: 1.5;
}
.pcm-cookie-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: rgba(98,152,254,0.20);
    border: 1px solid rgba(98,152,254,0.30);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}
.pcm-cookie-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #cfe1ff;
    transition: left .2s, background .2s;
}
.pcm-cookie-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #1966FF, #009AFF);
    border-color: #009AFF;
}
.pcm-cookie-row input[type="checkbox"]:checked::after {
    left: 18px;
    background: #ffffff;
}
.pcm-cookie-row input[type="checkbox"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.pcm-cookie-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pcm-cookie-btn-secondary,
.pcm-cookie-btn-primary {
    flex: 1 1 auto;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s, box-shadow .15s;
}
.pcm-cookie-btn-secondary {
    background: rgba(255,255,255,0.05);
    color: #cfe1ff;
    border: 1px solid rgba(98,152,254,0.30);
}
.pcm-cookie-btn-secondary:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
}
.pcm-cookie-btn-primary {
    background: linear-gradient(135deg, #1966FF, #009AFF);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
}
.pcm-cookie-btn-primary:hover {
    filter: brightness(1.10);
    box-shadow: 0 10px 24px rgba(25,102,255,0.50);
}

/* Checkbox label for "J'ai lu et j'accepte" */
.checkbox-label,
.form-check-label,
label.checkbox,
label[for*="agree"],
label[for*="tos"] {
    color: #cfe1ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}
.checkbox-label a,
.form-check-label a,
label.checkbox a {
    color: #009AFF !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.checkbox-label a:hover,
.form-check-label a:hover,
label.checkbox a:hover {
    color: #6298fe !important;
    text-decoration: underline !important;
}

.tab-nav.tab-nav--domain > *,
.tab-nav.tab-nav--section > *,
.tab-nav--domain a,
.tab-nav--domain .nav-item,
.tab-nav--domain li {
    color: #8fadc9 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
    border: 0 !important;
    background: transparent !important;
    position: relative !important;
}
.tab-nav--domain a::after,
.tab-nav--domain a::before,
.tab-nav--domain li::after,
.tab-nav--domain li::before,
.tab-nav--domain .nav-item::after,
.tab-nav--domain .nav-item::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: 0 !important;
    height: 0 !important;
    width: 0 !important;
}
.tab-nav--domain a:hover,
.tab-nav--domain li:hover,
.tab-nav--domain .nav-item:hover {
    color: #ffffff !important;
    background: rgba(25,102,255,0.10) !important;
}
.tab-nav--domain .active,
.tab-nav--domain .active a,
.tab-nav--domain li.active,
.tab-nav--domain .nav-item.active,
.tab-nav--domain a.active {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: none !important;
    filter: none !important;
}
/* Kill double-layer halos around the active tab (Lagom paints its own bg behind) */
.tab-nav--domain .active::before,
.tab-nav--domain .active::after,
.tab-nav--domain li.active::before,
.tab-nav--domain li.active::after,
.tab-nav--domain a.active::before,
.tab-nav--domain a.active::after,
.tab-nav--domain .nav-item.active::before,
.tab-nav--domain .nav-item.active::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* "Voir: Popular" dropdown filter */
.box-search-domain .dropdown,
.section--domain .dropdown,
.dropdown-tld-filter,
[class*="filter-dropdown"] {
    margin-top: 14px !important;
}
.box-search-domain .dropdown-toggle,
.section--domain .dropdown-toggle,
button[data-toggle="dropdown"],
a[data-toggle="dropdown"] {
    background: rgba(0,8,30,0.55) !important;
    background-color: rgba(0,8,30,0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-height: 40px !important;
}
.box-search-domain .dropdown-toggle:hover,
.section--domain .dropdown-toggle:hover,
button[data-toggle="dropdown"]:hover {
    border-color: rgba(0,154,255,0.55) !important;
    background: rgba(25,102,255,0.10) !important;
    color: #ffffff !important;
}
.box-search-domain .dropdown-toggle .caret,
.section--domain .dropdown-toggle .caret { color: #6298fe !important; }

/* Dropdown menu (Popular / Technology / Shopping list) + HEADER sub-menus.
   Use FULLY OPAQUE background (not rgba transparent) so the menu is readable
   over any content underneath. */
html body .dropdown-menu,
html body .dropdown-menu-search,
html body .box-search-domain .dropdown-menu,
html body .section--domain .dropdown-menu,
html body .app-nav-header .dropdown-menu,
html body .app-nav .dropdown-menu,
html body .app-nav-menu .dropdown-menu,
html body .main-header .dropdown-menu,
html body header.app-nav .dropdown-menu,
html body .app-nav-header .submenu,
html body .app-nav-menu .submenu,
html body .app-nav-menu .sub-menu,
html body ul.dropdown-menu,
html body .navbar .dropdown-menu {
    background: #0a1530 !important;
    background-color: #0a1530 !important;
    background-image: linear-gradient(160deg, #122142 0%, #0a1530 100%) !important;
    border: 1px solid rgba(0,154,255,0.30) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.70), 0 0 0 1px rgba(0,154,255,0.12) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #cfe1ff !important;
    min-width: 220px !important;
    opacity: 1 !important;
}
/* All dropdown items + their descendants : ZERO background by default + on hover.
   Lagom natif applies gradient on inner <span>/<div> — we neutralize them all. */
html body .dropdown-menu li,
html body .dropdown-menu > a,
html body .dropdown-menu .dropdown-item,
html body .dropdown-menu li > a,
html body .dropdown-menu li > a > *,
html body .dropdown-menu li > a > * > *,
html body .dropdown-menu .dropdown-item > *,
html body .dropdown-menu .dropdown-item > * > * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #cfe1ff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
}
html body .dropdown-menu li > a,
html body .dropdown-menu .dropdown-item {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    transition: background-color .12s, color .12s, transform .12s !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
}
/* Icons inside USER PROFILE dropdown only — circular pill */
.user-info-dropdown .dropdown-menu li > a > i,
.user-info-dropdown .dropdown-menu .dropdown-item > i,
.user-info-dropdown .dropdown-menu li > a > [class*="lm-"],
.user-info-dropdown .dropdown-menu li > a > [class*="ls-"],
.app-nav-user .dropdown-menu li > a > i,
.app-nav-user .dropdown-menu .dropdown-item > i,
[data-toggle="dropdown"][class*="user"] + .dropdown-menu li > a > i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.14), rgba(0,154,255,0.06)) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6298fe !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.user-info-dropdown .dropdown-menu li:hover > a > i,
.user-info-dropdown .dropdown-menu li > a:hover > i,
.app-nav-user .dropdown-menu li:hover > a > i {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(25,102,255,0.35) !important;
}

/* ============================================================
   Client area "Mes informations" — premium card sections
   (NB : .panel-form is the WHMCS Bootstrap panel — we style it
   carefully so /user/password and similar pages stay functional)
   ============================================================ */
.app-content .lagom-form-section,
.app-content .form-section,
.app-content fieldset,
.app-content .panel.panel-default.panel-form,
.app-content .panel.panel-form,
.app-content .well,
.app-content [class*="section--client"] {
    background: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.35) 100%) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 14px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: none !important;
}
.app-content .lagom-form-section::before,
.app-content fieldset::before,
.app-content .panel.panel-form::before,
.app-content [class*="section--client"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.45), transparent) !important;
    pointer-events: none !important;
}
/* .panel-body and .panel-footer keep their own padding — don't override */
.app-content .panel.panel-form .panel-body {
    padding: 22px 24px !important;
    background: transparent !important;
    border: 0 !important;
}
.app-content .panel.panel-form .panel-footer {
    padding: 16px 24px !important;
    background: rgba(0,8,30,0.30) !important;
    border-top: 1px solid rgba(98,152,254,0.15) !important;
    border-radius: 0 0 14px 14px !important;
}

/* Section titles "Informations personnelles" / "Adresse de facturation" / etc. */
.app-content h2,
.app-content .lagom-section-title,
.app-content .lagom-form-title,
.app-content fieldset legend,
.app-content .panel-heading {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.15) !important;
    background: transparent !important;
}

/* Form field labels above inputs */
.app-content .form-group label,
.app-content .form-group .control-label,
.app-content label.field-label {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Form inputs */
.app-content .form-control,
.app-content input.form-control,
.app-content select.form-control,
.app-content textarea.form-control {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    transition: border-color .15s, box-shadow .15s !important;
    height: auto !important;
    min-height: 42px !important;
    box-shadow: none !important;
}
.app-content .form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    outline: none !important;
}
.app-content .form-control::placeholder {
    color: #5a7494 !important;
}

/* Checkboxes for email preferences */
.app-content input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid rgba(98,152,254,0.40) !important;
    border-radius: 5px !important;
    background: rgba(0,8,30,0.55) !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}
.app-content input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: #009AFF !important;
}
.app-content input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

/* ============================================================
   /user/password — force visibility of ALL form elements
   Real DOM : form.using-password-strength > .panel-form > .panel-body
   Also : kill any leaked radial-gradient / glow that creates the
   "blue circle" artifact behind the form.
   ============================================================ */
form.using-password-strength,
form.using-password-strength .panel,
form.using-password-strength .panel-body,
form.using-password-strength .panel-footer,
form.using-password-strength .form-group,
form.using-password-strength .form-group > * {
    background-image: none !important;
}
form.using-password-strength,
form.using-password-strength .panel,
form.using-password-strength .panel-body,
form.using-password-strength .panel-footer,
form.using-password-strength .form-group,
form.using-password-strength .form-group label,
form.using-password-strength .input-password-strenght,
form.using-password-strength .password-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    position: static !important;
    box-shadow: none !important;
    filter: none !important;
}
/* Kill any pseudo-element drawing a circle/glow on form descendants */
form.using-password-strength *::before,
form.using-password-strength *::after {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
}
/* Re-apply the proper card gradient on the panel-form ONLY */
.app-content form.using-password-strength .panel.panel-form,
.app-content form.using-password-strength .panel.panel-default {
    background: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.35) 100%) !important;
    background-image: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.35) 100%) !important;
}

/* ULTRA NUCLEAR : kill every box-shadow + background-image + filter
   on the password form panel and all its descendants. Re-apply only
   the panel gradient via a more specific selector below. */
form.using-password-strength .panel,
form.using-password-strength .panel *,
form.using-password-strength .panel::before,
form.using-password-strength .panel::after,
form.using-password-strength .panel *::before,
form.using-password-strength .panel *::after,
.col-md-7 form.using-password-strength,
.col-md-7 form.using-password-strength *,
.col-md-7 form.using-password-strength::before,
.col-md-7 form.using-password-strength::after {
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
}

/* ============================================================
   /user/password — clean dedicated design (NO backdrop-filter,
   NO large box-shadow, NO radial gradient — sources of the round)
   ============================================================ */
/* RESET : neutralize any inherited decorative effects on this page */
body.page-user-password .app-content,
body.page-user-password .app-content *,
body.page-user-password .app-content *::before,
body.page-user-password .app-content *::after,
body.page-user-password .cookie-bar,
body.page-user-password .cookie-bar *,
body.page-user-password .modal-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Hide the cookie-bar on this page (its glassmorphism was the round source) */
body.page-user-password .cookie-bar {
    display: none !important;
}

/* Panel form card */
body.page-user-password form.using-password-strength {
    margin: 0 !important;
}
body.page-user-password form.using-password-strength .panel.panel-form,
body.page-user-password form.using-password-strength .panel.panel-default {
    background: #0f1d3f !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.page-user-password .panel-body {
    background: transparent !important;
    padding: 28px 28px 18px !important;
    border: 0 !important;
}
body.page-user-password .panel-footer {
    background: rgba(0,8,30,0.30) !important;
    border-top: 1px solid rgba(98,152,254,0.15) !important;
    padding: 16px 28px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Form groups */
body.page-user-password .form-group {
    margin-bottom: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.page-user-password .form-group:last-child { margin-bottom: 0 !important; }

/* Labels */
body.page-user-password .form-group label.control-label,
body.page-user-password .form-group > label {
    color: #8fadc9 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 7px !important;
    display: block !important;
}

/* Input wrappers — force block layout so hint goes BELOW, never beside */
body.page-user-password .input-password-strenght {
    position: relative !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Password inputs — override Lagom strength plugin inline styles (white bg on type) */
body.page-user-password input.form-control,
body.page-user-password input[type="password"],
body.page-user-password .input-password-strenght input,
body.page-user-password .input-password-strenght input.form-control,
body.page-user-password .input-password-strenght input[type="password"] {
    background-color: rgba(0,8,30,0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 44px !important;
    width: 100% !important;
    display: block !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
body.page-user-password input.form-control:focus,
body.page-user-password input[type="password"]:focus,
body.page-user-password .input-password-strenght input:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background-color: rgba(0,8,30,0.70) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}
body.page-user-password input.form-control::placeholder { color: #5a7494 !important; }

/* Lagom strength label "Fort/Faible/Moyen" — small inline pill below input */
body.page-user-password .input-password-strenght span.text-small,
body.page-user-password .input-password-strenght .text-lighter,
body.page-user-password .input-password-strenght > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: static !important;
    float: none !important;
    margin-top: 8px !important;
    padding: 4px 10px !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 999px !important;
    color: #cfe1ff !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    width: auto !important;
    max-width: 100% !important;
}
/* Hide the awkward (i) info icon completely — the text is self-explanatory */
body.page-user-password .input-password-strenght i,
body.page-user-password .input-password-strenght span.text-small i,
body.page-user-password .input-password-strenght .text-lighter i,
body.page-user-password .input-password-strenght [data-toggle="tooltip"] i,
body.page-user-password .input-password-strenght .fa-info-circle,
body.page-user-password .input-password-strenght .fa-info {
    display: none !important;
}
/* Strength colors when Lagom adds class on the wrapper */
body.page-user-password .input-password-strenght.weak span.text-small,
body.page-user-password .input-password-strenght[data-strength="weak"] span.text-small {
    background: rgba(239,68,68,0.10) !important;
    border-color: rgba(239,68,68,0.30) !important;
    color: #ff8a80 !important;
}
body.page-user-password .input-password-strenght.medium span.text-small,
body.page-user-password .input-password-strenght[data-strength="medium"] span.text-small {
    background: rgba(252,211,77,0.10) !important;
    border-color: rgba(252,211,77,0.30) !important;
    color: #fcd34d !important;
}
body.page-user-password .input-password-strenght.strong span.text-small,
body.page-user-password .input-password-strenght[data-strength="strong"] span.text-small,
body.page-user-password .input-password-strenght.very-strong span.text-small {
    background: rgba(74,222,128,0.10) !important;
    border-color: rgba(74,222,128,0.35) !important;
    color: #4ade80 !important;
}

/* "Générer un mot de passe" button */
body.page-user-password .password-content,
body.page-user-password .password-content-group {
    margin-top: 10px !important;
    padding: 0 !important;
    background: transparent !important;
}
body.page-user-password .generate-password,
body.page-user-password button.generate-password,
body.page-user-password .btn.generate-password {
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
body.page-user-password .generate-password:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body.page-user-password .generate-password i.ls-refresh { margin-right: 6px !important; }

/* Password mismatch help text */
body.page-user-password #inputNewPassword2Msg .help-block,
body.page-user-password .help-block {
    margin-top: 8px !important;
    color: #ff8a80 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    background: rgba(239,68,68,0.08) !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
    border-radius: 8px !important;
}

/* Submit / Reset buttons */
body.page-user-password .panel-footer input.btn-primary,
body.page-user-password .panel-footer input[type="submit"].btn {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px -2px rgba(25,102,255,0.30) !important;
    transition: filter .15s !important;
}
body.page-user-password .panel-footer input.btn-primary:hover:not([disabled]) {
    filter: brightness(1.10);
}
body.page-user-password .panel-footer input.btn-primary[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
body.page-user-password .panel-footer input.btn-default,
body.page-user-password .panel-footer input[type="reset"] {
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
body.page-user-password .panel-footer input.btn-default:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* Sidebar nav (Mon profil / Modifier mon mot de passe / etc.) */
body.page-user-password .lagom-user-area-nav,
body.page-user-password .user-area-nav,
body.page-user-password [class*="user-area-nav"] {
    background: transparent !important;
}
body.page-user-password .lagom-user-area-nav a,
body.page-user-password .user-area-nav a {
    color: #cfe1ff !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s !important;
}
body.page-user-password .lagom-user-area-nav a:hover {
    background: rgba(25,102,255,0.08) !important;
    color: #ffffff !important;
}
body.page-user-password .lagom-user-area-nav .active,
body.page-user-password .user-area-nav .active {
    background: rgba(25,102,255,0.15) !important;
    color: #ffffff !important;
}

/* ===== SCORCHED EARTH for /user/password — kill EVERYTHING that could draw
   a circle : box-shadow, clip-path, mask, filter, radial-gradient, etc. ===== */
body.page-user-password *,
body.page-user-password *::before,
body.page-user-password *::after {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}
body.page-user-password *:not(button):not(.btn):not(a.btn):not(input[type="submit"]):not([class*="btn-"]):not([type="button"]) {
    box-shadow: none !important;
}
body.page-user-password *:not(button):not(.btn):not(a.btn):not([class*="btn-"]):not(.dns-ca-btn):not(.pcm-zip-btn) {
    filter: none !important;
}
/* Kill any inline-style background containing radial-gradient */
body.page-user-password [style*="radial-gradient"] {
    background-image: none !important;
}
/* Kill any container with absolute positioning + low z-index + large size
   (typical of decorative overlays) */
body.page-user-password .app-content > div[style*="position"],
body.page-user-password .main-content > div[style*="position"],
body.page-user-password .app-content > .background,
body.page-user-password .app-content > .decoration,
body.page-user-password .main-content > .background,
body.page-user-password .main-content > .decoration,
body.page-user-password [aria-hidden="true"][class*="decoration"] {
    display: none !important;
}

/* ===== TARGETED FIX : /user/password has body.page-user-password =====
   Kill EVERY box-shadow / background-image / filter / backdrop-filter
   on every container of this page. Only buttons keep their gradients. */
body.page-user-password .app-content,
body.page-user-password .app-content *:not(.btn):not(button):not(.lagom-form-button):not(input):not(label):not(span):not(i),
body.page-user-password .main-content,
body.page-user-password .main-content *,
body.page-user-password .row,
body.page-user-password .row *,
body.page-user-password .col-md-7,
body.page-user-password .panel,
body.page-user-password .panel-body,
body.page-user-password .panel-footer,
body.page-user-password .form-group,
body.page-user-password form.using-password-strength,
body.page-user-password form.using-password-strength * {
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.page-user-password .app-content *::before,
body.page-user-password .app-content *::after,
body.page-user-password .main-content *::before,
body.page-user-password .main-content *::after {
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}
/* Restore the panel form's intended gradient ONLY */
body.page-user-password .app-content form.using-password-strength .panel.panel-form,
body.page-user-password .app-content form.using-password-strength .panel.panel-default {
    background-image: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.35) 100%) !important;
    background-color: rgba(8,16,40,0.40) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 14px !important;
}

/* WHOLE PAGE nuclear option for /user/password — kill any decorative
   circle/radial/svg/spinner across the entire page hierarchy. */
body .app-content::before,
body .app-content::after,
body .app::before,
body .app::after,
body::before,
body::after,
html::before,
html::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Any decorative element with circular shape : nuke them */
.app-content [style*="border-radius: 50%"],
.app-content [style*="border-radius:50%"],
.app-content [style*="radial-gradient"],
.app-content > svg:not([class*="icon"]):not([role="img"]),
.app-content .background-pattern,
.app-content .page-pattern,
.app-content .decorative-circle,
.app-content [class*="circle"]:not(button):not(a):not(.btn),
.app-content [class*="glow"]:not(button):not(a):not(.btn),
.app-content [class*="ornament"],
.app-content [class*="background-deco"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Final restoration of the panel form's intended gradient (highest specificity) */
html body .app-content form.using-password-strength .panel.panel-form,
html body .app-content form.using-password-strength .panel.panel-default {
    background-color: rgba(8,16,40,0.40) !important;
    background-image: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.35) 100%) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 14px !important;
}
form.using-password-strength .panel-footer {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}
form.using-password-strength input[type="password"],
form.using-password-strength input.form-control {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 42px !important;
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
}
form.using-password-strength input[type="password"]:focus,
form.using-password-strength input.form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    outline: none !important;
}
form.using-password-strength label.control-label {
    display: block !important;
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}
/* Button submit/reset in panel-footer */
form.using-password-strength .panel-footer input.btn,
form.using-password-strength .panel-footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
form.using-password-strength .panel-footer input.btn-primary[disabled],
form.using-password-strength .panel-footer .btn-primary[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* User profile dropdown header (PCM Agency / Pierre Leuthner) */
html body .dropdown-menu .dropdown-header,
html body .dropdown-menu .user-info-header,
html body .dropdown-menu li.dropdown-header {
    color: #cfe1ff !important;
    padding: 12px 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(98,152,254,0.15) !important;
    margin-bottom: 4px !important;
}

/* Section dividers inside user profile dropdown */
html body .dropdown-menu .divider,
html body .dropdown-menu hr,
html body .dropdown-menu li.divider {
    background: rgba(98,152,254,0.15) !important;
    border: 0 !important;
    height: 1px !important;
    margin: 6px 8px !important;
}

/* Hover state : ONLY the outer item gets a subtle bg, NEVER children */
html body .dropdown-menu li:hover,
html body .dropdown-menu li:hover > a,
html body .dropdown-menu .dropdown-item:hover,
html body .dropdown-menu li.active > a,
html body .dropdown-menu .dropdown-item.active {
    background: rgba(25,102,255,0.08) !important;
    background-color: rgba(25,102,255,0.08) !important;
    background-image: none !important;
    color: #ffffff !important;
}
/* Force ALL children of hovered item to stay transparent */
html body .dropdown-menu li:hover > a > *,
html body .dropdown-menu li:hover > a > * > *,
html body .dropdown-menu li:hover *:not(.dropdown-menu):not(.submenu),
html body .dropdown-menu .dropdown-item:hover > *,
html body .dropdown-menu .dropdown-item:hover > * > *,
html body .dropdown-menu li > a:hover *,
html body .dropdown-menu .dropdown-item:hover *,
html body .dropdown-menu li.active > a *,
html body .dropdown-menu .dropdown-item.active * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ============================================================
   Header main nav links typography — Domaines / Sites Internet /
   Hébergement / Serveurs / Notre entreprise
   ============================================================ */
.app-nav-header .nav-link,
.app-nav-header .app-nav-menu .nav-link,
.app-nav-menu > ul > li > a,
.app-nav-menu .menu > li > a,
.app-nav-menu > li > a {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: #cfe1ff !important;
    text-decoration: none !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    transition: color .15s, background .15s !important;
}
.app-nav-header .nav-link:hover,
.app-nav-menu > ul > li > a:hover,
.app-nav-menu > li > a:hover {
    color: #ffffff !important;
    background: rgba(25,102,255,0.10) !important;
}
.app-nav-header .nav-link.active,
.app-nav-menu .active > a,
.app-nav-menu > ul > li.active > a {
    color: #009AFF !important;
    background: transparent !important;
}
/* Dropdown caret on header items */
.app-nav-header .nav-link .caret,
.app-nav-header .dropdown-toggle::after,
.app-nav-menu .caret {
    color: #6298fe !important;
    margin-left: 4px !important;
    opacity: 0.6 !important;
}

/* Clear-all filter header (red link inside dropdown) */
.dropdown-menu .clear-all,
.dropdown-menu [class*="clear-"],
.dropdown-menu .reset-filters {
    color: #ff8a80 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 0 !important;
    margin-bottom: 6px !important;
    background: transparent !important;
}
.dropdown-menu .clear-all:hover {
    background: rgba(239,68,68,0.10) !important;
    color: #ff6b6b !important;
}

/* Custom checkboxes inside dropdown */
.dropdown-menu input[type="checkbox"],
.dropdown-menu .checkbox,
.dropdown-menu [type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    border: 1.5px solid rgba(98,152,254,0.40) !important;
    background: rgba(0,8,30,0.55) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    margin: 0 !important;
    transition: background .15s, border-color .15s !important;
}
.dropdown-menu input[type="checkbox"]:checked,
.dropdown-menu .checkbox.checked {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: #009AFF !important;
}
.dropdown-menu input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

/* Force the input to be very wide — fix the truncated "Trouvez un nom de c" */
.box-search-domain .search-field.search-field-lg {
    flex: 1 1 100% !important;
    width: auto !important;
    min-width: 0 !important;
}
.box-search-domain .search-group.search-group-combined {
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.box-search-domain .search-group-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 160px !important;
}

/* ============================================================
   Search result panel ("panierdechat.fr est disponible !")
   ============================================================ */
.search-result,
.search-result--info,
.search-result--danger,
.search-result--success,
.search-result--warning {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
    padding: 18px 22px !important;
    margin-top: 18px !important;
    background: linear-gradient(160deg, rgba(15,29,63,0.50) 0%, rgba(8,16,40,0.40) 100%) !important;
    border: 1px solid rgba(0,154,255,0.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0,8,30,0.30), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    position: relative !important;
    overflow: hidden !important;
}
.search-result::before {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.50), transparent);
    pointer-events: none;
}
.search-result--info,
.search-result--success {
    border-color: rgba(34,197,94,0.30) !important;
    background: linear-gradient(160deg, rgba(10,40,20,0.40) 0%, rgba(8,16,40,0.40) 100%) !important;
}
.search-result--info::before,
.search-result--success::before {
    background: linear-gradient(90deg, transparent, rgba(34,197,94,0.55), transparent) !important;
}
.search-result--danger,
.search-result--warning {
    border-color: rgba(239,68,68,0.30) !important;
    background: linear-gradient(160deg, rgba(40,12,12,0.40) 0%, rgba(8,16,40,0.40) 100%) !important;
}
.search-result--danger::before,
.search-result--warning::before {
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.55), transparent) !important;
}

/* Status icon (green check / red X) */
.search-result-icon,
.search-result .icon,
.search-result [class*="-icon"] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}
.search-result--info .search-result-icon,
.search-result--success .search-result-icon {
    background: linear-gradient(135deg, rgba(34,197,94,0.30), rgba(34,197,94,0.10)) !important;
    border: 1px solid rgba(34,197,94,0.50) !important;
    color: #4ade80 !important;
    box-shadow: 0 4px 12px rgba(34,197,94,0.25) !important;
}
.search-result--danger .search-result-icon,
.search-result--warning .search-result-icon {
    background: linear-gradient(135deg, rgba(239,68,68,0.30), rgba(239,68,68,0.10)) !important;
    border: 1px solid rgba(239,68,68,0.50) !important;
    color: #ff8a80 !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.25) !important;
}

/* Domain name + status text */
.search-result-name,
.search-result-domain,
.search-result-content,
.search-result-body,
.search-result-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
}
.search-result-name strong,
.search-result-name b,
.search-result-content strong {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.search-result-status,
.search-result-message {
    color: #cfe1ff !important;
    font-weight: 500 !important;
}

/* Price */
.search-result-price,
.search-result .price,
.search-result-amount {
    flex: 0 0 auto !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
}
.search-result-price small,
.search-result-price .period,
.search-result-period {
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: 2px !important;
}

/* Layout interne du search-result-actions : icône · message · prix · bouton (NOWRAP) */
.search-result .search-result-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}
.search-result .search-result-actions > .search-result-message {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
}
.search-result .search-result-actions > .search-result-price {
    flex: 0 0 auto !important;
}
.search-result .search-result-actions > .btn {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
/* Sur mobile (<720px), wrap pour la lisibilité */
@media (max-width: 720px) {
    .search-result .search-result-actions {
        flex-wrap: wrap !important;
    }
    .search-result .search-result-actions > .btn {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* CTA "Ajouter au panier" — gradient cyan plein, plus pro */
.search-result--success .search-result-actions .btn,
.search-result--success .search-result-actions .btn-primary-faded,
.search-result--info .search-result-actions .btn {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: -0.005em !important;
    min-height: 46px !important;
    box-shadow: 0 8px 20px -6px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: filter .15s, box-shadow .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}
.search-result--success .search-result-actions .btn:hover {
    filter: brightness(1.10) !important;
    box-shadow: 0 12px 28px -6px rgba(25,102,255,0.60), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.search-result--danger .search-result-actions .btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 800 !important;
    min-height: 46px !important;
    box-shadow: 0 6px 16px -4px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Icône check : utilise SVG si la font Lagom est cassée */
.search-result-icon.ls-check::before,
.search-result--success .search-result-icon::before {
    content: "" !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
.search-result-icon.ls-close::before,
.search-result--danger .search-result-icon::before {
    content: "" !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Action buttons container */
.search-result-actions,
.search-result-buttons {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
.search-result-actions .btn,
.search-result-actions button,
.search-result-actions a {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: filter .15s, box-shadow .15s !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 42px !important;
}
.search-result-actions .btn:hover,
.search-result-actions button:hover,
.search-result-actions a:hover {
    filter: brightness(1.10);
    box-shadow: 0 8px 22px rgba(25,102,255,0.50), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}

@media (max-width: 720px) {
    .search-result {
        flex-wrap: wrap !important;
    }
    .search-result-actions {
        width: 100% !important;
        margin-top: 8px !important;
    }
    .search-result-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* The "blue saturated box" — repaint as glassmorphism navy */
.box.box-search-domain,
.section--domain .box {
    background:
        radial-gradient(80% 100% at 0% 0%, rgba(25,102,255,0.20), transparent 55%),
        radial-gradient(60% 80% at 100% 100%, rgba(0,154,255,0.12), transparent 60%),
        linear-gradient(160deg, rgba(15,29,63,0.65) 0%, rgba(8,16,40,0.55) 100%) !important;
    border: 1px solid rgba(0,154,255,0.30) !important;
    border-radius: 18px !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: 0 16px 42px rgba(0,8,30,0.40), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    padding: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}
.box.box-search-domain::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.65), transparent);
    pointer-events: none;
}

/* Search input wrapper inside the box.
   REAL Lagom DOM :
   .search-group.search-group-combined
     └ .search-field.search-field-lg  (flex container)
         ├ <i class="search-field-icon lm lm-search"></i>  (direct child, absolutely placed)
         └ <form>
             └ <input class="form-control form-control-lg input-lg">
     └ .search-group-btn
         └ <button class="btn btn-primary">
*/
.box-search-domain .search-group.search-group-combined,
.section--domain .search-group.search-group-combined {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
}
.box-search-domain .search-field.search-field-lg,
.section--domain .search-field.search-field-lg {
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color .15s, box-shadow .15s !important;
    overflow: visible !important;
}
.box-search-domain .search-field.search-field-lg:focus-within {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
/* Icon is a direct <i> child, absolute positioned on the LEFT.
   Lagom's icon font glyph doesn't render reliably here — we mask in our own
   SVG magnifying glass (inline data URI) so we don't depend on any font. */
.box-search-domain .search-field.search-field-lg > i.search-field-icon,
.box-search-domain .search-field.search-field-lg > i.lm,
.box-search-domain .search-field.search-field-lg > i.lm-search,
.section--domain .search-field.search-field-lg > i.search-field-icon {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Mute any ::before glyph that the Lagom icon font might inject */
.box-search-domain .search-field.search-field-lg > i.search-field-icon::before,
.box-search-domain .search-field.search-field-lg > i.lm::before,
.box-search-domain .search-field.search-field-lg > i.lm-search::before {
    content: none !important;
    display: none !important;
}
/* Form wrapper takes all space, no styling */
.box-search-domain .search-field.search-field-lg > form,
.section--domain .search-field.search-field-lg > form {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    height: 100% !important;
}
/* Input inside the form, padded-left for the icon space */
.box-search-domain .search-field.search-field-lg form input.form-control,
.box-search-domain .search-field.search-field-lg form input.form-control-lg,
.box-search-domain .search-field.search-field-lg form input.input-lg,
.box-search-domain .search-field.search-field-lg form input[type="text"],
.section--domain .search-field.search-field-lg form input.form-control {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    padding: 0 16px 0 48px !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-overflow: clip !important;
    border-radius: 0 !important;
    line-height: 50px !important;
}
.box-search-domain .search-field.search-field-lg form input::placeholder,
.section--domain .search-field.search-field-lg form input::placeholder {
    color: #8fadc9 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
.box-search-domain .search-group-btn,
.section--domain .search-group-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 160px !important;
}

/* "Chercher" button */
.box-search-domain .search-group-btn .btn,
.box-search-domain button.btn-primary,
.section--domain .search-group-btn .btn {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 28px !important;
    min-height: 52px !important;
    height: 52px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: filter .15s, box-shadow .15s !important;
}
.box-search-domain .search-group-btn .btn:hover,
.box-search-domain button.btn-primary:hover {
    filter: brightness(1.10);
    box-shadow: 0 10px 26px rgba(25,102,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* TLD chips row (.com 15€/yr, .fr 10€/yr, etc.) */
.box-search-domain .tld-wrapper,
.box-search-domain .tld-select,
.section--domain .tld-list,
.box-search-domain .domain-tld {
    margin-top: 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.box-search-domain .tld-wrapper > *,
.box-search-domain .tld-select > *,
.box-search-domain [class*="tld-"]:not(.tld-wrapper):not(.tld-select),
.box-search-domain .tld {
    background: linear-gradient(180deg, rgba(25,102,255,0.10), rgba(0,154,255,0.05)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    transition: background .15s, border-color .15s, color .15s !important;
    cursor: pointer !important;
}
.box-search-domain .tld-wrapper > *:hover,
.box-search-domain .tld-select > *:hover,
.box-search-domain [class*="tld-"]:not(.tld-wrapper):not(.tld-select):hover,
.box-search-domain .tld:hover {
    background: linear-gradient(180deg, rgba(25,102,255,0.25), rgba(0,154,255,0.12)) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* "Tout afficher" / "Show all" link/button */
.box-search-domain .show-all,
.box-search-domain a.btn-link,
.box-search-domain button.btn-link,
.box-search-domain [class*="show-all"] {
    background: transparent !important;
    border: 1px dashed rgba(98,152,254,0.35) !important;
    border-radius: 10px !important;
    color: #6298fe !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.box-search-domain .show-all:hover,
.box-search-domain a.btn-link:hover,
.box-search-domain button.btn-link:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(0,154,255,0.55) !important;
    border-style: solid !important;
    color: #ffffff !important;
}

/* Title "Configuration du domaine" */
.section--domain h1,
.section--domain h2,
.section--domain .section-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff, #c4e3ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ===== Page header — STRICT scoping to actual top banner only =====
   Previously matched too widely (.app-content-header could match the whole
   content area, leaking radial gradients across the form panels). Now we
   target only specific Lagom page banners by their data-attribute / DOM. */
/* ============================================================
   Order page /order.php — Sections unifiées (PCM design)
   Cible TOUS les blocs .section pour cohérence visuelle :
   Configuration du domaine / Ajouts / Facturation / Whois / Paiement / etc.
   ============================================================ */
.app-main-order .section,
body .app-main-order .section:not(.section--full-width) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 22px 0 !important;
    margin: 0 0 20px !important;
    position: relative !important;
    overflow: visible !important;
}
.app-main-order .section::before {
    display: none !important;
}
.app-main-order .section .section-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid rgba(98,152,254,0.15) !important;
}
.app-main-order .section .section-header h2.section-title,
.app-main-order .section h2.section-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.app-main-order .section .section-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.30), rgba(0,154,255,0.15)) !important;
    border: 1px solid rgba(98,152,254,0.40) !important;
    color: #9bc3ff !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: #9bc3ff !important;
    margin-right: 4px !important;
}

/* Form inputs unified inside sections */
.app-main-order .section input.form-control,
.app-main-order .section select.form-control,
.app-main-order .section textarea.form-control,
.app-main-order .section input[type="text"],
.app-main-order .section input[type="email"],
.app-main-order .section input[type="tel"],
.app-main-order .section input[type="password"],
.app-main-order .section input[type="number"] {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.app-main-order .section input.form-control:focus,
.app-main-order .section select.form-control:focus,
.app-main-order .section textarea.form-control:focus,
.app-main-order .section input:focus {
    outline: none !important;
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
.app-main-order .section input::placeholder,
.app-main-order .section textarea::placeholder {
    color: #5a7494 !important;
}
.app-main-order .section label,
.app-main-order .section .control-label,
.app-main-order .section .form-group label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
}
.app-main-order .section .form-group {
    margin-bottom: 14px !important;
}
.app-main-order .section .help-block,
.app-main-order .section small.text-muted {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
}

/* Checkbox / radio dans les sections */
.app-main-order .section .checkbox label,
.app-main-order .section .radio label {
    color: #c4e3ff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Section "Ajouts disponibles" : grille addon plus aérée */
.app-main-order .section--addons .row--addons {
    margin: 0 -8px !important;
}
.app-main-order .section--addons .row--addons > [class*="col-"] {
    padding: 0 8px !important;
    margin-bottom: 14px !important;
}

/* ============================================================
   Popover "Note" — confirmation "Changer de domaine"
   .domain-incart-popover.popover.popover-confirmation
   ============================================================ */
.app-main-order .domain-incart-popover.popover,
.app-main-order .popover.popover-confirmation {
    background: linear-gradient(160deg, rgba(15,29,63,0.98) 0%, rgba(10,22,49,0.98) 100%) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px -8px rgba(0,8,30,0.65), 0 0 0 1px rgba(98,152,254,0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    padding: 0 !important;
    max-width: 340px !important;
    width: 340px !important;
    color: #c4e3ff !important;
    z-index: 100 !important;
}
/* Flèche du popover : retirée (le user préfère sans) */
.app-main-order .popover.popover-confirmation > .arrow,
.app-main-order .popover.popover-confirmation .arrow,
.app-main-order .domain-incart-popover.popover .arrow {
    display: none !important;
    border: 0 !important;
}
.app-main-order .popover.popover-confirmation .popover-title {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.app-main-order .popover.popover-confirmation .popover-title i,
.app-main-order .popover.popover-confirmation .popover-title i.ls-info-circle,
.app-main-order .popover.popover-confirmation .popover-title i.ls {
    width: 18px !important;
    height: 18px !important;
    color: transparent !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc3ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
}
.app-main-order .popover.popover-confirmation .popover-title i::before {
    content: none !important;
    display: none !important;
}
.app-main-order .popover.popover-confirmation .popover-content {
    background: transparent !important;
    padding: 16px 18px 14px !important;
    color: #c4e3ff !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.app-main-order .popover.popover-confirmation .popover-actions {
    padding: 0 18px 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .btn,
.app-main-order .popover.popover-confirmation .popover-actions .btn-xs {
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 8px 16px !important;
    min-height: 34px !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: filter .15s, background .15s, border-color .15s !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .btn-primary-faded,
.app-main-order .popover.popover-confirmation .popover-actions .btn-primary {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .btn-primary-faded:hover,
.app-main-order .popover.popover-confirmation .popover-actions .btn-primary:hover {
    filter: brightness(1.10) !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .btn-default {
    background: transparent !important;
    color: #c4e3ff !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .btn-default:hover {
    background: rgba(98,152,254,0.12) !important;
    border-color: rgba(98,152,254,0.50) !important;
    color: #ffffff !important;
}
/* Checkbox "Ne plus montrer" */
.app-main-order .popover.popover-confirmation .popover-actions .checkbox {
    flex-basis: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(98,152,254,0.40) !important;
    border-radius: 4px !important;
    background: rgba(8,16,40,0.55) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .checkbox input[type="checkbox"]:checked {
    border-color: #1966FF !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .checkbox input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 0px !important;
    left: 3px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .checkbox .checkbox-styled {
    display: none !important;
}
.app-main-order .popover.popover-confirmation .popover-actions .checkbox .check-content,
.app-main-order .popover.popover-confirmation .popover-actions .checkbox-sm .check-content {
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* ============================================================
   "Configuration du domaine" — Carte transfer (panel-domain-incart)
   Affiché quand un domaine a déjà été choisi (transfert ou enregistrement)
   ============================================================ */
.app-main-order .panel.panel-domain-incart {
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: visible !important; /* visible : sinon le popover Note est coupé */
    position: relative !important;
}
.app-main-order .panel.panel-domain-incart .panel-body {
    background: transparent !important;
    border: 0 !important;
    padding: 18px 22px !important;
    margin: 0 !important;
}
.app-main-order .panel.panel-domain-incart .panel-body + .panel-body {
    border-top: 1px solid rgba(98,152,254,0.18) !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-body {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-icon,
.app-main-order .panel.panel-domain-incart i.lm-globe-alt,
.app-main-order .panel.panel-domain-incart .domain-incart-icon.lm {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(0,154,255,0.10)) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(25,102,255,0.25), rgba(0,154,255,0.10)) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 18px 18px, cover !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-icon::before,
.app-main-order .panel.panel-domain-incart i.lm-globe-alt::before {
    content: none !important;
    display: none !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-message {
    margin: 0 !important;
    padding: 0 !important;
    color: #c4e3ff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-message b {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
    margin-left: 4px !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-actions .btn-primary-faded {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: filter .15s !important;
}
.app-main-order .panel.panel-domain-incart .domain-incart-actions .btn-primary-faded:hover {
    filter: brightness(1.10) !important;
}

/* Form-flex : Période + Code EPP en grid */
.app-main-order .panel.panel-domain-incart .form-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.app-main-order .panel.panel-domain-incart .form-group.form-group-sm {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.app-main-order .panel.panel-domain-incart .form-group.form-group-sm label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.app-main-order .panel.panel-domain-incart .form-group select.form-control,
.app-main-order .panel.panel-domain-incart .form-group input.form-control {
    background: rgba(8,16,40,0.65) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
    height: 46px !important;
    box-shadow: none !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    padding-right: 38px !important;
}
.app-main-order .panel.panel-domain-incart .form-group input.form-control {
    background-image: none !important;
    padding-right: 14px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
.app-main-order .panel.panel-domain-incart .form-group .form-control:focus {
    outline: none !important;
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
.app-main-order .panel.panel-domain-incart .form-group select.form-control option {
    background: #0f1d3f !important;
    color: #ffffff !important;
}
@media (max-width: 720px) {
    .app-main-order .panel.panel-domain-incart .form-group.form-group-sm {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ============================================================
   Section "Cycle de facturation du produit" — cards billing cycle
   .panel.panel-check.panel-billingcycle pour chaque option (mensuel/trimestriel/annuel...)
   Toutes les cards à la MÊME hauteur, contenu centré verticalement.
   ============================================================ */
.app-main-order .section .row.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin: 0 -8px !important;
}
.app-main-order .section .row.row-eq-height > [class*="col-"] {
    padding: 0 8px !important;
    margin-bottom: 14px !important;
    display: flex !important;
}
.app-main-order .panel.panel-billingcycle {
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 14px 0 0 !important; /* margin-top pour laisser place au badge "Le plus choisi" qui dépasse */
    width: 100% !important;
    min-height: 160px !important;
    cursor: pointer !important;
    transition: background .12s, border-color .12s !important;
    position: relative !important;
    box-shadow: none !important;
    overflow: visible !important; /* visible pour laisser le badge dépasser */
    display: flex !important;
    flex-direction: column !important;
}
.app-main-order .panel.panel-billingcycle:hover {
    background: rgba(25,102,255,0.06) !important;
    border-color: rgba(98,152,254,0.35) !important;
}
.app-main-order .panel.panel-billingcycle.checked {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: none !important;
}
.app-main-order .panel.panel-billingcycle .panel-body.check {
    padding: 24px 18px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
}
.app-main-order .panel.panel-billingcycle h6.check-cycle {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #9bc3ff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.app-main-order .panel.panel-billingcycle.checked h6.check-cycle {
    color: #ffffff !important;
}
.app-main-order .panel.panel-billingcycle .price.price-sm {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin: 4px 0 0 !important;
    -webkit-text-fill-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}
/* Wrapper interne : la structure rend la décoration line-through partout dans
   .price-savings, donc on isole l'old price dans son propre span et on remet
   le badge .price-discount en élément séparé sans line-through. */
.app-main-order .panel.panel-billingcycle .price.price-sm > span,
.app-main-order .panel.panel-billingcycle .price.price-sm > span > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}
.app-main-order .panel.panel-billingcycle .price-savings {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: initial !important;
}
/* L'ancien prix : c'est le PREMIER span enfant direct de .price-savings (sans la pastille) */
.app-main-order .panel.panel-billingcycle .price-savings > span:not(.price-discount),
.app-main-order .panel.panel-billingcycle .price-savings > span[v-html],
.app-main-order .panel.panel-billingcycle .price-savings > span:first-child:not(.price-discount) {
    font-size: 12.5px !important;
    color: #5a7494 !important;
    font-weight: 600 !important;
    text-decoration: line-through !important;
    -webkit-text-fill-color: #5a7494 !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
    line-height: 1 !important;
}
/* Badge "Économisez X%" : JAMAIS de line-through, JAMAIS hérité */
.app-main-order .panel.panel-billingcycle .price-discount,
.app-main-order .panel.panel-billingcycle .price-savings .price-discount,
.app-main-order .panel.panel-billingcycle .price-savings > .price-discount {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    background: rgba(34,197,94,0.15) !important;
    border: 1px solid rgba(34,197,94,0.35) !important;
    border-radius: 100px !important;
    color: #86efac !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-fill-color: #86efac !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}
.app-main-order .panel.panel-billingcycle .check-desc {
    font-size: 11.5px !important;
    color: #8fadc9 !important;
    font-weight: 500 !important;
    margin: 4px 0 0 !important;
    -webkit-text-fill-color: #8fadc9 !important;
}
/* Check-sign : pastille top-right quand sélectionné — sobre */
.app-main-order .panel.panel-billingcycle .check-sign {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #1966FF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transition: opacity .15s !important;
    z-index: 2 !important;
}
.app-main-order .panel.panel-billingcycle.checked .check-sign {
    opacity: 1 !important;
}
/* === Badge "Le plus choisi" sur la card ANNUEL === */
.app-main-order .panel.panel-billingcycle.pcm-most-popular {
    border-color: rgba(0,154,255,0.45) !important;
}
.app-main-order .panel.panel-billingcycle .pcm-most-popular-badge {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 4px 14px !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.55) !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    pointer-events: none !important;
}
.app-main-order .panel.panel-billingcycle .check-sign i {
    font-size: 0 !important;
    color: transparent !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
.app-main-order .panel.panel-billingcycle .check-sign i::before {
    content: none !important;
    display: none !important;
}
/* Bouton "Sélectionner" en bas de chaque card */
.app-main-order .panel.panel-billingcycle .panel-footer {
    margin-top: auto !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
}
.app-main-order .panel.panel-billingcycle .panel-footer .btn,
.app-main-order .panel.panel-billingcycle .panel-footer .btn-primary-faded {
    width: 100% !important;
    background: rgba(98,152,254,0.15) !important;
    color: #c4e3ff !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
    min-height: 36px !important;
}
.app-main-order .panel.panel-billingcycle:hover .panel-footer .btn,
.app-main-order .panel.panel-billingcycle .panel-footer .btn:hover {
    background: rgba(25,102,255,0.25) !important;
    border-color: rgba(98,152,254,0.55) !important;
    color: #ffffff !important;
}
.app-main-order .panel.panel-billingcycle.checked .panel-footer .btn {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ============================================================
   Dropdown menu des addons "Choisir une option"
   Le menu déroulant Bootstrap était quasi invisible (fond trop sombre).
   ============================================================ */
.app-main-order .panel-addon .panel-actions .dropdown-menu,
.app-main-order .panel-main-addon .panel-actions .dropdown-menu,
.app-main-order .panel-addon .btn-group .dropdown-menu {
    background: linear-gradient(160deg, rgba(15,29,63,0.98) 0%, rgba(10,22,49,0.98) 100%) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px -8px rgba(0,8,30,0.65), 0 0 0 1px rgba(98,152,254,0.10) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    min-width: 240px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li,
.app-main-order .panel-main-addon .panel-actions .dropdown-menu li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li a.radio,
.app-main-order .panel-main-addon .panel-actions .dropdown-menu li a.radio {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background .12s !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li a.radio:hover {
    background: rgba(25,102,255,0.18) !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li label.radio-label,
.app-main-order .panel-main-addon .panel-actions .dropdown-menu li label.radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #c4e3ff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li label.radio-label.checked,
.app-main-order .panel-addon .panel-actions .dropdown-menu li a:has(input:checked) label {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(98,152,254,0.40) !important;
    border-radius: 50% !important;
    background: rgba(8,16,40,0.55) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    cursor: pointer !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li input[type="radio"]:checked {
    border-color: #1966FF !important;
    background: #1966FF !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    transform: translate(-50%, -50%) !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li .text {
    flex: 1 1 auto !important;
    color: inherit !important;
}
.app-main-order .panel-addon .panel-actions .dropdown-menu li .price.price-addon {
    color: #86efac !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    background: rgba(34,197,94,0.15) !important;
    border: 1px solid rgba(34,197,94,0.30) !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
}

/* ============================================================
   Order sidebar "Votre commande" — panel-summary.order-summary
   ============================================================ */
.app-main-order .panel-summary.order-summary {
    background:
        radial-gradient(60% 100% at 100% 0%, rgba(0,154,255,0.08), transparent 60%),
        linear-gradient(160deg, rgba(15,29,63,0.65) 0%, rgba(10,22,49,0.75) 100%) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px -12px rgba(0,8,30,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
.app-main-order .panel-summary.order-summary::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.55), transparent) !important;
    pointer-events: none !important;
}
.app-main-order .panel-summary .panel-heading {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 20px 22px 16px !important;
    margin: 0 !important;
}
.app-main-order .panel-summary .panel-heading h2.panel-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.015em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.app-main-order .panel-summary .panel-body,
.app-main-order .panel-summary .summary-container {
    padding: 18px 22px !important;
    background: transparent !important;
    border: 0 !important;
}
.app-main-order .panel-summary .summary-list,
.app-main-order .panel-summary .product-wrapper {
    padding: 0 !important;
    margin: 0 0 12px !important;
}
.app-main-order .panel-summary .list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
}
.app-main-order .panel-summary .list-item:last-child {
    border-bottom: 0 !important;
}
.app-main-order .panel-summary .list-item .item-name {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
}
.app-main-order .panel-summary .list-item .item-value {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
}
.app-main-order .panel-summary .list-item.faded .item-name,
.app-main-order .panel-summary .list-item.faded .item-value {
    color: #8fadc9 !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}
.app-main-order .panel-summary .price-total,
.app-main-order .panel-summary .order-summary-sticky + * .price-total,
.app-main-order .panel-summary [class*="total-today"] .price-total {
    color: #8fadc9 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: block !important;
    margin-bottom: 6px !important;
}
.app-main-order .panel-summary .price.price-lg,
.app-main-order .panel-summary .total-today,
.app-main-order .panel-summary [class*="amount-total"] {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
}
.app-main-order .panel-summary .panel-footer,
.app-main-order .panel-summary .summary-bottom {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(98,152,254,0.18) !important;
    padding: 18px 22px 22px !important;
    margin: 0 !important;
}

/* Bouton "Passer la commande" */
.app-main-order .panel-summary .btn-complete-order,
.app-main-order .panel-summary button[type="submit"],
.app-main-order .panel-summary .btn-primary-complete,
.app-main-order .panel-summary .summary-bottom .btn,
.app-main-order .panel-summary button.btn-primary {
    width: 100% !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 22px !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    letter-spacing: -0.005em !important;
    box-shadow: 0 8px 22px -6px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transition: filter .15s, box-shadow .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 50px !important;
}
.app-main-order .panel-summary button.btn-primary:hover {
    filter: brightness(1.10) !important;
    box-shadow: 0 12px 30px -6px rgba(25,102,255,0.60), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* Checkbox "J'ai lu et j'accepte les Conditions d'utilisation" */
.app-main-order .panel-summary .checkbox label,
.app-main-order .panel-summary [class*="terms"] label {
    color: #8fadc9 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.4 !important;
    margin-top: 12px !important;
    cursor: pointer !important;
}
.app-main-order .panel-summary input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(98,152,254,0.40) !important;
    border-radius: 5px !important;
    background: rgba(8,16,40,0.55) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
    transition: border-color .15s, background .15s !important;
}
.app-main-order .panel-summary input[type="checkbox"]:checked {
    border-color: #1966FF !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
}
.app-main-order .panel-summary input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    left: 4px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

/* ============================================================
   Promo code "J'ai un code promo" + bouton "Appliquer"
   ============================================================ */
.app-main-order .promocode,
.app-main-order .box-promo-code,
.app-main-order .panel-summary .promocode {
    margin-top: 14px !important;
    padding: 0 !important;
    background: transparent !important;
}
.app-main-order .promocode .input-group,
.app-main-order .panel-summary .promocode .input-group {
    display: flex !important;
    align-items: stretch !important;
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.app-main-order .promocode .input-group:focus-within {
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
.app-main-order .promocode .input-group input.form-control {
    flex: 1 1 auto !important;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    min-height: 46px !important;
}
.app-main-order .promocode .input-group input.form-control::placeholder {
    color: #8fadc9 !important;
    opacity: 1 !important;
}
.app-main-order .promocode .input-group input.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}
.app-main-order .promocode .input-group .input-group-btn {
    display: inline-flex !important;
    align-items: stretch !important;
}
.app-main-order .promocode .input-group .input-group-btn .btn,
.app-main-order .promocode .input-group .input-group-btn .btn-primary-faded {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 22px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    min-height: 46px !important;
    box-shadow: none !important;
    transition: filter .15s !important;
}
.app-main-order .promocode .input-group .input-group-btn .btn:hover {
    filter: brightness(1.10) !important;
}

/* ============================================================
   MarketConnect addon cards (SiteLock / Email / NordVPN / Monitoring)
   .panel-main-addon — card large avec illustration à droite, text + bouton à gauche
   ============================================================ */
.app-main-order .panel.panel-addon.panel-main-addon {
    position: relative !important;
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    /* overflow: visible pour laisser sortir le dropdown ; les enfants respectent la rondeur via leur propre clip */
    overflow: visible !important;
    display: flex !important;
    align-items: stretch !important;
    min-height: 168px !important;
    box-shadow: 0 6px 18px -10px rgba(0,8,30,0.40) !important;
    transition: border-color .15s, background .15s !important;
}
/* Le .panel-icon a son propre clipping pour garder la rondeur côté illustration */
.app-main-order .panel.panel-addon.panel-main-addon .panel-icon {
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    overflow: hidden !important;
}
/* Le panel-body côté gauche garde aussi sa rondeur */
.app-main-order .panel.panel-addon.panel-main-addon .panel-body {
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}
/* Dropdown menu : au-dessus de tout */
.app-main-order .panel-addon .panel-actions.dropdown.open,
.app-main-order .panel-main-addon .panel-actions.dropdown.open {
    z-index: 100 !important;
}
.app-main-order .panel-addon .dropdown-menu,
.app-main-order .panel-main-addon .dropdown-menu {
    z-index: 1000 !important;
}
.app-main-order .panel.panel-addon.panel-main-addon:hover {
    background: rgba(25,102,255,0.08) !important;
    border-color: rgba(98,152,254,0.40) !important;
}
.app-main-order .panel.panel-addon.panel-main-addon.checked {
    background: linear-gradient(160deg, rgba(25,102,255,0.10) 0%, rgba(0,154,255,0.04) 100%) !important;
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 8px 22px -10px rgba(25,102,255,0.40) !important;
}

/* Panel body : zone texte gauche */
.app-main-order .panel.panel-addon.panel-main-addon .panel-body {
    flex: 1 1 60% !important;
    padding: 24px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: transparent !important;
    border: 0 !important;
}
.app-main-order .panel.panel-addon.panel-main-addon h5.panel-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.app-main-order .panel.panel-addon.panel-main-addon p.panel-desc {
    color: #8fadc9 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .panel-actions {
    margin: 0 !important;
    padding: 0 !important;
}

/* Bouton "Choisir une option" — dropdown ghost cyan */
.app-main-order .panel.panel-addon.panel-main-addon .panel-actions .btn-primary-faded {
    background: rgba(98,152,254,0.15) !important;
    color: #c4e3ff !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    height: 42px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background .15s, border-color .15s !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .panel-actions .btn-primary-faded:hover {
    background: rgba(25,102,255,0.25) !important;
    border-color: rgba(98,152,254,0.60) !important;
    color: #ffffff !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .panel-actions .btn-primary-faded i.ls-caret {
    font-size: 10px !important;
    color: #9bc3ff !important;
}

/* Panel icon : illustration droite — taille contrôlée */
.app-main-order .panel.panel-addon.panel-main-addon .panel-icon {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 35% !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-left: 1px solid rgba(98,152,254,0.10) !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .panel-icon img {
    max-width: 100% !important;
    max-height: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Check-sign : pastille top-right quand l'addon est sélectionné */
.app-main-order .panel.panel-addon.panel-main-addon .check-sign {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    opacity: 0 !important;
    transform: scale(0.7) !important;
    transition: opacity .2s, transform .2s !important;
    z-index: 2 !important;
}
.app-main-order .panel.panel-addon.panel-main-addon.checked .check-sign {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .check-sign i {
    font-size: 14px !important;
    color: #ffffff !important;
}
.app-main-order .panel.panel-addon.panel-main-addon .check-sign i::before {
    /* Force un check SVG si l'icon font est cassée */
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Responsive : sur mobile, illustration en haut, body en bas */
@media (max-width: 720px) {
    .app-main-order .panel.panel-addon.panel-main-addon {
        flex-direction: column-reverse !important;
        min-height: 0 !important;
    }
    .app-main-order .panel.panel-addon.panel-main-addon .panel-icon {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        border-left: 0 !important;
        border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    }
    .app-main-order .panel.panel-addon.panel-main-addon .panel-icon img {
        max-height: 100px !important;
    }
}

/* ============================================================
   Section "Détails de facturation" — Liste des comptes (panel--billing)
   ============================================================ */
.app-main-order .section--billing-details .panel-group {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.app-main-order .section--billing-details .panel.panel--billing {
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    transition: border-color .15s, background .15s !important;
    box-shadow: none !important;
}
.app-main-order .section--billing-details .panel.panel--billing:hover {
    background: rgba(25,102,255,0.08) !important;
    border-color: rgba(98,152,254,0.35) !important;
}
.app-main-order .section--billing-details .panel.panel--billing.checked {
    background: linear-gradient(160deg, rgba(25,102,255,0.12) 0%, rgba(0,154,255,0.06) 100%) !important;
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 6px 16px -8px rgba(25,102,255,0.30) !important;
}
.app-main-order .section--billing-details .panel.panel--billing.disabled {
    opacity: 0.55 !important;
    background: rgba(8,16,40,0.30) !important;
}
.app-main-order .section--billing-details .panel.panel--billing .panel-heading,
.app-main-order .section--billing-details .panel.panel--billing > label {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.app-main-order .section--billing-details .panel.panel--billing.checked .panel-heading,
.app-main-order .section--billing-details .panel.panel--billing.checked > label {
    color: #ffffff !important;
}
/* Radio button custom (rond 18px avec dot intérieur quand checked) */
.app-main-order .section--billing-details .panel.panel--billing input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(98,152,254,0.40) !important;
    border-radius: 50% !important;
    background: rgba(8,16,40,0.55) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: border-color .15s !important;
}
.app-main-order .section--billing-details .panel.panel--billing input[type="radio"]:checked,
.app-main-order .section--billing-details .panel.panel--billing.checked input[type="radio"] {
    border-color: #1966FF !important;
    background: #1966FF !important;
}
.app-main-order .section--billing-details .panel.panel--billing input[type="radio"]:checked::after,
.app-main-order .section--billing-details .panel.panel--billing.checked input[type="radio"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    transform: translate(-50%, -50%) !important;
}
/* "Pas de permission" pill + EUR badge à droite */
.app-main-order .section--billing-details .panel.panel--billing .btn,
.app-main-order .section--billing-details .panel.panel--billing .label,
.app-main-order .section--billing-details .panel.panel--billing > label > .pull-right,
.app-main-order .section--billing-details .panel.panel--billing > label > * {
    margin-left: auto !important;
}
.app-main-order .section--billing-details .panel.panel--billing .label-disabled,
.app-main-order .section--billing-details .panel.panel--billing [class*="disabled-label"],
.app-main-order .section--billing-details .panel.panel--billing button[disabled],
.app-main-order .section--billing-details .panel.panel--billing .btn-default {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    background: rgba(143,173,201,0.10) !important;
    border: 1px solid rgba(143,173,201,0.25) !important;
    border-radius: 100px !important;
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.app-main-order .section--billing-details .panel.panel--billing .currency-label,
.app-main-order .section--billing-details .panel.panel--billing [class*="currency"] {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    background: rgba(98,152,254,0.15) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 6px !important;
    color: #9bc3ff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}
/* Adresse étendue dans le panel checked */
.app-main-order .section--billing-details .panel.panel--billing .panel-body,
.app-main-order .section--billing-details .panel.panel--billing .panel-collapse {
    background: transparent !important;
    border: 0 !important;
    padding: 0 18px 18px 56px !important;
    margin: 0 !important;
    color: #8fadc9 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* ============================================================
   Section "Détails du paiement" — Méthodes (panel-check--payments)
   ============================================================ */
.app-main-order .panel-check--payments,
.app-main-order .section .panel.panel-check--payments {
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s !important;
    overflow: hidden !important;
}
.app-main-order .panel-check--payments:hover {
    background: rgba(25,102,255,0.08) !important;
    border-color: rgba(98,152,254,0.35) !important;
}
.app-main-order .panel-check--payments.checked {
    background: linear-gradient(160deg, rgba(25,102,255,0.12) 0%, rgba(0,154,255,0.06) 100%) !important;
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 6px 16px -8px rgba(25,102,255,0.30) !important;
}
.app-main-order .panel-check--payments .panel-heading,
.app-main-order .panel-check--payments > label,
.app-main-order .panel-check--payments .check-row,
.app-main-order .panel-check--payments [class*="check-content"]:not(.panel-collapse) {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.app-main-order .panel-check--payments.checked .check-content,
.app-main-order .panel-check--payments.checked > label {
    color: #ffffff !important;
}
.app-main-order .panel-check--payments input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(98,152,254,0.40) !important;
    border-radius: 50% !important;
    background: rgba(8,16,40,0.55) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: border-color .15s !important;
}
.app-main-order .panel-check--payments input[type="radio"]:checked,
.app-main-order .panel-check--payments.checked input[type="radio"] {
    border-color: #1966FF !important;
    background: #1966FF !important;
}
.app-main-order .panel-check--payments input[type="radio"]:checked::after,
.app-main-order .panel-check--payments.checked input[type="radio"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    transform: translate(-50%, -50%) !important;
}
/* Logos Visa/MC/Amex/PayPal à droite */
.app-main-order .panel-check--payments img,
.app-main-order .panel-check--payments .check-content img {
    margin-left: auto !important;
    height: 26px !important;
    width: auto !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,0.95) !important;
    padding: 2px 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}
.app-main-order .panel-check--payments [class*="paypal"] img,
.app-main-order .panel-check--payments [class*="PayPal"] img {
    background: transparent !important;
    box-shadow: none !important;
}
/* Panel-collapse : le form de carte qui se déploie — fond transparent (pas de couche #101F44) */
.app-main-order .panel-check--payments .panel-collapse {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid rgba(98,152,254,0.18) !important;
    padding: 20px 22px !important;
    margin: 0 !important;
}
.app-main-order .panel-check--payments .panel-collapse .panel-body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.app-main-order .panel-check--payments .panel-collapse label,
.app-main-order .panel-check--payments .panel-collapse .control-label {
    display: block !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
}
/* Stripe iframe wrapper — wrapper SIMPLE (sans flex ni double padding qui cassent l'iframe) */
.app-main-order .panel-check--payments .StripeElement {
    background: rgba(8,16,40,0.65) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.app-main-order .panel-check--payments .StripeElement--focus {
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
.app-main-order .panel-check--payments .StripeElement--invalid {
    border-color: rgba(239,68,68,0.55) !important;
}
/* Ne JAMAIS toucher au .__PrivateStripeElement (l'iframe wrapper de Stripe) :
   tout style ici casse l'interaction de l'iframe. */

/* Inputs HTML natifs dans le form paiement (Nom du titulaire, etc.) */
.app-main-order .panel-check--payments .panel-collapse input.form-control,
.app-main-order .panel-check--payments .panel-collapse input[type="text"] {
    background: rgba(8,16,40,0.65) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    min-height: 52px !important;
    box-shadow: none !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.app-main-order .panel-check--payments .panel-collapse input.form-control:hover {
    border-color: rgba(98,152,254,0.45) !important;
    background: rgba(8,16,40,0.75) !important;
}
.app-main-order .panel-check--payments .panel-collapse input.form-control:focus {
    outline: none !important;
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    background: rgba(8,16,40,0.75) !important;
}
.app-main-order .panel-check--payments .panel-collapse input::placeholder {
    color: #8fadc9 !important;
    opacity: 1 !important;
}
/* Fix autofill Chrome qui force un fond blanc sur les inputs : on garde notre dark theme */
.app-main-order .panel-check--payments .panel-collapse input:-webkit-autofill,
.app-main-order .panel-check--payments .panel-collapse input:-webkit-autofill:hover,
.app-main-order .panel-check--payments .panel-collapse input:-webkit-autofill:focus,
.app-main-order .panel-check--payments .panel-collapse input:-webkit-autofill:active,
.app-main-order .section input.form-control:-webkit-autofill,
.app-main-order .section input.form-control:-webkit-autofill:hover,
.app-main-order .section input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgba(8,16,40,0.85) inset !important;
    box-shadow: 0 0 0 30px rgba(8,16,40,0.85) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
/* Grid layout pour Date expiration + CVC côte à côte (déjà fait par Lagom row/col, on resserre) */
.app-main-order .panel-check--payments .panel-collapse .row {
    margin: 0 -8px !important;
}
.app-main-order .panel-check--payments .panel-collapse .row > [class*="col-"] {
    padding: 0 8px !important;
}
.app-main-order .panel-check--payments .panel-collapse .form-group {
    margin-bottom: 18px !important;
}
.app-main-order .panel-check--payments .panel-collapse .form-group:last-child {
    margin-bottom: 0 !important;
}
/* Label dans le form de carte : plus pro */
.app-main-order .panel-check--payments .panel-collapse label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    display: block !important;
}
/* Kill le fond Lagom var(--ui-block-bg) sur .panel-group-condensed (section paiement) */
.app-main-order .section .panel-group,
.app-main-order .section .panel-group-condensed,
.app-main-order .panel-group.panel-group-condensed,
.app-main-order #payment-gateway-component,
.app-main-order #payment-gateway-component.panel-group-condensed {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    --ui-block-bg: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Kill toute couche assombrissante résiduelle dans Détails du paiement */
.app-main-order .panel-check--payments .panel-collapse,
.app-main-order .panel-check--payments .panel-collapse > *,
.app-main-order .panel-check--payments .panel-body,
.app-main-order .panel-check--payments .panel-body > div,
.app-main-order .panel-check--payments .row,
.app-main-order .panel-check--payments .row > div,
.app-main-order .panel-check--payments .form-group {
    background-color: transparent !important;
}
.app-main-order .panel-check--payments [style*="#101F44"],
.app-main-order .panel-check--payments [style*="#101f44"],
.app-main-order .panel-check--payments [style*="rgb(16, 31, 68)"],
.app-main-order .panel-check--payments [style*="rgb(16,31,68)"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* ============================================================
   Section "Informations additionnelles" — Notes textarea
   Le wrapper .panel.panel-form crée une double-card visuelle, on l'aplatit.
   ============================================================ */
.app-main-order .section .panel.panel-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.app-main-order .section .panel.panel-form .panel-body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.app-main-order .section textarea.form-control,
.app-main-order .section textarea[name="notes"] {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 16px 18px !important;
    min-height: 110px !important;
    width: 100% !important;
    resize: vertical !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.app-main-order .section textarea.form-control:hover {
    border-color: rgba(98,152,254,0.40) !important;
    background: rgba(8,16,40,0.65) !important;
}
.app-main-order .section textarea.form-control:focus {
    outline: none !important;
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    background: rgba(8,16,40,0.65) !important;
}
.app-main-order .section textarea.form-control::placeholder {
    color: #8fadc9 !important;
    opacity: 1 !important;
}

/* ============================================================
   IP log security message — refonte minimaliste cyan PCM
   (au lieu du jaune Bootstrap warning par défaut)
   ============================================================ */
.app-main-order .section .alert.checkout-security-msg,
.app-main-order .section .alert-warning.checkout-security-msg,
.app-main-order .section .alert.alert-primary.checkout-security-msg {
    background: linear-gradient(160deg, rgba(25,102,255,0.10) 0%, rgba(0,154,255,0.04) 100%) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 12px !important;
    color: #c4e3ff !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    position: relative !important;
}
.app-main-order .section .alert.checkout-security-msg::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.45), transparent) !important;
    pointer-events: none !important;
}
.app-main-order .section .alert.checkout-security-msg .alert-body {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.app-main-order .section .alert.checkout-security-msg .alert-body i,
.app-main-order .section .alert.checkout-security-msg .alert-body i.ls-shield,
.app-main-order .section .alert.checkout-security-msg .alert-body i.ls {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
    background-color: rgba(98,152,254,0.15) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 8px !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.app-main-order .section .alert.checkout-security-msg .alert-body i::before,
.app-main-order .section .alert.checkout-security-msg .alert-body i.ls::before {
    content: none !important;
    display: none !important;
}
.app-main-order .section .alert.checkout-security-msg .alert-body span {
    color: #c4e3ff !important;
    font-weight: 500 !important;
}
.app-main-order .section .alert.checkout-security-msg .alert-body strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
    background: rgba(8,16,40,0.55) !important;
    padding: 1px 8px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    font-size: 12.5px !important;
}
/* Cache le <h1></h1> vide qui crée de l'espace inutile */
.app-main-order .section:has(.checkout-security-msg) > .section-body > h1:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Lien "Utiliser une nouvelle carte" */
.app-main-order .panel-check--payments .panel-collapse a {
    color: #6298fe !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}
.app-main-order .panel-check--payments .panel-collapse a:hover {
    color: #009AFF !important;
    text-decoration: underline !important;
}

/* Boutons primaires/submit dans les sections (sauf btn-group addon déjà stylés) */
.app-main-order .section .btn-primary:not(.btn-icon):not(.no-hover),
.app-main-order .section button[type="submit"]:not(.btn-icon) {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: filter .15s, box-shadow .15s !important;
}
.app-main-order .section .btn-primary:hover:not(.btn-icon):not(.no-hover) {
    filter: brightness(1.10) !important;
    box-shadow: 0 10px 24px rgba(25,102,255,0.50), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* ============================================================
   Order page /order/* — Header "Vous y êtes presque" + addon buttons
   Scope direct sur les éléments uniques (body n'a pas de class page-order).
   ============================================================ */
/* Header "Vous y êtes presque !" — remonter en réduisant padding ET containers parents */
.app-main.app-main-order > .main-top {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
.app-main.app-main-order .main-header,
.main-header.preloaded {
    padding: 8px 0 6px !important;
    margin: 0 0 12px !important;
    min-height: 0 !important;
    background: transparent !important;
}
.app-main.app-main-order .main-header .main-header-content,
.main-header.preloaded .main-header-content {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.app-main.app-main-order h1#newOrderHeader,
.main-header.preloaded h1#newOrderHeader,
h1#newOrderHeader {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.02em !important;
}

/* === Addons : groupe "Bouton dropdown + X" cohérent ===
   Markup natif (Vue) :
   <div class="btn-group">
     <button class="btn btn-sm btn-primary" data-toggle="dropdown">
       <span class="btn-text">GRATUIT !</span><i class="ls ls-caret"></i>
     </button>
     <button class="btn btn-sm btn-primary btn-icon"><i class="ls ls-close"></i></button>
     <ul class="dropdown-menu">...</ul>
   </div> */
.panel-addon .panel-actions .btn-group,
.panel-main-addon .panel-actions .btn-group {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    /* PAS d'overflow:hidden : sinon le .dropdown-menu (qui sort en dessous) est masqué */
    box-shadow: 0 4px 12px -4px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    height: 40px !important;
    position: relative !important;
    border-radius: 10px !important;
}
.panel-addon .panel-actions .btn-group > .btn,
.panel-main-addon .panel-actions .btn-group > .btn {
    border-radius: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    line-height: 1 !important;
    vertical-align: top !important;
    float: none !important;
}
/* Arrondis EXPLICITES sur les 4 coins de chaque bouton (override les sweeps précédents) */
.app-main-order .panel-addon .panel-actions .btn-group > .btn:not(.btn-icon),
.app-main-order .panel-main-addon .panel-actions .btn-group > .btn:not(.btn-icon),
.panel-addon .panel-actions .btn-group > .btn:not(.btn-icon),
.panel-main-addon .panel-actions .btn-group > .btn:not(.btn-icon) {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: 0 !important;
}
.app-main-order .panel-addon .panel-actions .btn-group > .btn.btn-icon,
.app-main-order .panel-main-addon .panel-actions .btn-group > .btn.btn-icon,
.panel-addon .panel-actions .btn-group > .btn.btn-icon,
.panel-main-addon .panel-actions .btn-group > .btn.btn-icon {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: 0 !important;
}
/* Tue les marges Bootstrap entre les boutons */
.panel-addon .panel-actions .btn-group > .btn + .btn,
.panel-main-addon .panel-actions .btn-group > .btn + .btn,
.app-main-order .panel-addon .panel-actions .btn-group > .btn + .btn {
    margin-left: 0 !important;
}
.panel-addon .panel-actions .btn-group > .btn:not(.btn-icon),
.panel-main-addon .panel-actions .btn-group > .btn:not(.btn-icon) {
    padding: 0 18px !important;
    gap: 8px !important;
}
.panel-addon .panel-actions .btn-group > .btn .btn-text,
.panel-main-addon .panel-actions .btn-group > .btn .btn-text {
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}
.panel-addon .panel-actions .btn-group > .btn i.ls-caret,
.panel-main-addon .panel-actions .btn-group > .btn i.ls-caret {
    font-size: 10px !important;
    color: rgba(255,255,255,0.85) !important;
    margin-left: 4px !important;
}
.panel-addon .panel-actions .btn-group > .btn.btn-icon,
.panel-main-addon .panel-actions .btn-group > .btn.btn-icon {
    padding: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: background .15s !important;
}
.panel-addon .panel-actions .btn-group > .btn.btn-icon::before,
.panel-main-addon .panel-actions .btn-group > .btn.btn-icon::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 1px;
    background: rgba(255,255,255,0.28);
}
.panel-addon .panel-actions .btn-group > .btn:hover,
.panel-addon .panel-actions .btn-group > .btn:focus,
.panel-addon .panel-actions .btn-group > .btn:active,
.panel-main-addon .panel-actions .btn-group > .btn:hover,
.panel-main-addon .panel-actions .btn-group > .btn:focus,
.panel-main-addon .panel-actions .btn-group > .btn:active {
    transform: none !important;
    scale: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.panel-addon .panel-actions .btn-group > .btn.btn-icon:hover,
.panel-main-addon .panel-actions .btn-group > .btn.btn-icon:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}
.panel-addon .panel-actions .btn-group > .btn.btn-icon i,
.panel-main-addon .panel-actions .btn-group > .btn.btn-icon i {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
/* Bouton "Ajouter au panier" (non sélectionné) — pill ghost cyan */
.panel-addon .panel-actions .btn-primary-faded,
.panel-main-addon .panel-actions .btn-primary-faded {
    background: rgba(98,152,254,0.15) !important;
    color: #c4e3ff !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    height: 40px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s !important;
}
.panel-addon .panel-actions .btn-primary-faded:hover,
.panel-main-addon .panel-actions .btn-primary-faded:hover {
    background: rgba(25,102,255,0.25) !important;
    border-color: rgba(98,152,254,0.55) !important;
    color: #ffffff !important;
}

/* ============================================================
   Order page /order/* — Configuration du domaine
   1) Masquer les tooltips "Entrez un domaine ou un mot-clé" (qui apparaissent
      au-dessus des inputs et créent du bruit visuel)
   2) Refonte des 3 onglets (Enregistrer / Transférer / Utiliser existant) :
      design pills compactes, transitions soft, sans container box
   ============================================================ */
/* Masque les tooltips Bootstrap "Entrez un domaine ou un mot-clé" sur le flux order.
   Bootstrap append les tooltips DIRECTEMENT dans body, donc on cible global. */
body > .tooltip,
.tooltip[role="tooltip"],
.tooltip.fade.in,
.tooltip.in,
div.tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* === 3 onglets Vue (tab-nav--domain) : flat, compacts, centrés === */
.section--domain .tab-nav--domain,
.section--domain div.tab-nav.tab-nav--domain {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    margin: 0 0 18px !important;
    min-height: 0 !important;
    max-height: 60px !important;
    height: auto !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
.section--domain .tab-nav--domain > ul.nav-tabs,
.section--domain .nav.nav-tabs.nav-lg,
.section--domain ul.nav-tabs.m-b-3x,
.section--domain ul.nav-tabs.nav-lg.m-b-3x {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    list-style: none !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}
.section--domain .tab-nav--domain::before,
.section--domain .tab-nav--domain::after,
.section--domain .nav.nav-tabs::before,
.section--domain .nav.nav-tabs::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
}
.section--domain .nav.nav-tabs.nav-lg .nav-item {
    flex: 1 1 220px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
    min-height: 0 !important;
    height: auto !important;
}
.section--domain .nav.nav-tabs.nav-lg .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 10px !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.section--domain .nav.nav-tabs.nav-lg .nav-item .nav-link:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(98,152,254,0.40) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
/* État actif : FLAT — pas de drop shadow ni inset, juste le fond gradient */
.section--domain .nav.nav-tabs.nav-lg .nav-item.active .nav-link,
.section--domain .nav.nav-tabs.nav-lg .nav-item .nav-link.active {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border-color: rgba(0,154,255,0.65) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.section--domain .nav.nav-tabs.nav-lg .nav-item input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* === Refonte des 3 cartes Enregistrer / Transférer / Utiliser existant (boxed) === */
.panel-choose-domain.panel-choose-domain-boxed {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}
.panel-choose-domain .panel-domain-option {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
}
.panel-choose-domain .panel-domain-option .content {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}
/* Chaque carte = une pill compacte */
.panel-choose-domain .panel-domain-option label.radio {
    flex: 1 1 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}
.panel-choose-domain .panel-domain-option label.radio .box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    height: auto !important;
    min-height: 64px !important;
    background: rgba(15,29,63,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 12px !important;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s !important;
    box-shadow: none !important;
}
.panel-choose-domain .panel-domain-option label.radio .box:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(98,152,254,0.45) !important;
}
.panel-choose-domain .panel-domain-option label.radio .box-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.20), rgba(0,154,255,0.08)) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #9bc3ff !important;
}
.panel-choose-domain .panel-domain-option label.radio .box-icon svg,
.panel-choose-domain .panel-domain-option label.radio .box-icon img {
    width: 18px !important;
    height: 18px !important;
}
.panel-choose-domain .panel-domain-option label.radio .box-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
    line-height: 1.25 !important;
}
.panel-choose-domain .panel-domain-option label.radio .box-text-title {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
}
.panel-choose-domain .panel-domain-option label.radio .box-text-subtitle {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}
/* State checked : gradient cyan + glow */
.panel-choose-domain .panel-domain-option label.radio.checked .box,
.panel-choose-domain .panel-domain-option label.radio.active .box,
.panel-choose-domain .panel-domain-option label.radio input:checked ~ .box,
.panel-choose-domain .panel-domain-option label.radio:has(input:checked) .box {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border-color: rgba(255,255,255,0.20) !important;
    box-shadow: 0 8px 22px -8px rgba(25,102,255,0.55), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.panel-choose-domain .panel-domain-option label.radio.checked .box-icon,
.panel-choose-domain .panel-domain-option label.radio:has(input:checked) .box-icon {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
}
.panel-choose-domain .panel-domain-option label.radio.checked .box-text-title,
.panel-choose-domain .panel-domain-option label.radio.checked .box-text-subtitle,
.panel-choose-domain .panel-domain-option label.radio:has(input:checked) .box-text-title,
.panel-choose-domain .panel-domain-option label.radio:has(input:checked) .box-text-subtitle {
    color: #ffffff !important;
}
/* Cache les inputs radio originaux (remplacés visuellement par les box) */
.panel-choose-domain .panel-domain-option label.radio > input.icheck-control,
.panel-choose-domain .panel-domain-option label.radio > input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Le wrapper search en dessous : conserve son padding mais aligne propre */
.panel-choose-domain .panel-domain-search {
    background: linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(10,22,49,0.65) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    margin-top: 0 !important;
}

/* ============================================================
   Picker "Mes domaines" sur les pages /order/* quand owndomain est choisi.
   Affiche les domaines achetés + externes en chips cliquables.
   ============================================================ */
.pcm-mydomains-picker {
    margin: 18px 0;
    padding: 16px 18px;
    background:
        radial-gradient(60% 100% at 100% 0%, rgba(0,154,255,0.06), transparent 60%),
        linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(10,22,49,0.65) 100%);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(0,8,30,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.pcm-mydomains-picker.hidden { display: none !important; }
.pcm-mydomains-picker::before {
    content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.50), transparent);
    pointer-events: none;
}
.pcm-mydomains-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 12px;
}
.pcm-mydomains-label {
    font-size: 11px; font-weight: 800;
    color: #6298fe;
    letter-spacing: 0.10em; text-transform: uppercase;
}
.pcm-mydomains-hint {
    font-size: 12px; color: #8fadc9; font-weight: 500;
}
.pcm-mydomains-list {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.pcm-mydomains-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    background: rgba(8,16,40,0.55);
    border: 1px solid rgba(98,152,254,0.25);
    border-radius: 10px;
    color: #c4e3ff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.pcm-mydomains-chip:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(98,152,254,0.50);
    color: #ffffff;
}
.pcm-mydomains-chip:active { transform: translateY(1px); }
.pcm-mydomains-chip-domain {
    font-weight: 700;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.pcm-mydomains-chip-src {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    font-size: 10px; font-weight: 800;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pcm-mydomains-chip--own .pcm-mydomains-chip-src {
    background: rgba(34,197,94,0.18); color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
}
.pcm-mydomains-chip--ext .pcm-mydomains-chip-src {
    background: rgba(98,152,254,0.18); color: #9bc3ff;
    border: 1px solid rgba(98,152,254,0.35);
}

/* ============================================================
   Dashboard /clientarea.php — Pre-header (alertes + bannière promo)
   Empilés au-dessus du "Bonjour Pierre"
   ============================================================ */
.pcm-dash-pre {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}
.pcm-dash-pre > * {
    margin: 0 !important;
}

/* ============================================================
   Dashboard /clientarea.php — Hub principal style PCM
   Greeting + grille 8 cards + sidebar actions/promo
   ============================================================ */
.pcm-dashboard {
    padding: 40px 24px 60px !important;
    margin: 0 auto !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 1180px !important;
    box-sizing: border-box !important;
}
.pcm-dash-pre {
    max-width: 1180px !important;
    margin: 32px auto 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* Quand il y a un .pcm-dash-pre (alertes/banner), le dashboard a moins de top */
.pcm-dash-pre + #pcm-dashboard,
.pcm-dash-pre + .pcm-dashboard {
    padding-top: 32px !important;
}
/* Override parent du dashboard pour permettre margin: 0 auto sans casser le top-nav */
body:has(#pcm-dashboard) .main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:has(#pcm-dashboard) .main-body > .container,
body:has(#pcm-dashboard) .main-body > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:has(#pcm-dashboard) .main-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    display: block !important;
}
/* Vire la sidebar Lagom sur cette page (mais pas ailleurs) */
body:has(#pcm-dashboard) .main-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
}
body:has(#pcm-dashboard) .main-sidebar,
body:has(#pcm-dashboard) aside.main-sidebar {
    display: none !important;
}
/* Masque le bandeau "Mon tableau de bord / Espace client" sur la home */
body:has(#pcm-dashboard) .main-header,
body:has(#pcm-dashboard) .main-header.preloaded,
body:has(#pcm-dashboard) .main-header-top,
body:has(#pcm-dashboard) .main-header-bottom,
body:has(#pcm-dashboard) h1.main-header-title,
body:has(#pcm-dashboard) .breadcrumb,
body:has(#pcm-dashboard) .main-header-bottom .breadcrumb {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.pcm-dash-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
    flex-wrap: wrap !important;
}
.pcm-dash-greeting h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.pcm-dash-greeting h1 strong {
    font-weight: 900 !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(135deg, #6298fe 0%, #009AFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
.pcm-dash-greeting p {
    margin: 6px 0 0 !important;
    color: #8fadc9 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Stats compactes en pills sous le greeting */
.pcm-dash-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.pcm-dash-stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(8,16,40,0.55);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 100px;
    color: #c4e3ff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.pcm-dash-stat-pill:hover {
    background: rgba(25,102,255,0.18);
    border-color: rgba(98,152,254,0.45);
    color: #ffffff;
    text-decoration: none;
}
.pcm-dash-stat-pill--warn {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.30);
    color: #fbbf24;
}
.pcm-dash-stat-pill--danger {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
}
.pcm-dash-stat-value {
    font-size: 14px;
    font-weight: 800;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    color: inherit;
}
.pcm-dash-stat-label {
    color: inherit;
    opacity: 0.85;
}
.pcm-dash-stat-loading {
    background: transparent;
    border: 0;
    padding: 4px 0;
    color: #5a7494;
    opacity: 0.6;
}

/* Section "Mes services récents" */
.pcm-dash-recent {
    margin-bottom: 18px;
}
.pcm-dash-recent.hidden { display: none; }
.pcm-dash-recent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pcm-dash-recent-title {
    font-size: 11px;
    font-weight: 800;
    color: #6298fe;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.pcm-dash-recent-link {
    font-size: 12px;
    color: #6298fe;
    text-decoration: none;
    font-weight: 600;
}
.pcm-dash-recent-link:hover { color: #009AFF; }
.pcm-dash-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.pcm-dash-recent-card {
    display: block;
    padding: 14px 16px;
    background: rgba(8,16,40,0.45);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.pcm-dash-recent-card:hover {
    background: rgba(25,102,255,0.10);
    border-color: rgba(98,152,254,0.45);
    transform: translateY(-1px);
    text-decoration: none;
}
.pcm-dash-recent-domain {
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    margin-bottom: 2px;
    letter-spacing: -0.005em;
}
.pcm-dash-recent-product {
    color: #8fadc9;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
}
.pcm-dash-recent-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pcm-dash-recent-status {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pcm-dash-recent-status--ok { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.30); }
.pcm-dash-recent-status--warn { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.30); }
.pcm-dash-recent-status--muted { background: rgba(143,173,201,0.12); color: #8fadc9; border: 1px solid rgba(143,173,201,0.20); }
.pcm-dash-recent-expiry {
    color: #8fadc9;
    font-size: 11px;
    font-weight: 600;
}
.pcm-dash-recent-expiry.warn { color: #fbbf24; }
.pcm-dash-recent-expiry.danger { color: #fca5a5; }

/* Widget Status réseau (sidebar) */
.pcm-dash-status {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
}
.pcm-dash-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #8fadc9;
    box-shadow: 0 0 0 3px rgba(143,173,201,0.20);
    position: relative;
}
.pcm-dash-status-dot[data-state="ok"] {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.20);
    animation: pcm-dash-pulse 2s infinite ease-out;
}
.pcm-dash-status-dot[data-state="warn"] {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
}
@keyframes pcm-dash-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
    50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.pcm-dash-status-body {
    flex: 1 1 auto;
    min-width: 0;
}
.pcm-dash-status-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #6298fe;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 2px;
}
.pcm-dash-status-msg {
    font-size: 12.5px;
    font-weight: 600;
    color: #c4e3ff;
    line-height: 1.3;
}
.pcm-dash-status-link {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6298fe;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.pcm-dash-status-link:hover {
    background: rgba(98,152,254,0.15);
    color: #009AFF;
}
.pcm-dash-cta-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 20px !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px -6px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transition: filter .15s, box-shadow .15s !important;
}
.pcm-dash-cta-top:hover {
    filter: brightness(1.10) !important;
    color: #ffffff !important;
}

.pcm-dash-body {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 22px !important;
    align-items: start !important;
}
@media (max-width: 980px) {
    .pcm-dash-body { grid-template-columns: 1fr !important; }
    .pcm-dash-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
    .pcm-dashboard { padding: 0 16px !important; }
    .pcm-dash-pre { padding: 0 16px !important; }
}
@media (max-width: 720px) {
    .pcm-dash-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .pcm-dash-cta-top { width: 100% !important; justify-content: center !important; }
    .pcm-dash-grid { grid-template-columns: 1fr !important; }
    .pcm-dash-greeting h1 { font-size: 22px !important; }
    .pcm-dash-card { min-height: auto !important; padding: 14px !important; }
    .pcm-dash-card-icon { width: 44px !important; height: 44px !important; }
    .pcm-dash-card-icon svg.pcm-lagom-icon { width: 32px !important; height: 32px !important; }
    body .alert.alert-lagom { padding-left: 60px !important; padding-right: 48px !important; font-size: 12.5px !important; }
    body .alert.alert-lagom::before { width: 28px !important; height: 28px !important; left: 14px !important; background-size: 14px 14px, cover !important; }
}

.pcm-dash-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
}
.pcm-dash-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 18px !important;
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 90px !important;
}
.pcm-dash-card:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(98,152,254,0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -8px rgba(0,8,30,0.45) !important;
    color: inherit !important;
    text-decoration: none !important;
}
.pcm-dash-card:hover .pcm-dash-card-arrow {
    transform: translateX(4px) !important;
    color: #009AFF !important;
}
.pcm-dash-card-icon {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(80% 80% at 30% 20%, rgba(0,154,255,0.35), transparent 70%),
        linear-gradient(135deg, rgba(25,102,255,0.30), rgba(0,154,255,0.10)) !important;
    border: 1px solid rgba(98,152,254,0.40) !important;
    border-radius: 14px !important;
    color: #c4e3ff !important;
    box-shadow:
        0 4px 12px -2px rgba(25,102,255,0.30),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,8,30,0.25) !important;
    position: relative !important;
    transition: transform .15s, box-shadow .15s !important;
}
.pcm-dash-card-icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 50%) !important;
    pointer-events: none !important;
}
.pcm-dash-card:hover .pcm-dash-card-icon {
    transform: scale(1.05) !important;
    box-shadow:
        0 8px 20px -3px rgba(25,102,255,0.50),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,8,30,0.25) !important;
}
.pcm-dash-card-icon svg {
    width: 36px !important;
    height: 36px !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Icones Lagom officielles (sprite) — utilisent les vars --svg-icon-color-X */
.pcm-dash-card-icon svg.pcm-lagom-icon {
    width: 42px !important;
    height: 42px !important;
    --svg-icon-color-1: #6298fe;
    --svg-icon-color-2: #009AFF;
    --svg-icon-color-3: #c4e3ff;
    --svg-icon-color-4: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(25,102,255,0.40)) !important;
}

/* Alertes Lagom — design PCM minimal, UNE icône custom via ::before
   SELECTEURS ULTRA-AGGRESSIFS pour battre Lagom defaults */
html body div.alert,
html body .alert,
html body div.alert.alert-warning,
html body div.alert.alert-danger,
html body div.alert.alert-info,
html body div.alert.alert-lagom,
html body .pcm-dash-pre div.alert,
html body div[role="alert"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(245,158,11,0.30) !important;
    border-radius: 12px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 76px !important;
    padding-right: 56px !important;
    color: #fbbf24 !important;
    box-shadow: none !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    position: relative !important;
    display: block !important;
    min-height: 60px !important;
}
/* Bouton X de fermeture (.close) — visible cyan */
body .alert.alert-lagom button.close,
body .alert.alert-lagom .close,
body .alert.alert-warning button.close,
body .alert.alert-danger .close,
body .pcm-dash-pre .alert button.close,
body .pcm-dash-pre .alert .close {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 7px !important;
    color: #8fadc9 !important;
    font-size: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background .12s, border-color .12s, color .12s !important;
}
body .alert.alert-lagom button.close::before,
body .alert.alert-lagom .close::before,
body .alert.alert-warning button.close::before,
body .pcm-dash-pre .alert button.close::before,
body .pcm-dash-pre .alert .close::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fadc9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    display: inline-block !important;
}
body .alert.alert-lagom button.close:hover,
body .alert.alert-lagom .close:hover {
    background: rgba(98,152,254,0.15) !important;
    border-color: rgba(98,152,254,0.50) !important;
}
/* Cache le texte original du bouton close (×) */
body .alert.alert-lagom button.close > *:not(::before) {
    font-size: 0 !important;
}
body .alert.alert-danger,
body .alert.alert-danger.alert-lagom,
body .pcm-dash-pre .alert.alert-danger {
    border-color: rgba(239,68,68,0.35) !important;
    color: #fca5a5 !important;
}
body .alert.alert-info,
body .alert.alert-info.alert-lagom,
body .pcm-dash-pre .alert.alert-info {
    border-color: rgba(98,152,254,0.35) !important;
    color: #9bc3ff !important;
}
body .alert.alert-success.alert-lagom {
    border-color: rgba(34,197,94,0.35) !important;
    color: #86efac !important;
}
/* HIDE TOUTES les icônes existantes (Lagom et autres) */
body .alert.alert-lagom > .alert-icon,
body .alert.alert-lagom > i,
body .alert.alert-lagom > svg,
body .alert.alert-lagom .alert-body i,
body .alert.alert-lagom .alert-body .ls,
body .alert.alert-lagom .alert-body .lm,
body .alert.alert-lagom .alert-body .fa,
body .alert.alert-warning > .alert-icon,
body .alert.alert-warning > i,
body .alert.alert-warning > svg,
body .alert.alert-danger > .alert-icon,
body .alert.alert-danger > i,
body .pcm-dash-pre .alert .alert-icon,
body .pcm-dash-pre .alert > i,
body .pcm-dash-pre .alert .alert-body i {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}
/* MA propre icône unique via ::before */
html body div.alert::before,
html body .alert::before,
html body div.alert.alert-warning::before,
html body div.alert.alert-lagom::before,
html body .pcm-dash-pre div.alert::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 18px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    background-color: rgba(245,158,11,0.18) !important;
    border: 1px solid rgba(245,158,11,0.45) !important;
    border-radius: 9px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    box-sizing: border-box !important;
    display: block !important;
}
html body div.alert.alert-danger::before {
    background-color: rgba(239,68,68,0.18) !important;
    border-color: rgba(239,68,68,0.45) !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
}
/* Bouton X close — ULTRA aggressif */
html body div.alert button.close,
html body div.alert .close,
html body .alert button.close,
html body .alert .close,
html body .pcm-dash-pre div.alert button.close,
html body .pcm-dash-pre div.alert .close {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(98,152,254,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 8px !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fadc9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(98,152,254,0.10), rgba(98,152,254,0.05)) !important;
    background-repeat: no-repeat !important;
    background-position: center, center !important;
    background-size: 14px 14px, 100% 100% !important;
    z-index: 5 !important;
}
html body div.alert button.close:hover,
html body div.alert .close:hover {
    background-color: rgba(98,152,254,0.20) !important;
    border-color: rgba(98,152,254,0.50) !important;
}
html body div.alert button.close > *,
html body div.alert .close > *,
html body div.alert button.close span,
html body div.alert .close span {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
}
body .alert.alert-lagom .alert-body {
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    display: block !important;
}
.pcm-dash-card-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.pcm-dash-card-title {
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
}
.pcm-dash-card-desc {
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
.pcm-dash-card-arrow {
    color: #6298fe !important;
    flex-shrink: 0 !important;
    transition: transform .15s, color .15s !important;
}

.pcm-dash-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.pcm-dash-side-card {
    background:
        radial-gradient(60% 100% at 100% 0%, rgba(0,154,255,0.06), transparent 60%),
        linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(10,22,49,0.65) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px -10px rgba(0,8,30,0.45) !important;
}
.pcm-dash-side-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.45), transparent) !important;
    pointer-events: none !important;
}
.pcm-dash-side-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #6298fe !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    margin-bottom: 12px !important;
}
.pcm-dash-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.pcm-dash-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 10px !important;
    color: #c4e3ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, color .12s !important;
}
.pcm-dash-action:hover {
    background: rgba(25,102,255,0.15) !important;
    border-color: rgba(98,152,254,0.45) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.pcm-dash-action svg {
    color: #6298fe !important;
    flex-shrink: 0 !important;
    transition: transform .12s !important;
}
.pcm-dash-action:hover svg {
    transform: translateX(3px) !important;
}
.pcm-dash-action--accent {
    background: linear-gradient(135deg, rgba(25,102,255,0.30) 0%, rgba(0,154,255,0.15) 100%) !important;
    border-color: rgba(0,154,255,0.45) !important;
    color: #ffffff !important;
}
.pcm-dash-action--accent svg {
    color: #ffffff !important;
}

.pcm-dash-promo h3 {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}
.pcm-dash-promo p {
    margin: 0 0 14px !important;
    color: #8fadc9 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}
.pcm-dash-promo-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.08)) !important;
    border: 1px solid rgba(34,197,94,0.35) !important;
    color: #86efac !important;
    border-radius: 100px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}
.pcm-dash-promo-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 16px !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40) !important;
    transition: filter .15s !important;
}
.pcm-dash-promo-cta:hover {
    filter: brightness(1.10) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ============================================================
   Page Services — DataTable (tableau des produits/services)
   Design PCM dark + hover + dropdowns + pagination
   Scope global pour s'appliquer sur toutes les pages client area
   utilisant DataTable.
   ============================================================ */
body .table-container,
body div.table-container {
    background: linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(10,22,49,0.65) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin: 0 0 22px !important;
    box-shadow: 0 6px 18px -10px rgba(0,8,30,0.45), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* Toolbar top : dropdown Afficher + filter */
body .table-container .table-top {
    padding: 6px 4px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid rgba(98,152,254,0.12) !important;
    margin-bottom: 10px !important;
}
body .table-container .table-top .d-flex {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}
body .table-container .table-top label {
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 14px 0 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
/* Dropdown "Toutes les entrées" filter */
body .table-container .view-filter-btns .btn,
body .table-container .view-filter-btns .dropdown-toggle {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #c4e3ff !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
}
body .table-container .view-filter-btns .btn:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(98,152,254,0.45) !important;
    color: #ffffff !important;
}
body .table-container .view-filter-btns .dropdown-menu {
    background: linear-gradient(160deg, rgba(15,29,63,0.98) 0%, rgba(10,22,49,0.98) 100%) !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px -8px rgba(0,8,30,0.65) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}
body .table-container .view-filter-btns .dropdown-menu a {
    color: #c4e3ff !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
body .table-container .view-filter-btns .dropdown-menu a:hover {
    background: rgba(25,102,255,0.18) !important;
    color: #ffffff !important;
}

/* Table principale */
body table#tableServicesList,
body table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    color: #c4e3ff !important;
    margin: 0 !important;
}
body table#tableServicesList thead th,
body table.dataTable thead th {
    background: transparent !important;
    color: #6298fe !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(98,152,254,0.20) !important;
    border-top: 0 !important;
}
body table#tableServicesList tbody tr,
body table.dataTable tbody tr {
    background: transparent !important;
    transition: background .12s !important;
    cursor: pointer !important;
}
body table#tableServicesList tbody tr:hover,
body table.dataTable tbody tr:hover {
    background: rgba(25,102,255,0.08) !important;
}
body table#tableServicesList tbody tr td,
body table.dataTable tbody tr td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    padding: 16px !important;
    color: #c4e3ff !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
}
body table#tableServicesList tbody tr:last-child td {
    border-bottom: 0 !important;
}
body table#tableServicesList tbody tr td strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body table#tableServicesList tbody tr td a {
    color: #c4e3ff !important;
    text-decoration: none !important;
}
/* Sort arrows DataTable */
body table.dataTable thead th.sorting,
body table.dataTable thead th.sorting_asc,
body table.dataTable thead th.sorting_desc {
    cursor: pointer !important;
    background-image: none !important;
    padding-right: 28px !important;
    position: relative !important;
}
body table.dataTable thead th.sorting::after,
body table.dataTable thead th.sorting_asc::after,
body table.dataTable thead th.sorting_desc::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 10px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 4 18 9'/%3E%3Cpolyline points='6 15 12 20 18 15'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: 0.6 !important;
}
body table.dataTable thead th.sorting_asc::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009AFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}
body table.dataTable thead th.sorting_desc::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009AFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* Pagination DataTable — clean : pas de border-top qui traverse */
body .dataTables_paginate,
body .table-container .dataTables_paginate,
body .table-container .pagination {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
/* Wrapper row du bas : flex space-between */
body .dataTables_wrapper > .row:last-child,
body .table-container > .row:last-child,
body .dataTables_wrapper > div.row + div.row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 4px 6px !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: 100% !important;
    position: relative !important;
}
body .dataTables_wrapper > .row:last-child > [class*="col-"],
body .table-container > .row:last-child > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    background: transparent !important;
}
/* Le séparateur cyan : pseudo-element pour ne PAS traverser les boutons */
body .dataTables_wrapper > .row:last-child::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(98,152,254,0.22), transparent) !important;
    pointer-events: none !important;
}
body .dataTables_paginate .paginate_button,
body .table-container .paginate_button {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    color: #c4e3ff !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .12s, border-color .12s !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 38px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body .dataTables_paginate .paginate_button:hover,
body .table-container .paginate_button:hover {
    background: rgba(25,102,255,0.15) !important;
    border-color: rgba(98,152,254,0.50) !important;
    color: #ffffff !important;
}
body .dataTables_paginate .paginate_button.current,
body .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -3px rgba(25,102,255,0.40) !important;
}
body .dataTables_paginate .paginate_button.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
body .dataTables_paginate .paginate_button.disabled:hover {
    background: rgba(8,16,40,0.55) !important;
    border-color: rgba(98,152,254,0.22) !important;
    color: #c4e3ff !important;
}
body .dataTables_paginate .paginate_button,
body .pagination > li > a,
body .table-container .paginate_button {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    color: #c4e3ff !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .12s, border-color .12s !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body .dataTables_paginate .paginate_button:hover,
body .pagination > li > a:hover {
    background: rgba(25,102,255,0.15) !important;
    border-color: rgba(98,152,254,0.50) !important;
    color: #ffffff !important;
}
body .dataTables_paginate .paginate_button.current,
body .pagination > li.active > a {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -3px rgba(25,102,255,0.40) !important;
}
body .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
/* "Afficher 10" en bas (page length select) */
body .dataTables_length,
body .table-container .dataTables_length {
    color: #8fadc9 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body .dataTables_length select,
body .table-container .dataTables_length select {
    background: rgba(8,16,40,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 6px 28px 6px 12px !important;
    font-size: 12.5px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
}
/* Pagination footer wrapper */
body .table-container > div:last-child:has(.dataTables_paginate),
body .dataTables_wrapper > .row:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 8px 4px 0 !important;
}

/* "Aucun enregistrement trouvé" */
body table.dataTable .dataTables_empty,
body table#tableServicesList .dataTables_empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #8fadc9 !important;
    font-style: italic !important;
    font-size: 13px !important;
}

/* Bouton "•••" actions (3 dots) en bout de ligne */
body table tbody tr .btn-actions,
body table tbody tr [class*="dropdown-toggle"]:has(i.lm-dots),
body table tbody tr a.dropdown-toggle:has(.fa-ellipsis-h) {
    background: rgba(98,152,254,0.10) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 8px !important;
    color: #9bc3ff !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .12s !important;
}
body table tbody tr .btn-actions:hover {
    background: rgba(25,102,255,0.20) !important;
    color: #ffffff !important;
}

/* ============================================================
   Page Services — Filtres par catégorie en haut de la liste
   Grille de cards cliquables (Hosting / Domaines / Email / etc.)
   ============================================================ */
.pcm-svc-filters {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}
.pcm-svc-filter-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: rgba(8,16,40,0.45) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    color: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background .15s, border-color .15s, transform .12s !important;
    position: relative !important;
    overflow: hidden !important;
}
.pcm-svc-filter-card:hover {
    background: rgba(25,102,255,0.10) !important;
    border-color: rgba(98,152,254,0.45) !important;
    transform: translateY(-2px) !important;
}
.pcm-svc-filter-card[aria-pressed="true"] {
    background: linear-gradient(160deg, rgba(25,102,255,0.18) 0%, rgba(0,154,255,0.06) 100%) !important;
    border-color: rgba(0,154,255,0.55) !important;
}
.pcm-svc-filter-card[aria-pressed="true"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 14% !important; right: 14% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.55), transparent) !important;
    pointer-events: none !important;
}
.pcm-svc-filter-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(25,102,255,0.20), rgba(0,154,255,0.08)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    color: #9bc3ff !important;
}
.pcm-svc-filter-card[aria-pressed="true"] .pcm-svc-filter-icon {
    background: linear-gradient(135deg, rgba(25,102,255,0.40), rgba(0,154,255,0.18)) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #c4e3ff !important;
}
.pcm-svc-filter-icon svg {
    width: 22px !important;
    height: 22px !important;
}
.pcm-svc-filter-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.pcm-svc-filter-title {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
}
.pcm-svc-filter-desc {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}
.pcm-svc-filter-count {
    flex-shrink: 0 !important;
    min-width: 28px !important;
    height: 26px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(98,152,254,0.18) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #c4e3ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 100px !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
}
.pcm-svc-filter-card[aria-pressed="true"] .pcm-svc-filter-count {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* ============================================================
   Page productdetails — Custom Plesk module
   Tone down les boutons .btn-accent (Ouvrir Plesk / Connexion WordPress)
   pour matcher le style des .btn-outline (Visiter le Site, etc.)
   Alerte "Facture impayée" alignée à gauche avec le dashboard.
   ============================================================ */
/* Alerte "Facture impayée" — après move JS, sibling de .dashboard.
   Applique exactement les mêmes margins horizontaux que .dashboard ({margin: -15px}). */
html body div#alertUnpaidInvoice,
html body div#alertUnpaidInvoice.alert,
html body div#alertUnpaidInvoice.alert.alert-lagom,
html body .tab-pane > div#alertUnpaidInvoice {
    margin: 0 -15px 20px !important;
    padding: 18px 28px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
}
html body #alertUnpaidInvoice .alert-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}
html body #alertUnpaidInvoice .alert-actions,
html body #alertUnpaidInvoice .alert-actions.pull-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    float: none !important;
}
html body .dashboard .btn.btn-accent,
html body a.btn.btn-accent,
html body button.btn.btn-accent {
    background: linear-gradient(135deg, rgba(25,102,255,0.40) 0%, rgba(0,154,255,0.25) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.50) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px -2px rgba(25,102,255,0.20), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transition: background .15s, border-color .15s, box-shadow .15s !important;
    filter: none !important;
    text-shadow: none !important;
}
html body .dashboard .btn.btn-accent *,
html body a.btn.btn-accent *,
html body button.btn.btn-accent * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .dashboard .btn.btn-accent:hover,
html body a.btn.btn-accent:hover,
html body button.btn.btn-accent:hover {
    background: linear-gradient(135deg, rgba(25,102,255,0.60) 0%, rgba(0,154,255,0.40) 100%) !important;
    border-color: rgba(98,152,254,0.70) !important;
    box-shadow: 0 4px 14px -2px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Tab "Tableau de bord" - tone down glow */
html body .dashboard .tabs-nav .tab.active,
html body .dashboard .tabs-nav .tab.active::after,
html body .dashboard [class*="tab"][class*="active"]::after,
html body .dashboard [class*="tab"][class*="active"] {
    box-shadow: none !important;
    filter: none !important;
}

/* Force la couleur du texte VISIBLE sur tous les boutons primary (anti-bug) */
body.page-clientareaproductdetails .btn-primary,
body.page-clientareaproductdetails .btn-primary *,
body.page-clientareaproductdetails a.btn-primary,
body.page-clientareaproductdetails a.btn-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   Bannière "Connecter un domaine externe" sur /clientarea.php?action=domains
   Injectée par initExternalDomainsBanner() dans pcm-redesign.js.
   ============================================================ */
.pcm-extd-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin: 18px 0 22px;
    background:
        radial-gradient(60% 100% at 100% 0%, rgba(0,154,255,0.08), transparent 60%),
        linear-gradient(160deg, rgba(15,29,63,0.55) 0%, rgba(10,22,49,0.65) 100%);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 16px;
    box-shadow: 0 8px 22px -10px rgba(0,8,30,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.pcm-extd-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.55), transparent);
    pointer-events: none;
}
.pcm-extd-banner-icon {
    width: 52px; height: 52px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(0,154,255,0.10));
    border: 1px solid rgba(98,152,254,0.35);
    display: flex; align-items: center; justify-content: center;
    color: #9bc3ff;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pcm-extd-banner-body { flex: 1 1 280px; min-width: 240px; }
.pcm-extd-banner-body h3 {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 800; color: #ffffff;
    letter-spacing: -0.015em;
}
.pcm-extd-banner-body p {
    margin: 0;
    color: #8fadc9; font-size: 13px; line-height: 1.55;
}
.pcm-extd-banner-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%);
    color: #ffffff !important;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: filter .15s, box-shadow .15s;
    white-space: nowrap;
}
.pcm-extd-banner-btn:hover {
    filter: brightness(1.10);
    box-shadow: 0 10px 26px rgba(25,102,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
    color: #ffffff !important;
}
.pcm-extd-banner-chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.pcm-extd-banner-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(8,16,40,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 8px;
    color: #c4e3ff !important;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}
.pcm-extd-banner-chip:hover {
    background: rgba(25,102,255,0.15);
    border-color: rgba(98,152,254,0.40);
    color: #ffffff !important;
}
.pcm-extd-banner-domain { font-weight: 700; }
.pcm-extd-banner-badge {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    font-size: 10px; font-weight: 800;
    border-radius: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Poppins, sans-serif;
}
.pcm-extd-banner-badge.ok { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.35); }
.pcm-extd-banner-badge.warn { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
.pcm-extd-banner-more {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    color: #6298fe;
    font-weight: 700;
    font-size: 12px;
}

@media (max-width: 720px) {
    .pcm-extd-banner { padding: 16px; }
    .pcm-extd-banner-btn { width: 100%; justify-content: center; margin-top: 4px; }
}

/* ============================================================
   Top-nav (top-right) : Notifications + Account
   Plus de "card" avec fond/bordure — design moderne, minimal.
   - Notifications : bouton circulaire icône-only (40x40), pastille rouge si unread
   - Account : avatar + nom/société avec fond TRANSPARENT, soft hover

   left-nav.tpl inclut top-nav.tpl DEUX fois (ligne 22 dans .app-nav-header
   et ligne 47 dans .main-top) → le widget Account+Notifications apparaît
   en doublon. On masque la version .app-nav-header (sidebar gauche) et
   on garde celle de .main-top (haut à droite, bien positionnée).
   ============================================================ */
.app-nav .app-nav-header .top-nav,
.app-nav-header > .container > .top-nav {
    display: none !important;
}
.top-nav,
ul.top-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}
.top-nav > li,
ul.top-nav > li {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.top-nav > li > a,
ul.top-nav > li > a,
.top-nav > li > a.dropdown-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 6px 10px !important;
    color: rgba(255,255,255,0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background-color .15s, border-color .15s !important;
}
.top-nav > li > a:hover,
ul.top-nav > li > a:hover,
.top-nav > li > a.dropdown-toggle:hover,
.top-nav > li.open > a {
    background: rgba(98,152,254,0.10) !important;
    border-color: rgba(98,152,254,0.25) !important;
}

/* === Notifications : icône-only circulaire === */
.top-nav > li[menuItemName="Notifications"] > a,
ul.top-nav > li[menuItemName="Notifications"] > a {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    position: relative !important;
}
.top-nav > li[menuItemName="Notifications"] > a > .notification-icon-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
}
.top-nav > li[menuItemName="Notifications"] > a > .notification-icon-container i,
.top-nav > li[menuItemName="Notifications"] > a > .notification-icon-container svg {
    color: rgba(255,255,255,0.85) !important;
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}
/* Masque le label texte "Notifications" — icône suffit */
.top-nav > li[menuItemName="Notifications"] > a > .item-text,
.top-nav > li[menuItemName="Notifications"] > a > .item-text-badge {
    display: none !important;
}
/* Badge unread : pastille rouge en haut à droite de l'icône */
.top-nav > li[menuItemName="Notifications"] > a > .notification-icon-container .badge,
.top-nav > li[menuItemName="Notifications"] > a > .notification-icon-container [class*="badge"] {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 2px #0f1d3f !important;
    line-height: 1 !important;
}

/* === Account : avatar + texte, transparent === */
.top-nav > li[menuItemName="Account"] > a,
ul.top-nav > li[menuItemName="Account"] > a {
    padding: 6px 12px 6px 6px !important;
    gap: 10px !important;
}
.top-nav > li[menuItemName="Account"] > a .client-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 2px 8px -2px rgba(25,102,255,0.45) !important;
}
.top-nav > li[menuItemName="Account"] > a .client-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.top-nav > li[menuItemName="Account"] > a .active-client {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.15 !important;
    gap: 1px !important;
}
.top-nav > li[menuItemName="Account"] > a .active-client .item-text {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
}
.top-nav > li[menuItemName="Account"] > a .active-client span:not(.item-text) {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}
.top-nav > li[menuItemName="Account"] > a b.ls-caret,
.top-nav > li[menuItemName="Account"] > a b.ls {
    color: rgba(255,255,255,0.55) !important;
    margin-left: 6px !important;
    font-size: 10px !important;
}

/* === Page header — design minimaliste élégant ===
   Pas de card, juste typographie forte + ligne accent + spacing généreux. */
.app-content > .main-header,
.app-main > .main-header,
.main-header:not(.preloaded) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 36px 0 24px !important;
    margin: 0 0 28px !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: visible !important;
}
/* Ligne accent en bas du header — fine, gradient cyan, élégante */
.app-content > .main-header::after,
.app-main > .main-header::after,
.main-header:not(.preloaded)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(98,152,254,0.50) 0%, rgba(0,154,255,0.20) 40%, transparent 100%) !important;
    pointer-events: none !important;
}

.main-header-top {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    position: relative !important;
}
.main-header-bottom {
    position: relative !important;
    padding-top: 0 !important;
    margin-top: 8px !important;
}
.main-header-bottom::after {
    display: none !important;
}

/* Icône avant le titre — pastille avec glow cyan */
.main-header-title .pcm-page-icon,
h1.main-header-title .pcm-page-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-right: 14px !important;
    vertical-align: -10px !important;
    border-radius: 11px !important;
    background:
        linear-gradient(135deg, rgba(25,102,255,0.22) 0%, rgba(0,154,255,0.10) 100%) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    box-shadow:
        0 6px 16px -6px rgba(25,102,255,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    color: #6298fe !important;
    flex-shrink: 0 !important;
}
.main-header-title .pcm-page-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #9bc3ff !important;
    /* Reset the title gradient — icon stays solid colored */
    -webkit-text-fill-color: initial !important;
    fill: none !important;
}
/* Titre devient flex pour aligner icône + texte proprement */
.main-header-top .main-header-title,
.main-header > h1.main-header-title {
    display: inline-flex !important;
    align-items: center !important;
}

/* Breadcrumb : home icon + chevron séparateur subtil */
.main-header-bottom .breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}
.main-header-bottom .breadcrumb li,
.main-header-bottom ol.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    color: #8fadc9 !important;
}
.main-header-bottom .breadcrumb li + li::before,
.main-header-bottom ol.breadcrumb li + li::before {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 1.5px solid rgba(143,173,201,0.55) !important;
    border-top: 1.5px solid rgba(143,173,201,0.55) !important;
    transform: rotate(45deg) !important;
    margin: 0 12px 0 10px !important;
    opacity: 0.7 !important;
    padding: 0 !important;
}
.main-header-bottom .breadcrumb li.active,
.main-header-bottom ol.breadcrumb li.active {
    color: #c4e3ff !important;
    font-weight: 600 !important;
}
.pcm-bc-home-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    background: rgba(98,152,254,0.10) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    transition: background .15s, border-color .15s !important;
}
.pcm-bc-home-link:hover {
    background: rgba(98,152,254,0.20) !important;
    border-color: rgba(98,152,254,0.45) !important;
}
.pcm-bc-home {
    width: 12px !important;
    height: 12px !important;
    color: #6298fe !important;
}
/* Titre h1 — taille uniforme partout, gras prononcé */
body .main-header-top .main-header-title,
body .main-header-title,
body h1.main-header-title,
body h2.main-header-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Conteneur breadcrumb : collé au titre (pas de gros vide) */
.main-header-bottom {
    padding: 0 !important;
    margin: 2px 0 14px !important;
    min-height: 0 !important;
    display: block !important;
}
.main-header-bottom .breadcrumb,
.main-header-bottom ol.breadcrumb,
.main-header-bottom .breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    border: 0 !important;
}
/* Si le titre est rendu hors du conteneur .main-header-top (page sans search),
   colle aussi le breadcrumb */
.main-header > h1.main-header-title,
.app-content > h1.main-header-title {
    margin: 14px 0 4px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.app-content > h1.page-header,
.app-content > div.page-header,
.app-content > header.page-header,
.app-content > .app-page-header[role="banner"],
.app-content > .lagom-page-header,
.app-content > .app-heading-container {
    position: relative !important;
    background:
        radial-gradient(80% 100% at 0% 0%, rgba(25,102,255,0.10), transparent 55%),
        radial-gradient(50% 80% at 100% 0%, rgba(0,154,255,0.08), transparent 60%),
        linear-gradient(180deg, rgba(21,38,71,0.55) 0%, rgba(12,24,56,0.20) 100%) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    border-color: rgba(98,152,254,0.18) !important;
    padding: 14px 32px 16px !important;
    margin-bottom: 18px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.app-content > h1.page-header::before,
.app-content > div.page-header::before,
.app-content > .app-page-header[role="banner"]::before,
.app-content > .lagom-page-header::before,
.app-content > .app-heading-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.55), transparent) !important;
    pointer-events: none !important;
}

/* Page title typography */
.app-content-header h1,
.app-page-header h1,
.page-header h1,
.app-heading h1,
.app-heading-container h1,
.app-page-title h1,
.app-content-header .title,
.app-content-header h2.title,
.lagom-page-header h1 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Breadcrumb inside the bandeau */
.app-content-header .breadcrumb,
.app-page-header .breadcrumb,
.page-header .breadcrumb,
.app-heading .breadcrumb,
.app-heading-container .breadcrumb,
ol.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    color: #8fadc9 !important;
}
.app-content-header .breadcrumb a,
.app-page-header .breadcrumb a,
.page-header .breadcrumb a,
.breadcrumb a,
ol.breadcrumb li a {
    color: #6298fe !important;
    text-decoration: none !important;
}
.app-content-header .breadcrumb a:hover,
.breadcrumb a:hover { color: #009AFF !important; }
.app-content-header .breadcrumb .active,
.breadcrumb .active,
ol.breadcrumb li.active,
ol.breadcrumb li:last-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}
ol.breadcrumb li + li::before {
    color: #5a7494 !important;
    opacity: 0.6;
}

/* Kill the blue glow around search+button group on /clientarea.php pages only.
   Home keeps its own premium combined search-group (rule below). */
.search-group,
.search-group:hover,
.search-group:focus-within,
.input-group-search,
.input-group-search.has-shadow,
.input-group-search:focus-within,
.has-shadow.input-group,
.has-shadow.input-group:focus-within,
.lagom-input-search-group,
.search-with-action {
    box-shadow: none !important;
    transform: none !important;
}
.search-group:not(.domain-search-input):not(.search-group-combined),
.input-group-search:not(.domain-search-input) {
    background: transparent !important;
    border: 0 !important;
}

/* ============================================================
   Search bars secondaires (.search-group > .search-field)
   DOM réel (vérifié devtools) :
   <div class="search-group">
     <div class="search-field">
       <i class="search-field-icon lm lm-search"></i>
       <form><input id="table-search" class="form-control"></form>
     </div>
   </div>
   On STYLE le .search-field DIRECTEMENT (pas le .search-group qui
   est écrasé par 4+ règles existantes).
   ============================================================ */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field {
    background: rgba(0,8,30,0.55) !important;
    background-color: rgba(0,8,30,0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 42px !important;
    overflow: hidden !important;
    flex: 0 1 auto !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field:focus-within {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}
/* Icône loupe : flex static, à GAUCHE même si dans le DOM elle vient APRÈS l'input */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > i.search-field-icon,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > i.lm,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > div.search-field-icon,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > i,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > .search-field-icon {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    padding: 0 10px 0 14px !important;
    margin: 0 !important;
    color: #6298fe !important;
    font-size: 15px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    order: -1 !important; /* Force l'icône à gauche même si dans le DOM elle est après l'input */
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
}
/* Si l'icône est un <div> wrapper contenant un <i> (pageheader.tpl) */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > div.search-field-icon > i {
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
/* Padding de l'input remis à zéro à gauche (l'icône est maintenant un VRAI élément à gauche) */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field input.form-control {
    padding-left: 4px !important;
}
/* Form occupe le reste */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > form {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block !important;
}
/* Input rempli, transparent, blanc */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field input.form-control,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field input#table-search {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    padding: 10px 14px 10px 0 !important;
    height: auto !important;
    min-height: 42px !important;
    width: 100% !important;
    font-size: 13.5px !important;
}
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field input.form-control:focus {
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;
}
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field input.form-control::placeholder {
    color: #5a7494 !important;
    opacity: 1 !important;
}
/* Le .search-group parent : flex horizontal, NO WRAP — search + bouton côte à côte */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    max-width: 100% !important;
    width: auto !important;
}
/* Toolbar : search + bouton alignés, sans fond ni bordure (transparent) */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Search-field : plus épais (hauteur 56px), largeur 320px */
body .main-header-top div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    height: 56px !important;
    min-height: 56px !important;
}
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > input,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > form,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > div.search-field > form > input {
    height: 56px !important;
    line-height: 56px !important;
}
/* Bouton "+ Ajouter nouveau" — compact (juste content + padding), même hauteur 56px */
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > a.btn,
body div.search-group:not(.domain-search-input):not(.search-group-combined):not(.search-group--tld) > .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    justify-content: center !important;
}

/* ============================================================
   Packages / pricing cards (order page) — design premium + pas de troncature
   .package > .package-header > {check-sign, package-title, package-price}
   .package > .package-body > .package-content > ul.package-features
   ============================================================ */

/* Carte */
body .package,
body .package.package-sm {
    position: relative !important;
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px -8px rgba(0,0,0,0.45) !important;
    padding: 28px 22px !important;
    max-height: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    color: rgba(255,255,255,0.92) !important;
    text-align: center !important;
}
body .package.package-selected {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 8px 24px -8px rgba(25,102,255,0.40), 0 0 0 1px rgba(0,154,255,0.30) !important;
}

/* Header */
body .package .package-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
    border-bottom: 1px solid rgba(98,152,254,0.15) !important;
    position: relative !important;
}
body .package .package-header .check-sign {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px -2px rgba(25,102,255,0.35) !important;
    opacity: 0 !important;
    transition: opacity .15s !important;
}
body .package.package-selected .package-header .check-sign {
    opacity: 1 !important;
}
body .package .package-header .check-sign i {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* Titre */
body .package .package-title,
body .package .package-name.package-title,
body .package h3.package-name {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 10px !important;
    line-height: 1.2 !important;
}

/* Prix */
body .package .package-price {
    margin: 0 !important;
    padding: 0 !important;
}
body .package .package-price .price,
body .package .package-price .price-amount {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body .package .package-billing-cycle,
body .package .package-qty,
body .package .package-setup-fee,
body .package .package-starting-from,
body .package .price-setup-fee {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 4px !important;
}

/* Body et features — TOUT visible */
body .package .package-body,
body .package .package-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
body .package ul.package-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: 1 0 auto !important;
}
body .package ul.package-features > li {
    padding: 8px 0 !important;
    border-bottom: 1px dashed rgba(98,152,254,0.10) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
body .package ul.package-features > li:last-child {
    border-bottom: 0 !important;
}

/* Voir plus / Voir moins — limite à 8 features par défaut, JS ajoute .pcm-has-toggle */
body .package.pcm-has-toggle:not(.pcm-expanded) ul.package-features > li.pcm-feature-hidden,
body .package.pcm-has-toggle:not(.pcm-expanded) .features-list > p.pcm-feature-hidden {
    display: none !important;
}

/* Format propre pour .features-list (custom WHMCS description avec <p>) */
body .package .features-list {
    line-height: 1.5 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .package .features-list > p {
    margin: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed rgba(98,152,254,0.10) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body .package .features-list > p:last-of-type {
    border-bottom: 0 !important;
}
/* Cache les <br> qui aèrent la liste de manière incohérente */
body .package .features-list > br,
body .package .package-content > p > br {
    display: none !important;
}
/* Icône FontAwesome (fas fa-*) — au cas où FA n'est pas chargé, on force taille + couleur */
body .package .features-list > p > i[class*="fa-"],
body .package .features-list > p > i.fas,
body .package .features-list > p > i.far,
body .package .features-list > p > i.fa {
    color: #6298fe !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    width: 16px !important;
    text-align: center !important;
    line-height: 1 !important;
}
body .package .pcm-toggle-features {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 14px auto 0 !important;
    padding: 8px 16px !important;
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 999px !important;
    color: #6298fe !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
    align-self: center !important;
    width: auto !important;
}
body .package .pcm-toggle-features:hover {
    background: rgba(25,102,255,0.18) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body .package .pcm-toggle-features::before {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform .2s !important;
}
body .package.pcm-expanded .pcm-toggle-features::before {
    transform: rotate(180deg) !important;
}
body .package .pcm-toggle-features:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
body .package ul.package-features > li i,
body .package ul.package-features > li .lm,
body .package ul.package-features > li .ls {
    color: #6298fe !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    font-size: 14px !important;
}

/* Tue tout fade-out / mask injectés */
body .package::after,
body .package .package-body::after,
body .package .package-content::after,
body .package ul.package-features::after {
    background: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    content: none !important;
}
body .package,
body .package-body,
body .package-content,
body .package-features {
    -webkit-mask-image: none !important;
            mask-image: none !important;
}

/* Grille : pas d'égalisation forcée qui tronque */
.row-eq-height .package,
.row.row-eq-height-xs .package,
.row-eq-height > [class*="col-"] > .package,
.row.row-eq-height-xs > [class*="col-"] > .package {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ====== HOME hero domain-search ======
   REAL Lagom DOM (verified) :
   .domain-search-input.search-group
     └ .search-field
         ├ input.form-control
         └ .search-field-icon > i.lm.lm-search
     └ .search-group-btn
         └ button.btn.btn-primary > span "Chercher"
================================================================= */
.search-group.domain-search-input {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 6px !important;
    border: 1px solid rgba(0,154,255,0.40) !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, rgba(15,29,63,0.65) 0%, rgba(10,20,46,0.55) 100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow:
        0 16px 42px rgba(25,102,255,0.18),
        0 0 0 4px rgba(0,154,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    position: relative;
    overflow: hidden !important;
    transform: none !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.search-group.domain-search-input::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,154,255,0.65), transparent);
    pointer-events: none;
    z-index: 3;
}
.search-group.domain-search-input:focus-within {
    border-color: rgba(0,154,255,0.65) !important;
    box-shadow:
        0 20px 50px rgba(25,102,255,0.28),
        0 0 0 4px rgba(0,154,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* .search-field : the input+icon wrapper, takes all space except button */
.search-group.domain-search-input .search-field {
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Search-field is flex container : icon + form become flex items.
   align-items: center handles vertical centering — no line-height tricks. */
.search-group.domain-search-input .search-field {
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    min-height: 50px !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
    gap: 12px !important;
    flex-direction: row !important;
}
.search-group.domain-search-input .search-field > .search-field-icon,
.search-group.domain-search-input .search-field > i.search-field-icon,
.search-group.domain-search-input .search-field > div.search-field-icon {
    order: -1 !important;          /* show before input regardless of DOM order */
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    color: #6298fe !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    width: 18px !important;
    height: 18px !important;
}
/* The actual icon glyph inside the wrapper div */
.search-group.domain-search-input .search-field > .search-field-icon i,
.search-group.domain-search-input .search-field > .search-field-icon i.lm,
.search-group.domain-search-input .search-field > .search-field-icon i.lm-search {
    color: #6298fe !important;
    font-size: 16px !important;
    line-height: 1 !important;
}
/* Input and form keep their natural flex order (after the reordered icon) */
.search-group.domain-search-input .search-field > input.form-control,
.search-group.domain-search-input .search-field > form {
    order: 0 !important;
}

/* Input : flex item, no padding, height auto (flex centering on parent) */
.search-group.domain-search-input .search-field input.form-control,
.search-group.domain-search-input input.form-control {
    flex: 1 1 auto !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    padding: 0 !important;
    height: 50px !important;
    line-height: 50px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    align-self: stretch !important;
}
.search-group.domain-search-input input.form-control::placeholder {
    color: #8fadc9 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    vertical-align: middle !important;
}
/* The actual <i class="lm lm-search"> glyph */
.search-group.domain-search-input .search-field-icon i,
.search-group.domain-search-input .search-field-icon i.lm,
.search-group.domain-search-input .search-field-icon i.lm-search {
    font-size: 16px !important;
    line-height: 1 !important;
    color: #6298fe !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Button wrapper + Chercher button — aligned with the search field */
.search-group.domain-search-input .search-group-btn {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.search-group.domain-search-input .search-group-btn .btn,
.search-group.domain-search-input button.domainSearchBtn,
.search-group.domain-search-input .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 26px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important;
    margin: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    min-width: 120px !important;
    line-height: 52px !important;
    vertical-align: middle !important;
    transition: filter .15s !important;
}
.search-group.domain-search-input .search-group-btn .btn:hover,
.search-group.domain-search-input button.domainSearchBtn:hover {
    filter: brightness(1.10);
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.search-group.domain-search-input .search-group-btn .btn span { color: #ffffff !important; }

/* Tooltip / dropdown suggestions */
.search-w-tooltip .tooltip,
.search-w-tooltip-popup {
    background: rgba(10,20,46,0.95) !important;
    border: 1px solid rgba(0,154,255,0.30) !important;
    border-radius: 14px !important;
    color: #cbd5e1 !important;
}

@media (max-width: 600px) {
    .search-group.domain-search-input { flex-direction: column; padding: 8px !important; }
    .search-group.domain-search-input .search-group-btn .btn { width: 100%; padding: 14px !important; }
}

/* ===== Lagom2 native button overrides — align with PCM brand ===== */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.lagom-btn-primary,
.btn-action,
.btn.btn-action,
.btn-action-primary,
.btn-add,
.btn-add-new,
.btn-light-primary,
.btn-outline-primary,
.btn-light-action,
.btn-action-light,
input.btn-primary[type="submit"],
input.btn-primary[type="button"],
input[type="submit"][value*="Ajouter"],
button[class*="btn"][class*="primary"],
button[class*="btn-action"],
a[class*="btn"][class*="primary"],
a[class*="btn-action"] {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-color: #1966FF !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border: 0 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    text-shadow: none !important;
    transition: box-shadow var(--pcm-dur) var(--pcm-ease), filter var(--pcm-dur) var(--pcm-ease) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn-action:hover,
.btn-action-primary:hover,
.btn-add:hover,
.btn-light-primary:hover,
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    filter: brightness(1.08);
}
.btn-primary:focus,
.btn-primary:active,
.btn-action:focus,
.btn-action:active {
    box-shadow: 0 0 0 3px rgba(0,154,255,0.30), 0 4px 14px rgba(25,102,255,0.30) !important;
    color: #ffffff !important;
}
.btn-primary i,
.btn-action i,
.btn-action-primary i,
.btn-add i {
    color: #ffffff !important;
}

/* Secondary buttons in client area */
.btn-default,
.btn.btn-default,
.btn-secondary,
.btn.btn-secondary {
    background-color: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.28) !important;
    color: #cfe1ff !important;
}
.btn-default:hover,
.btn-secondary:hover {
    background-color: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* Search inputs in headers / toolbars (NOT the home hero domain search) */
.app-search-input,
.lagom-search input,
.input-group-search input,
input.search,
input[type="search"],
input[placeholder*="mot-clé"],
input[placeholder*="mot clé"],
input[placeholder*="Rechercher"],
input[placeholder*="Search"] {
    background-color: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    outline: none !important;
    box-shadow: none !important;
}
.app-search-input::placeholder,
.lagom-search input::placeholder,
input[type="search"]::placeholder {
    color: #8fadc9 !important;
}
.app-search-input:focus,
input[type="search"]:focus {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    outline: none !important;
}

/* ============================================================
   Client area .search-field — "Entrez un mot-clé..." (table-search)
   REAL DOM :
   <div class="search-field">
     <input type="text" id="table-search" class="form-control">
     <div class="search-field-icon"><i class="lm lm-search"></i></div>
   </div>
   On home (.domain-search-input .search-field), the parent wrapper styles it,
   so we only target standalone .search-field elements.
   ============================================================ */
div.search-field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    height: 44px !important;
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
/* Home hero — restore the wrapper-driven styling (no own border on .search-field) */
.domain-search-input .search-field,
.domain-search-input div.search-field {
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
div.search-field:focus-within {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
}
/* Kill all pseudo-elements + offset duplicates on .search-field itself */
div.search-field::before,
div.search-field::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transform: none !important;
    inset: auto !important;
}
/* Input — transparent, fills the .search-field, padded left for the icon */
div.search-field > input.form-control,
div.search-field > input[type="text"],
div.search-field > input[type="search"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0 14px 0 42px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
div.search-field > input::placeholder { color: #8fadc9 !important; opacity: 1 !important; }
/* Icon — absolute, left side */
div.search-field > .search-field-icon {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #6298fe !important;
    pointer-events: none !important;
    z-index: 2 !important;
    width: auto !important;
    height: auto !important;
}
div.search-field > .search-field-icon::before,
div.search-field > .search-field-icon::after {
    content: none !important;
    display: none !important;
}
div.search-field > .search-field-icon i.lm,
div.search-field > .search-field-icon i.lm-search,
div.search-field > .search-field-icon i {
    color: #6298fe !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ====== Non-home .search-group (the OUTER wrapper around .search-field) ======
   Lagom natif gives it border + bg + padding which creates a visible "outer box"
   stacked behind .search-field — we make it completely transparent so only the
   inner .search-field (styled by us) shows. */
.search-group:not(.domain-search-input) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.search-group:not(.domain-search-input) .search-field-icon,
.search-group:not(.domain-search-input) .search-group-btn,
.input-group-search,
.input-group-search > .input-group-prepend,
.input-group-search > .input-group-append,
.has-shadow:not(.domain-search-input),
[class*="search-bar"]:not(.domain-search-input),
[class*="action-bar"],
[class*="list-actions"],
.lagom-search-bar,
.list-search-wrapper {
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}
/* Kill any pseudo-element on these wrappers (where the "lifted duplicate" lives) */
.search-group:not(.domain-search-input)::before,
.search-group:not(.domain-search-input)::after,
.has-shadow:not(.domain-search-input)::before,
.has-shadow:not(.domain-search-input)::after,
.input-group-search::before,
.input-group-search::after,
[class*="search-bar"]:not(.domain-search-input)::before,
[class*="search-bar"]:not(.domain-search-input)::after,
[class*="action-bar"]::before,
[class*="action-bar"]::after,
[class*="list-actions"]::before,
[class*="list-actions"]::after,
.lagom-search-bar::before,
.lagom-search-bar::after,
.list-search-wrapper::before,
.list-search-wrapper::after,
.search-group:not(.domain-search-input) > div::before,
.search-group:not(.domain-search-input) > div::after,
.search-group:not(.domain-search-input) > .search-field::before,
.search-group:not(.domain-search-input) > .search-field::after,
.search-group:not(.domain-search-input) > .search-field-icon::before,
.search-group:not(.domain-search-input) > .search-field-icon::after,
.search-group:not(.domain-search-input) > .search-group-btn::before,
.search-group:not(.domain-search-input) > .search-group-btn::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border: 0 !important;
}

/* Kill EVERY ring/halo around search icons (loupe) on Lagom search inputs,
   on all client-area / admin pages — not on the home hero (.domain-search-input). */
.search-group:not(.domain-search-input) .input-group-icon,
.search-group:not(.domain-search-input) .input-group-prepend,
.search-group:not(.domain-search-input) .icon-search,
.search-group:not(.domain-search-input) .search-icon,
.search-group:not(.domain-search-input) .form-control-feedback,
.search-group:not(.domain-search-input) [class*="search-icon"],
.input-group-search .input-group-icon,
.input-group-search .input-group-prepend,
.input-group-search .icon-search,
.input-group-search .search-icon,
.input-group-search .form-control-feedback,
.lagom-search-toolbar .input-group-icon,
.lagom-search-toolbar .icon-search,
.app-search-input + .input-group-icon,
.app-search-input ~ .icon-search,
.has-shadow:not(.domain-search-input) .input-group-icon,
.has-shadow:not(.domain-search-input) .icon-search,
.has-shadow:not(.domain-search-input) .search-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #6298fe !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.search-group:not(.domain-search-input) .input-group-icon::before,
.search-group:not(.domain-search-input) .input-group-icon::after,
.input-group-search .input-group-icon::before,
.input-group-search .input-group-icon::after,
.search-group:not(.domain-search-input) .icon-search::before,
.search-group:not(.domain-search-input) .icon-search::after {
    display: none !important;
    content: none !important;
}
.search-group:not(.domain-search-input) .input-group-icon i,
.search-group:not(.domain-search-input) .icon-search i,
.search-group:not(.domain-search-input) .search-icon i,
.input-group-search .input-group-icon i,
.input-group-search .icon-search i,
.input-group-search .search-icon i {
    color: #6298fe !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;
}

/* Primary buttons : NO outer shadow at rest. Kill any pseudo-element that
   themes use to fake a "drop-shadow" duplicate behind the button. */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-action,
.btn-action-primary,
.btn-add,
.btn-add-new,
input.btn-primary[type="submit"],
input.btn-primary[type="button"],
button[class*="btn-"][class*="primary"],
a[class*="btn-"][class*="primary"],
button[class*="btn-action"],
a[class*="btn-action"],
button[class*="btn-add"],
a[class*="btn-add"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important;
    filter: none !important;
    position: relative;
}
/* Kill pseudo-element "fake shadow" duplicates (only on button elements,
   NOT on <i> children that carry icon glyphs) */
.btn::before,
.btn::after,
.btn-primary::before,
.btn-primary::after,
.btn-action::before,
.btn-action::after,
.btn-add::before,
.btn-add::after,
button.btn::before,
button.btn::after,
a.btn::before,
a.btn::after,
button[class*="btn-"]::before,
button[class*="btn-"]::after,
a[class*="btn-"]::before,
a[class*="btn-"]::after,
input[type="submit"][class*="btn"]::before,
input[type="submit"][class*="btn"]::after,
input[type="button"][class*="btn"]::before,
input[type="button"][class*="btn"]::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn-action:hover,
.btn-action-primary:hover,
.btn-add:hover {
    box-shadow: 0 4px 10px -2px rgba(25,102,255,0.40), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.btn-primary:focus,
.btn-primary:active {
    box-shadow: 0 0 0 3px rgba(0,154,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* =========================================================
   2.5. FIX SLIDER : masquer les slides non actifs
   (le CSS officiel scope avec .site.site-index qui n'existe
   pas sur les pages CMS RSThemes — fallback ici)
   ========================================================= */
.site-banner.site-slider .slider-slides {
    position: relative;
}
.site-banner.site-slider .slider-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--pcm-ease),
                visibility .45s var(--pcm-ease);
}
.site-banner.site-slider .slider-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
/* Au chargement (avant init JS), montrer le 1er slide */
.site-banner.site-slider .slider-slides:not(:has(.slider-slide.active)) .slider-slide:first-child {
    opacity: 1;
    visibility: visible;
}
/* Banner background : masquer les non-actifs */
.site-banner.site-slider .banner-background > .banner-graphics > div {
    opacity: 0;
    transition: opacity .45s var(--pcm-ease);
    position: absolute;
    inset: 0;
}
.site-banner.site-slider .banner-background > .banner-graphics > div.active,
.site-banner.site-slider .banner-background > .banner-graphics > div:first-child:only-child {
    opacity: 1;
}

/* =========================================================
   3. Hero CMS : site-banner avec mesh gradient animé
   ========================================================= */
.site-banner,
.banner-sides,
.banner.banner-secondary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.site-banner::before,
.banner.banner-secondary::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    background:
        radial-gradient(closest-side at 22% 28%, rgba(25, 102, 255, .35), transparent 60%),
        radial-gradient(closest-side at 78% 18%, rgba(0, 154, 255, .28), transparent 55%),
        radial-gradient(closest-side at 60% 80%, rgba(8, 63, 191, .22), transparent 60%);
    filter: blur(12px);
    animation: pcm-mesh 22s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes pcm-mesh {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-2%, 1%, 0) scale(1.08); }
    100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

/* Le contenu doit rester au-dessus du mesh */
.site-banner .container,
.site-banner .banner-content,
.banner.banner-secondary .container,
.banner.banner-secondary .banner-content {
    position: relative;
    z-index: 2;
}

/* Banner background / graphic existant : laisser tel quel mais ajouter un parallax léger via JS */
.banner-background,
.banner-graphic {
    will-change: transform;
}

/* Titre hero CMS : animation d'entrée + gradient text */
.banner-title {
    animation: pcm-fade-up .8s var(--pcm-ease) both;
    letter-spacing: -.01em;
}

.banner-content {
    animation: pcm-fade-up .9s .05s var(--pcm-ease) both;
}

.banner-desc {
    animation: pcm-fade-up 1s .12s var(--pcm-ease) both;
}

.banner-actions {
    animation: pcm-fade-up 1.05s .2s var(--pcm-ease) both;
}

@keyframes pcm-fade-up {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================
   4. Sections CMS : site-section
   ========================================================= */
.site-section {
    position: relative;
    transition: background-color var(--pcm-dur) var(--pcm-ease);
}

.site-section .section-title,
.section-title {
    position: relative;
    display: inline-block;
    letter-spacing: -.01em;
}

.site-section .section-title::after,
.section-content > .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #1966FF, #009AFF));
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .8s var(--pcm-ease);
}

.site-section.is-visible .section-title::after,
[data-pcm-reveal].is-visible .section-title::after {
    transform: scaleX(1);
}

.section-subtitle {
    transition: color var(--pcm-dur-fast) var(--pcm-ease);
}

/* =========================================================
   5. Features (cards CMS) — adaptées au thème sombre PCM
   ========================================================= */
.feature {
    position: relative;
    padding: 32px 26px;
    border-radius: var(--pcm-radius);
    background: rgba(255, 255, 255, .035);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .35);
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                background-color var(--pcm-dur) var(--pcm-ease),
                border-color var(--pcm-dur) var(--pcm-ease);
    overflow: hidden;
    isolation: isolate;
    height: 100%;
}

/* halo bleu qui suit la souris */
.feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle at var(--pcm-mx, 50%) var(--pcm-my, 0%),
                rgba(25, 102, 255, .22), transparent 55%);
    opacity: 0;
    transition: opacity var(--pcm-dur) var(--pcm-ease);
}

.feature:hover {
    transform: translateY(-6px);
    background: rgba(16, 98, 254, .08);
    border-color: rgba(25, 102, 255, .45);
    box-shadow: 0 22px 50px -18px rgba(16, 98, 254, .55),
                0 0 0 1px rgba(25, 102, 255, .2);
}

.feature:hover::after {
    opacity: 1;
}

/* Wrapper .feature-icon : par défaut neutre — devient un carré bleu si pas de .font-icon enfant */
.feature .feature-icon {
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Quand un .font-icon existe à l'intérieur, le wrapper est juste un container neutre */
.feature .feature-icon:has(.font-icon) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Cas A : icône avec .font-icon (i.lm / i.ls inside) — le carré visuel */
.feature .feature-icon .font-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(25, 102, 255, .28), rgba(0, 154, 255, .18)) !important;
    border: 1px solid rgba(25, 102, 255, .4) !important;
    color: #ffffff !important;
    transition: transform var(--pcm-dur) var(--pcm-ease-snap),
                background var(--pcm-dur) var(--pcm-ease),
                border-color var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease);
    box-shadow: 0 6px 16px -6px rgba(16, 98, 254, .5) !important;
}

.feature:hover .feature-icon .font-icon {
    transform: translateY(-4px) scale(1.06) rotate(-3deg);
    background: var(--brand-primary-gradient-h, linear-gradient(135deg, #1966FF, #009AFF)) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    box-shadow: 0 14px 28px -8px rgba(16, 98, 254, .7) !important;
}

/* Cas B : icône SVG / img directe (sans .font-icon) → on transforme .feature-icon
   en carré bleu, et l'icône remplit dedans */
.feature .feature-icon:not(:has(.font-icon)),
.feature .feature-icon.no-font-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 18px !important;
    padding: 12px !important;
    background: linear-gradient(135deg, rgba(25, 102, 255, .28), rgba(0, 154, 255, .18)) !important;
    border: 1px solid rgba(25, 102, 255, .4) !important;
    box-shadow: 0 6px 16px -6px rgba(16, 98, 254, .5) !important;
    transition: transform var(--pcm-dur) var(--pcm-ease-snap),
                background var(--pcm-dur) var(--pcm-ease),
                border-color var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease) !important;
}

.feature:hover .feature-icon:not(:has(.font-icon)),
.feature:hover .feature-icon.no-font-icon {
    transform: translateY(-4px) scale(1.06) rotate(-3deg);
    background: var(--brand-primary-gradient-h, linear-gradient(135deg, #1966FF, #009AFF)) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    box-shadow: 0 14px 28px -8px rgba(16, 98, 254, .7) !important;
}

/* L'icône à l'intérieur remplit bien le carré */
.feature .feature-icon > svg,
.feature .feature-icon > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(1.15);
}

/* Hover : icône blanche pure quand le carré devient gradient plein */
.feature:hover .feature-icon > svg {
    filter: brightness(1.5);
}

/* Icône intérieure : tout en blanc */
.feature .feature-icon i,
.feature .feature-icon .font-icon i,
.feature .feature-icon .lm,
.feature .feature-icon .ls {
    color: #ffffff !important;
    font-size: 28px;
    line-height: 1;
}

.feature-title {
    color: #ffffff;
    transition: color var(--pcm-dur-fast) var(--pcm-ease);
    margin-bottom: 10px;
    font-weight: 600;
}

.feature-desc {
    color: rgba(255, 255, 255, .72);
    line-height: 1.7;
}

/* =========================================================
   5bis. Boxes/cards unifiées (toutes pages) — même look que .feature
   Cible : .section-box.is-boxed, .faq-item.faq-item-boxed,
   .testimonials-item.is-boxed, .tile-home, .dashboard-card,
   .client-summary, .pcm-info-card, etc.
   Hover : NON TOUCHÉ (demande user)
   ========================================================= */
.section-box.is-boxed,
.faq-item.faq-item-boxed,
.testimonials-item.is-boxed,
.tile-home,
.tile.tile-home,
.dashboard-card,
.dashboard-tile,
.client-summary,
.client-info-box,
.info-box,
.summary-item,
.pcm-info-card,
.product-summary,
.account-card,
.box.is-boxed {
    position: relative !important;
    background: rgba(15, 29, 63, 0.55) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(98, 152, 254, 0.20) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.35) !important;
    padding: 22px 24px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    overflow: hidden !important;
}

/* Titres dans ces cards */
.section-box.is-boxed h2,
.section-box.is-boxed h3,
.section-box.is-boxed h4,
.faq-item.faq-item-boxed .panel-title,
.faq-item.faq-item-boxed h4,
.testimonials-item.is-boxed .testimonials-title,
.tile-home h3,
.tile-home h4,
.tile-home .tile-title,
.dashboard-card h3,
.dashboard-card .card-title,
.client-summary h3,
.client-summary h4,
.client-summary .panel-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Textes secondaires */
.section-box.is-boxed p,
.faq-item.faq-item-boxed p,
.testimonials-item.is-boxed p,
.tile-home p,
.dashboard-card p,
.client-summary p,
.info-box p {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Stats spécifiques (.feature-stat = LE CHIFFRE, .feature-title = SOUS-TITRE) */
.section-stats .feature,
.section-features .feature.feature-title-only {
    text-align: center;
}

.section-stats .feature-icon,
.section-stats .feature-icon .font-icon,
.feature.feature-icon-top-center .feature-icon,
.feature.feature-icon-top-center .feature-icon .font-icon {
    margin-left: auto;
    margin-right: auto;
}

.feature-stat {
    font-size: 3rem;
    line-height: 1.1;
    margin: 14px 0 10px;
    font-weight: 700;
    background: linear-gradient(120deg, #1966FF 0%, #009AFF 60%, #6298fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Reset : sur les stats, le sous-titre redevient normal */
.section-stats .feature-title,
.feature.feature-title-only .feature-title {
    font-size: 1rem;
    font-weight: 500;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: rgba(255, 255, 255, .85) !important;
    line-height: 1.5;
    margin-top: 6px;
}

/* Espacement vertical entre les rangées de features */
.section-features .row.row-eq-height,
.section-features .row.row-lg,
.section-features .tab-content .row {
    row-gap: 28px;
}

/* FAQ : items propres */
.faq-item,
.faq-question,
.section-faq .question {
    border-radius: var(--pcm-radius);
    transition: background-color var(--pcm-dur-fast) var(--pcm-ease),
                border-color var(--pcm-dur-fast) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease);
}

.faq-item:hover,
.section-faq .question:hover {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(25, 102, 255, .45) !important;
}

.section-faq .question .toggle,
.section-faq .question i.ls-plus,
.section-faq .question i.ls-minus {
    color: var(--brand-primary, #1062fe);
    transition: transform var(--pcm-dur) var(--pcm-ease-snap),
                color var(--pcm-dur-fast) var(--pcm-ease);
}

.section-faq .question.active i,
.section-faq .question[aria-expanded="true"] i {
    transform: rotate(45deg);
}

/* =========================================================
   6. Boutons : gradient animé + lift + ripple
   ========================================================= */
.btn {
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                background-position var(--pcm-dur-slow) var(--pcm-ease),
                color var(--pcm-dur-fast) var(--pcm-ease),
                border-color var(--pcm-dur-fast) var(--pcm-ease),
                filter var(--pcm-dur-fast) var(--pcm-ease);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.btn-primary,
.btn.btn-primary,
.btn.btn-lg.btn-primary {
    background: linear-gradient(120deg,
        var(--brand-primary-gradient-start, #1966FF) 0%,
        var(--brand-primary-gradient-end,   #009AFF) 50%,
        var(--brand-secondary,              #083fbf) 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 50% !important;
    border: 0 !important;
    box-shadow: var(--pcm-shadow-sm);
    color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn.btn-lg.btn-primary:hover {
    background-position: 100% 50% !important;
    box-shadow: var(--pcm-shadow-md);
    transform: translateY(-2px);
    color: #fff !important;
}

.btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0);
    filter: brightness(.95);
}

.btn-light-outline,
.btn.btn-light-outline,
.btn.btn-lg.btn-light-outline {
    border: 2px solid rgba(255, 255, 255, .7) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                background-color var(--pcm-dur-fast) var(--pcm-ease),
                border-color var(--pcm-dur-fast) var(--pcm-ease);
}

.btn-light-outline:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, .15) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: var(--pcm-shadow-sm);
}

.btn-default {
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                background-color var(--pcm-dur-fast) var(--pcm-ease);
}

.btn-default:hover {
    transform: translateY(-1px);
    box-shadow: var(--pcm-shadow-sm);
}

/* Ripple (déclenché par JS) */
.btn .pcm-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
    animation: pcm-ripple-anim .65s var(--pcm-ease);
}

@keyframes pcm-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* =========================================================
   7. Slider / Testimonials
   ========================================================= */
.content-slider-item,
.testimonials-item {
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease);
}

.testimonials-item {
    position: relative;
    padding: 32px 28px;
    border-radius: var(--pcm-radius);
    background: linear-gradient(160deg, rgba(0, 30, 80, 0.55) 0%, rgba(0, 15, 40, 0.30) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(0, 212, 255, 0.22);
    box-shadow: 0 8px 22px rgba(0, 8, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e0e6ed;
    overflow: hidden;
}

.testimonials-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.45), transparent);
    opacity: 0.85;
}

.testimonials-item:hover {
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.22), 0 12px 32px rgba(0, 8, 30, 0.50);
}

.testimonials-item h3,
.testimonials-item h4,
.testimonials-item .testimonials-title,
.testimonials-item .testimonials-name {
    color: #ffffff;
}

.testimonials-item .testimonials-date,
.testimonials-item .testimonials-domain,
.testimonials-item small,
.testimonials-item .text-muted {
    color: #8fadc9 !important;
}

.testimonials-avatar {
    border: 2px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.25);
}

.testimonials-desc {
    line-height: 1.7;
    font-style: italic;
    color: #cbd5e1;
}

/* Quote / play icon at the bottom of each card */
.testimonials-item .testimonials-icon,
.testimonials-item [class*="quote"],
.testimonials-item .icon-quote {
    background: linear-gradient(135deg, #00d4ff, #0284c7) !important;
    color: #001233 !important;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.40);
}

/* Slider arrows (left/right navigation buttons) */
.testimonials-slider .slick-arrow,
.content-slider .slick-arrow,
.testimonials .owl-nav button,
.testimonials .swiper-button-next,
.testimonials .swiper-button-prev {
    background: rgba(0, 30, 80, 0.65) !important;
    border: 1px solid rgba(0, 212, 255, 0.30) !important;
    color: #00d4ff !important;
    box-shadow: 0 4px 14px rgba(0, 8, 30, 0.50);
    transition: border-color var(--pcm-dur) var(--pcm-ease), background var(--pcm-dur) var(--pcm-ease);
}

.testimonials-slider .slick-arrow:hover,
.content-slider .slick-arrow:hover,
.testimonials .owl-nav button:hover,
.testimonials .swiper-button-next:hover,
.testimonials .swiper-button-prev:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    border-color: rgba(0, 212, 255, 0.55) !important;
    color: #7ee0ff !important;
}

/* =========================================================
   8. Domain pricing (TLD)
   ========================================================= */
.domain-tld,
.tld-price {
    transition: transform var(--pcm-dur) var(--pcm-ease),
                background-color var(--pcm-dur-fast) var(--pcm-ease),
                color var(--pcm-dur-fast) var(--pcm-ease);
}

.domain-tld:hover {
    transform: translateY(-2px);
    background-color: var(--brand-primary-lighter-4, #F1F5FE);
}

.tld-name {
    font-weight: 700;
}

/* =========================================================
   9. Search domain (champ + bouton)
   ========================================================= */
.search-group,
.search-group-combined,
.search-group.has-shadow {
    border-radius: var(--pcm-radius-lg);
    box-shadow: var(--pcm-shadow-md);
    transition: box-shadow var(--pcm-dur) var(--pcm-ease),
                transform var(--pcm-dur) var(--pcm-ease);
    overflow: hidden;
}

.search-group:hover,
.search-group.has-shadow:hover {
    box-shadow: var(--pcm-shadow-lg);
    transform: translateY(-1px);
}

.search-group:focus-within {
    box-shadow: var(--pcm-shadow-lg), 0 0 0 4px rgba(16, 98, 254, .14);
    transform: translateY(-2px);
}

.search-group .form-control {
    transition: background-color var(--pcm-dur-fast) var(--pcm-ease);
}

/* =========================================================
   10. Tiles home (homepage.tpl standard, autres pages)
   ========================================================= */
.tile.tile-home {
    position: relative;
    border-radius: var(--pcm-radius);
    background: var(--pcm-glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(23, 25, 28, .06);
    box-shadow: var(--pcm-shadow-sm);
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                border-color var(--pcm-dur) var(--pcm-ease),
                background-color var(--pcm-dur) var(--pcm-ease);
    overflow: hidden;
}

.tile.tile-home:hover {
    transform: translateY(-6px);
    box-shadow: var(--pcm-shadow-lg);
    background: #fff;
    border-color: var(--brand-primary-lighter-3, #D6E4FF);
}

.tile.tile-home .tile-icon {
    transition: transform var(--pcm-dur) var(--pcm-ease-snap);
}

.tile.tile-home:hover .tile-icon {
    transform: translateY(-4px) scale(1.08);
}

/* =========================================================
   11. Reveal au scroll — style IONOS (fade + slide-up doux)
   ========================================================= */
[data-pcm-reveal] {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1),
                transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--pcm-reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-pcm-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   12. Forms : focus premium
   ========================================================= */
.form-control {
    transition: border-color var(--pcm-dur-fast) var(--pcm-ease),
                box-shadow var(--pcm-dur-fast) var(--pcm-ease),
                background-color var(--pcm-dur-fast) var(--pcm-ease);
}

.form-control:focus {
    border-color: var(--brand-primary-lighter-2, #B3CCFF);
    box-shadow: 0 0 0 4px rgba(16, 98, 254, .12);
}

/* =========================================================
   13. Dropdowns : entrée animée + hover slide
   ========================================================= */
.dropdown-menu {
    border-radius: var(--pcm-radius);
    box-shadow: var(--pcm-shadow-md);
    border: 1px solid rgba(23, 25, 28, .06);
    overflow: hidden;
    animation: pcm-dropdown-in .22s var(--pcm-ease);
    transform-origin: top center;
}

@keyframes pcm-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.menu-item-content,
.dropdown-menu-item {
    transition: background-color var(--pcm-dur-fast) var(--pcm-ease),
                color var(--pcm-dur-fast) var(--pcm-ease),
                padding-left var(--pcm-dur-fast) var(--pcm-ease);
}

.menu-item-content:hover,
.dropdown-menu-item:hover {
    background-color: rgba(25, 102, 255, .18);
    color: #ffffff;
}

/* Items du dropdown profil (espace sombre) */
.dropdown-menu .menu-item-content,
.dropdown-menu .dropdown-menu-item {
    color: rgba(255, 255, 255, .85);
}

.dropdown-menu .menu-item-content:hover,
.dropdown-menu .dropdown-menu-item:hover,
.dropdown-menu .menu-item-content:hover .menu-item-title,
.dropdown-menu .dropdown-menu-item:hover .menu-item-title {
    background-color: rgba(25, 102, 255, .22) !important;
    color: #ffffff !important;
}

.dropdown-menu .menu-item-content:hover i,
.dropdown-menu .menu-item-content:hover .lm,
.dropdown-menu .menu-item-content:hover .ls,
.dropdown-menu .dropdown-menu-item:hover i {
    color: #ffffff !important;
}

.nav-link {
    position: relative;
    transition: color var(--pcm-dur-fast) var(--pcm-ease);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--brand-primary, #1062fe);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--pcm-dur) var(--pcm-ease);
}

.nav-link:hover::after {
    width: 70%;
}

/* =========================================================
   14. Alerts
   ========================================================= */
.alert-lagom {
    border-radius: var(--pcm-radius);
    animation: pcm-fade-up .5s var(--pcm-ease) both;
    box-shadow: var(--pcm-shadow-sm);
}

/* =========================================================
   15. Tables (clientarea)
   ========================================================= */
.table tbody tr {
    transition: background-color var(--pcm-dur-fast) var(--pcm-ease);
}

.table tbody tr:hover {
    background-color: rgba(16, 98, 254, .04);
}

/* =========================================================
   16. List groups (annonces, items)
   ========================================================= */
.list-group-item-link {
    border-radius: var(--pcm-radius);
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease),
                border-color var(--pcm-dur) var(--pcm-ease);
}

.list-group-item-link:hover {
    transform: translateX(4px);
    box-shadow: var(--pcm-shadow-md);
    border-color: var(--brand-primary-lighter-3, #D6E4FF);
}

/* =========================================================
   17. Modals — no box-shadow on hidden modals (caused round halo on
   /user/password and other pages with pre-rendered modal-content)
   ========================================================= */
.modal-content {
    border-radius: var(--pcm-radius-lg);
    box-shadow: none;
    overflow: hidden;
}
/* Only apply the shadow when the modal is actually visible */
.modal.show .modal-content,
.modal.in .modal-content {
    box-shadow: 0 8px 18px -8px rgba(16, 98, 254, .20), 0 2px 6px rgba(8, 63, 191, .08);
}

/* =========================================================
   17bis. Modal "Générer un mot de passe" — design dark PCM
   Backdrop blur + carte navy + bordure cyan + inputs cohérents
   ========================================================= */
/* Backdrop : blur fort + voile semi-transparent (sinon le blur ne se voit pas) */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show,
body.modal-open .modal-backdrop {
    background-color: rgba(2,6,20,0.55) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
            backdrop-filter: blur(16px) saturate(160%) !important;
    opacity: 1 !important;
}

/* Carte modal */
#modalGeneratePassword .modal-dialog {
    max-width: 520px !important;
    margin: 60px auto !important;
}
#modalGeneratePassword .modal-content {
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 60%, #08122e 100%) !important;
    background-color: #0f1d3f !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6),
                0 0 0 1px rgba(0,154,255,0.08) inset !important;
    overflow: hidden !important;
    color: #cfe1ff !important;
}
/* Pas de barre cyan en haut */
#modalGeneratePassword .modal-content::before { content: none !important; display: none !important; }

/* Header */
#modalGeneratePassword .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(98,152,254,0.15) !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#modalGeneratePassword .modal-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
}
/* Close button */
#modalGeneratePassword .modal-header .close,
#modalGeneratePassword .modal-header button.close {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 8px !important;
    color: #8fadc9 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, border-color .15s, color .15s !important;
    margin: 0 !important;
}
#modalGeneratePassword .modal-header .close:hover {
    background: rgba(239,68,68,0.10) !important;
    border-color: rgba(239,68,68,0.40) !important;
    color: #ff8a80 !important;
}
#modalGeneratePassword .modal-header .close i {
    font-size: 14px !important;
}

/* Body */
#modalGeneratePassword .modal-body {
    background: transparent !important;
    padding: 22px !important;
    color: #cfe1ff !important;
}
#modalGeneratePassword .modal-body .form-group {
    margin-bottom: 16px !important;
}
#modalGeneratePassword .modal-body label.control-label {
    color: #8fadc9 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding-top: 12px !important;
}
#modalGeneratePassword .modal-body input.form-control {
    background-color: rgba(0,8,30,0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
#modalGeneratePassword .modal-body input.form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background-color: rgba(0,8,30,0.70) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}
#modalGeneratePassword #inputGeneratePasswordOutput {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace !important;
    font-size: 13.5px !important;
    letter-spacing: 0.5px !important;
    color: #4ade80 !important;
    font-weight: 600 !important;
}
/* Body buttons (Générer nouveau / Copier) */
#modalGeneratePassword .modal-body .btn.btn-default.btn-sm {
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    margin-right: 6px !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
#modalGeneratePassword .modal-body .btn.btn-default.btn-sm:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
#modalGeneratePassword .modal-body .btn i {
    margin-right: 6px !important;
}

/* Alert error — propre, icône SVG inline via CSS, alignement flex */
#modalGeneratePassword .alert-danger,
#modalGeneratePassword .alert.alert-lagom.alert-danger,
#modalGeneratePassword #generatePwLengthError {
    background: rgba(239,68,68,0.08) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    border-radius: 9px !important;
    color: #ff8a80 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 10px 14px 10px 38px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    line-height: 1.45 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff8a80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 12px !important;
    background-size: 16px 16px !important;
}
/* Masque toute icône Lagom natif (lm, fa, ls) dans cette alert */
#modalGeneratePassword .alert-danger::before,
#modalGeneratePassword .alert.alert-lagom.alert-danger::before,
#modalGeneratePassword .alert-danger i,
#modalGeneratePassword .alert-danger .lm,
#modalGeneratePassword .alert-danger .fa,
#modalGeneratePassword .alert-danger .ls {
    display: none !important;
    content: none !important;
}

/* Footer */
#modalGeneratePassword .modal-footer {
    background: rgba(0,8,30,0.30) !important;
    border-top: 1px solid rgba(98,152,254,0.15) !important;
    padding: 14px 22px !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}
#modalGeneratePassword .modal-footer .btn.btn-default {
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s !important;
}
#modalGeneratePassword .modal-footer .btn.btn-default:hover {
    background: rgba(25,102,255,0.12) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
#modalGeneratePassword .modal-footer .btn.btn-primary {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px -2px rgba(25,102,255,0.30) !important;
    transition: filter .15s !important;
}
#modalGeneratePassword .modal-footer .btn.btn-primary:hover {
    filter: brightness(1.10) !important;
}

/* =========================================================
   18. Pricing / Product cards
   ========================================================= */
.product-card,
.product-pricing,
.lagom-product,
.product {
    position: relative;
    border-radius: var(--pcm-radius);
    transition: transform var(--pcm-dur) var(--pcm-ease),
                box-shadow var(--pcm-dur) var(--pcm-ease);
}

.product-card:hover,
.product-pricing:hover,
.lagom-product:hover,
.product:hover {
    transform: translateY(-8px);
    box-shadow: var(--pcm-shadow-lg);
}

/* =========================================================
   19. Footer
   ========================================================= */
.main-footer a,
footer a {
    transition: color var(--pcm-dur-fast) var(--pcm-ease),
                transform var(--pcm-dur-fast) var(--pcm-ease);
}

.main-footer a:hover,
footer a:hover {
    transform: translateY(-1px);
    color: var(--brand-primary, #1062fe);
}

/* =========================================================
   20. Tooltips
   ========================================================= */
.tooltip {
    animation: pcm-fade-up .18s var(--pcm-ease);
}

/* =========================================================
   21. Accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .site-banner::before,
    .banner.banner-secondary::before { animation: none; }
    [data-pcm-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   21.5. PAGE LOGIN — split-screen marketing/form (cohérent home)
   ========================================================= */

body.page-login,
body.page-clientregister,
body.register-page {
    background: #050d24 !important;
    color: #ffffff;
}

body.page-login::before,
body.page-clientregister::before,
body.register-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(16, 98, 254, .22), transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(0, 154, 255, .18), transparent 55%);
}

body.page-login .login-header,
body.register-page .login-header,
body.page-clientregister .login-header {
    display: none !important;
}

body.page-login .app-main,
body.page-login .main-body,
body.page-login .main-body > .container,
body.page-login .login,
body.page-login .main-content,
body.page-login .main-body-has-sidebar,
body.page-login .main-body-has-sidebar .main-body-content,
body.register-page .app-main,
body.register-page .main-body,
body.register-page .main-body > .container,
body.register-page .login,
body.register-page .main-content {
    background: transparent !important;
    max-width: none !important;
    width: 100% !important;
}

body.page-login .main-body,
body.register-page .main-body {
    padding: 40px 24px !important;
}

/* ============ LOGIN : split-screen 2 colonnes ============ */
body.page-login .login-wrapper {
    max-width: 1040px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0;
    align-items: stretch;
    min-height: 580px;
    background: #0c1733 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .65) !important;
    animation: pcm-fade-up .6s var(--pcm-ease) both;
}

/* ASIDE marketing gauche */
body.page-login .pcm-login-aside {
    position: relative;
    padding: 48px 40px;
    background: linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    color: #ffffff;
    overflow: hidden;
}

body.page-login .pcm-login-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 14%, rgba(0, 154, 255, .35), transparent 45%),
        radial-gradient(circle at 14% 88%, rgba(255, 255, 255, .14), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

body.page-login .pcm-login-aside > * {
    position: relative;
    z-index: 1;
}

body.page-login .pcm-login-logo img {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
}

body.page-login .pcm-login-hero h2 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -.01em;
    text-wrap: balance;
}

body.page-login .pcm-login-hero h2 .accent {
    background: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .82);
    color: rgba(255, 255, 255, .82);
}

body.page-login .pcm-login-hero p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
    margin: 0;
    font-size: .94rem;
}

body.page-login .pcm-login-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

body.page-login .pcm-login-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    font-weight: 500;
}

body.page-login .pcm-login-features li .check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
}

body.page-login .pcm-login-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    flex-wrap: wrap;
}

body.page-login .pcm-login-trust .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* FORM côté droit */
body.page-login .pcm-login-main {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

body.page-login .login-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body.page-login .login-title {
    text-align: left;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 6px !important;
    color: #ffffff;
    letter-spacing: -.01em;
    line-height: 1.3;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    white-space: normal;
}

body.page-login .login-title::after {
    content: "Accédez à vos services en quelques secondes.";
    display: block;
    margin-top: 6px;
    margin-bottom: 24px;
    font-size: .88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .58);
    letter-spacing: 0;
    line-height: 1.5;
}

body.page-login .login-form .form-group { margin-bottom: 16px; }

body.page-login .login-form label {
    display: block !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    letter-spacing: .02em;
    text-transform: none !important;
    text-align: left !important;
}

body.page-login .login-form label a {
    color: rgba(255, 255, 255, .55);
    font-size: .78rem;
    font-weight: 500;
}

body.page-login .login-form label a:hover {
    color: var(--brand-primary-lighter, #6298fe);
}

body.page-login .form-control,
body.page-login .input-lg {
    width: 100%;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    font-size: .92rem !important;
    box-shadow: none !important;
    height: auto !important;
}

body.page-login .form-control::placeholder { color: rgba(255, 255, 255, .35); }

body.page-login .form-control:focus {
    border-color: rgba(25, 102, 255, .7) !important;
    background: rgba(25, 102, 255, .06) !important;
    box-shadow: 0 0 0 3px rgba(25, 102, 255, .18) !important;
    outline: none;
}

body.page-login .login-form .checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .8) !important;
    font-size: .88rem !important;
    cursor: pointer;
    margin: 4px 0 18px;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.page-login .login-form input[type="checkbox"],
body.page-login .icheck-control {
    accent-color: var(--brand-primary, #1062fe);
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
}

body.page-login .login-form .btn-block {
    width: 100%;
    padding: 12px 18px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin-top: 4px;
    border-radius: 10px !important;
}

body.page-login .login-divider {
    margin: 22px 0 !important;
    color: rgba(255, 255, 255, .4);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent !important;
}

body.page-login .login-divider span:first-child,
body.page-login .login-divider span:last-child {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

/* Bouton Google : retire les bordures blanches du wrapper Google natif */
body.page-login .g_id_signin,
body.register-page .g_id_signin,
body.page-clientregister .g_id_signin {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

body.page-login .g_id_signin > div,
body.register-page .g_id_signin > div,
body.page-clientregister .g_id_signin > div,
body.page-login .g_id_signin iframe,
body.register-page .g_id_signin iframe,
body.page-clientregister .g_id_signin iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.page-login .social-signin-btns,
body.register-page .social-signin-btns,
body.page-clientregister .social-signin-btns {
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Si .g_id_signin existe (= bouton Google natif rendu par JS Google),
   on annule TOUT le style .btn pour ne pas avoir un double encadrement */
body.page-login .g_id_signin.btn-social,
body.register-page .g_id_signin.btn-social,
body.page-clientregister .g_id_signin.btn-social,
body.page-login .btn.btn-social.btn-google.g_id_signin,
body.register-page .btn.btn-social.btn-google.g_id_signin,
body.page-clientregister .btn.btn-social.btn-google.g_id_signin {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    min-height: 0 !important;
    color: inherit !important;
}

/* Le bouton blanc rendu par Google JS prend toute la largeur sans encadrement */
body.page-login .g_id_signin > div,
body.register-page .g_id_signin > div,
body.page-clientregister .g_id_signin > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Variante pure .btn-google (sans .g_id_signin) reste stylée */
body.page-login .btn-social.btn-google:not(.g_id_signin),
body.register-page .btn-social.btn-google:not(.g_id_signin),
body.page-clientregister .btn-social.btn-google:not(.g_id_signin) {
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    font-weight: 500;
    font-size: .9rem;
    box-shadow: none !important;
}

body.page-login .login-footer {
    text-align: center;
    margin-top: 22px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .65);
    font-size: .9rem;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: auto !important;
    display: block !important;
    line-height: 1.5;
}

body.page-login .login-footer a {
    color: var(--brand-primary-lighter, #6298fe) !important;
    font-weight: 600;
    text-decoration: none;
}

body.page-login .login-footer a:hover { color: #ffffff !important; }

@media (max-width: 880px) {
    body.page-login .login-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        min-height: auto;
    }
    body.page-login .pcm-login-aside { padding: 32px 28px; }
    body.page-login .pcm-login-main { padding: 32px 28px; }
}

/* ============ REGISTER : split-screen 2 colonnes comme login ============ */
body.register-page .login-wrapper,
body.page-clientregister .login-wrapper {
    max-width: 1040px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0;
    align-items: stretch;
    background: #0c1733 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .65) !important;
    animation: pcm-fade-up .6s var(--pcm-ease) both;
}

/* ASIDE register : flex column compact, illustration prend l'espace dispo et se centre */
body.register-page .pcm-login-aside,
body.page-clientregister .pcm-login-aside {
    position: relative;
    padding: 28px 32px 24px;
    background: linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #ffffff;
    overflow: hidden;
}

body.register-page .pcm-login-top,
body.page-clientregister .pcm-login-top {
    display: flex;
    flex-direction: column;
    gap: 36px;
    flex-shrink: 0;
}

body.register-page .pcm-login-bottom,
body.page-clientregister .pcm-login-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    margin-top: -28px;
}

/* Décor subtil pattern de points */
body.register-page .pcm-login-aside--illustration::before,
body.page-clientregister .pcm-login-aside--illustration::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    opacity: .35;
    pointer-events: none;
}

/* Conteneur de l'illustration : prend tout l'espace dispo + centre */
body.register-page .pcm-login-illustration,
body.page-clientregister .pcm-login-illustration {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

body.register-page .pcm-illu-svg,
body.page-clientregister .pcm-illu-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 100%;
    display: block;
}

/* ===== Animations SVG ===== */

/* Orbite : rotation lente */
.pcm-illu-orbit {
    transform-origin: 160px 100px;
    animation: pcm-orbit-rotate 60s linear infinite;
}
@keyframes pcm-orbit-rotate {
    to { transform: rotate(360deg); }
}

/* Lignes de données : draw effect */
.pcm-data-line {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: pcm-line-draw 4s ease-in-out infinite;
}
.pcm-data-line-1 { animation-delay: 0s; }
.pcm-data-line-2 { animation-delay: .4s; }
.pcm-data-line-3 { animation-delay: .8s; }
.pcm-data-line-4 { animation-delay: 1.2s; }
@keyframes pcm-line-draw {
    0%   { stroke-dashoffset: 140; opacity: 0; }
    20%  { opacity: 1; }
    50%  { stroke-dashoffset: 0;   opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: -140; opacity: 0; }
}

/* Particules : pulse */
.pcm-dot {
    transform-origin: center;
    transform-box: fill-box;
    animation: pcm-dot-pulse 3s ease-in-out infinite;
}
.pcm-dot-1 { animation-delay: 0s; }
.pcm-dot-2 { animation-delay: .5s; }
.pcm-dot-3 { animation-delay: 1s; }
.pcm-dot-4 { animation-delay: 1.5s; }
.pcm-dot-5 { animation-delay: 2s; }
.pcm-dot-6 { animation-delay: 2.5s; }
@keyframes pcm-dot-pulse {
    0%, 100% { opacity: .35; transform: scale(.6); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* Cloud : flottement vertical doux */
.pcm-illu-cloud {
    transform-origin: 160px 100px;
    transform-box: fill-box;
    animation: pcm-cloud-float 5s ease-in-out infinite;
}
@keyframes pcm-cloud-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Cadenas : pulse léger */
.pcm-illu-lock {
    transform-origin: center;
    animation: pcm-lock-pulse 3s ease-in-out infinite;
}
@keyframes pcm-lock-pulse {
    0%, 100% { transform: translate(160px, 95px) scale(1); }
    50%      { transform: translate(160px, 92px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .pcm-illu-orbit,
    .pcm-data-line,
    .pcm-dot,
    .pcm-illu-cloud,
    .pcm-illu-lock {
        animation: none !important;
    }
}

body.register-page .pcm-login-aside::after,
body.page-clientregister .pcm-login-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 14%, rgba(0, 154, 255, .35), transparent 45%),
        radial-gradient(circle at 14% 88%, rgba(255, 255, 255, .14), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

body.register-page .pcm-login-aside > *,
body.page-clientregister .pcm-login-aside > * {
    position: relative;
    z-index: 1;
}

body.register-page .pcm-login-logo img,
body.page-clientregister .pcm-login-logo img {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
}

body.register-page .pcm-login-hero h2,
body.page-clientregister .pcm-login-hero h2 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -.01em;
    text-wrap: balance;
}

body.register-page .pcm-login-hero h2 .accent,
body.page-clientregister .pcm-login-hero h2 .accent {
    background: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .82);
    color: rgba(255, 255, 255, .82);
}

body.register-page .pcm-login-hero p,
body.page-clientregister .pcm-login-hero p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
    margin: 0;
    font-size: .94rem;
}

body.register-page .pcm-login-features,
body.page-clientregister .pcm-login-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

body.register-page .pcm-login-features li,
body.page-clientregister .pcm-login-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    font-weight: 500;
}

body.register-page .pcm-login-features li .check,
body.page-clientregister .pcm-login-features li .check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
}

body.register-page .pcm-login-trust,
body.page-clientregister .pcm-login-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    flex-wrap: wrap;
}

body.register-page .pcm-login-trust .trust-item,
body.page-clientregister .pcm-login-trust .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* MAIN form droite — compact */
body.register-page .pcm-login-main,
body.page-clientregister .pcm-login-main {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: transparent;
}

/* Cacher l'ancien brand register (logo solo) si présent */
body.register-page .pcm-register-brand,
body.page-clientregister .pcm-register-brand {
    display: none !important;
}

body.register-page .login-body,
body.page-clientregister .login-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* === CACHER la section "Adresse de facturation" sur register === */
/* L'adresse sera demandée seulement à la commande */
body.register-page .pcm-hide-section,
body.page-clientregister .pcm-hide-section {
    display: none !important;
}

body.register-page .login-title,
body.page-clientregister .login-title {
    text-align: left;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 2px !important;
    color: #ffffff;
    letter-spacing: -.01em;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

body.register-page .login-title::after,
body.page-clientregister .login-title::after {
    content: "Créez votre compte en moins d'une minute.";
    display: block;
    margin-top: 2px;
    margin-bottom: 12px;
    font-size: .78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .58);
    line-height: 1.4;
}

body.register-page .loginForm h2,
body.register-page .loginForm h3,
body.page-clientregister .loginForm h2,
body.page-clientregister .loginForm h3,
body.register-page h2.section-title,
body.page-clientregister h2.section-title {
    color: rgba(255, 255, 255, .55) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    margin: 12px 0 8px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body.register-page .loginForm h2:first-of-type,
body.register-page h2.section-title:first-of-type,
body.page-clientregister .loginForm h2:first-of-type,
body.page-clientregister h2.section-title:first-of-type {
    margin-top: 0 !important;
}

body.register-page .loginForm h2:first-of-type,
body.page-clientregister .loginForm h2:first-of-type {
    margin-top: 0;
}

body.register-page .loginForm .row,
body.page-clientregister .loginForm .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}

body.register-page .loginForm .col-md-6,
body.page-clientregister .loginForm .col-md-6 {
    padding-left: 6px;
    padding-right: 6px;
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

body.register-page .loginForm .form-group,
body.page-clientregister .loginForm .form-group {
    margin-bottom: 8px;
}

body.register-page .loginForm label,
body.register-page .form-horizontal .control-label,
body.register-page .label-required,
body.page-clientregister .loginForm label,
body.page-clientregister .label-required {
    display: inline-block !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .76rem !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    letter-spacing: .02em;
    text-transform: none !important;
    text-align: left !important;
    padding: 0 !important;
    width: auto !important;
    position: relative;
    line-height: 1.3;
}

body.register-page .label-required::after,
body.page-clientregister .label-required::after {
    content: " *" !important;
    color: #e56c74 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: 4px !important;
    font-weight: 600;
    display: inline;
}

body.register-page .form-control,
body.page-clientregister .form-control,
body.register-page select.form-control,
body.page-clientregister select.form-control {
    width: 100%;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    font-size: .88rem !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4;
}

body.register-page .form-control::placeholder,
body.page-clientregister .form-control::placeholder {
    color: rgba(255, 255, 255, .35);
}

body.register-page .form-control:focus,
body.page-clientregister .form-control:focus {
    border-color: rgba(25, 102, 255, .7) !important;
    background: rgba(25, 102, 255, .06) !important;
    box-shadow: 0 0 0 3px rgba(25, 102, 255, .18) !important;
    outline: none;
}

/* Phone intl-tel-input : éviter le chevauchement drapeau / code / placeholder */
body.register-page .iti,
body.page-clientregister .iti,
body.register-page .iti--allow-dropdown,
body.page-clientregister .iti--allow-dropdown {
    width: 100% !important;
    display: block !important;
    position: relative;
}

body.register-page input[type="tel"],
body.page-clientregister input[type="tel"],
body.register-page .iti--allow-dropdown input,
body.page-clientregister .iti--allow-dropdown input,
body.register-page .iti--allow-dropdown input[type=tel],
body.page-clientregister .iti--allow-dropdown input[type=tel],
body.register-page .iti--container input,
body.page-clientregister .iti--container input {
    padding-left: 100px !important;
}

body.register-page .iti__flag-container,
body.page-clientregister .iti__flag-container {
    z-index: 2;
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

body.register-page .iti__selected-flag,
body.page-clientregister .iti__selected-flag {
    background: transparent !important;
    padding: 0 12px 0 14px !important;
    gap: 6px;
}

body.register-page .iti__selected-dial-code,
body.page-clientregister .iti__selected-dial-code {
    color: rgba(255, 255, 255, .75) !important;
    margin-left: 6px;
}

body.register-page .iti__arrow,
body.page-clientregister .iti__arrow {
    border-top-color: rgba(255, 255, 255, .5) !important;
    margin-left: 6px;
}

/* Mot de passe : label seul en haut, hint discret sous l'input (ne désaligne plus les 2 cols) */
body.register-page .password-content,
body.register-page .password-content-top,
body.register-page .password-content-group,
body.page-clientregister .password-content,
body.page-clientregister .password-content-top {
    display: block !important;
    margin-bottom: 6px;
}

body.register-page .password-content label,
body.page-clientregister .password-content label {
    margin: 0 0 6px !important;
    display: inline-block;
}

/* Le hint "au moins 5 caractères" : caché ici, sera affiché sous l'input via ::after */
body.register-page .password-content .password-content-text,
body.register-page .password-content .text-small,
body.register-page .password-content .text-lighter,
body.page-clientregister .password-content .password-content-text {
    display: none !important;
}

/* Pas de hint sous l'input : on s'appuie sur la bulle info (i.ls-info-circle déjà dans le HTML) */
/* L'icône info à côté du label garde son tooltip natif WHMCS avec les règles de mot de passe */
body.register-page .password-content i[data-toggle="tooltip"],
body.page-clientregister .password-content i[data-toggle="tooltip"] {
    display: inline-block !important;
    color: rgba(255, 255, 255, .55) !important;
    margin-left: 6px;
    font-size: .9rem;
    cursor: help;
    vertical-align: middle;
}

/* Sépare le bouton "Générer un mot de passe" du bloc password en pleine largeur */
body.register-page .password-content.password-content-group:has(.generate-password),
body.register-page .password-content-group:has(.btn) {
    width: 100%;
    margin-top: 8px;
}

/* Le password input dans .input-password-strenght : full width */
body.register-page .input-password-strenght,
body.page-clientregister .input-password-strenght {
    width: 100%;
    display: block;
    margin: 0 !important;
}

body.register-page .progress#passwordStrengthBar {
    margin-top: 6px;
    height: 4px;
    background: rgba(255, 255, 255, .08);
    border-radius: 2px;
}

/* Supprimer le bouton "Générer un mot de passe" */
body.register-page .btn.btn-default.btn-sm.generate-password,
body.register-page button.generate-password,
body.register-page .password-content-group:has(.generate-password),
body.register-page #btnGeneratePassword,
body.register-page button[data-target="#modalGeneratePassword"] {
    display: none !important;
}

/* Aligne verticalement les 2 inputs Mot de passe / Confirmer le mot de passe */
body.register-page #containerPassword,
body.page-clientregister #containerPassword {
    align-items: end;
}

body.register-page #containerPassword .col-md-6,
body.page-clientregister #containerPassword .col-md-6 {
    display: flex;
    flex-direction: column;
}

body.register-page #containerPassword .form-group,
body.page-clientregister #containerPassword .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

body.register-page #containerPassword label,
body.page-clientregister #containerPassword label {
    min-height: 18px;
    margin-bottom: 6px !important;
}

/* === Œil pour voir le mot de passe (login + register) === */
.pcm-password-wrap {
    position: relative;
}

.pcm-password-wrap input[type="password"],
.pcm-password-wrap input[type="text"] {
    padding-right: 44px !important;
}

.pcm-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: color .15s ease, background-color .15s ease;
    font-size: 1rem;
    line-height: 1;
    z-index: 2;
}

.pcm-password-toggle:hover {
    color: var(--brand-primary-lighter, #6298fe);
    background: rgba(25, 102, 255, .1);
}

.pcm-password-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.pcm-password-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.register-page #btnGeneratePassword,
body.register-page button[data-target="#modalGeneratePassword"] {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: .82rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    margin-top: 8px;
    font-weight: 500;
}

/* === Toggle "Recevoir des emails" + container === */
body.register-page #optInLabel,
body.register-page .marketing-emails-opt-in-container,
body.register-page .panel.panel-switch {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0;
    box-shadow: none !important;
    max-width: none !important;
}

body.register-page .panel.panel-switch .panel-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.register-page .switch-label {
    font-size: .85rem;
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
}

/* Toggle Lagom : reconstruire le slider rectangulaire visible */
body.register-page .switch,
body.register-page label.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

body.register-page .switch__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

body.register-page .switch__container {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background-color .25s ease;
    flex: 0 0 44px;
}

body.register-page .switch__checkbox:checked + .switch__container {
    background: var(--brand-primary, #1062fe);
    border-color: var(--brand-primary, #1062fe);
}

body.register-page .switch__handle {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: left .25s ease, transform .25s ease;
}

body.register-page .switch__checkbox:checked + .switch__container .switch__handle {
    left: calc(100% - 20px);
}

/* Le label texte "ON/OFF" généré par .switch--text : caché pour rester clean */
body.register-page .switch.switch--text::after,
body.register-page .switch.switch--text::before {
    display: none !important;
}

/* === Checkbox "J'ai lu et j'accepte les Conditions d'utilisation" === */
body.register-page .checkbox,
body.page-clientregister .checkbox {
    display: block;
    margin: 10px 0;
}

body.register-page .checkbox > label,
body.page-clientregister .checkbox > label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: .88rem;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.5;
}

body.register-page .checkbox > label input[type="checkbox"],
body.register-page .checkbox > label .icheck-control,
body.page-clientregister .checkbox > label input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    accent-color: var(--brand-primary, #1062fe);
    cursor: pointer;
}

body.register-page .checkbox > label .label-required,
body.page-clientregister .checkbox > label .label-required {
    display: inline;
    color: rgba(255, 255, 255, .85) !important;
    font-size: .88rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1.5;
}

body.register-page .checkbox > label .label-required a,
body.page-clientregister .checkbox > label .label-required a {
    color: var(--brand-primary-lighter, #6298fe);
    font-weight: 600;
    text-decoration: none;
}

body.register-page .checkbox > label .label-required::after,
body.page-clientregister .checkbox > label .label-required::after {
    content: " *" !important;
    color: #e56c74 !important;
    position: static !important;
    margin-left: 2px !important;
    font-weight: 600;
}

/* Section "Joignez-vous à notre liste d'envoi" : plus petite et discrète */
body.register-page .section.section-sm .section-title,
body.page-clientregister .section.section-sm .section-title,
body.register-page h2.section-title:has(+ p.section-desc),
body.register-page .loginForm h2:last-of-type {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .75) !important;
    margin: 18px 0 4px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.register-page .section-desc,
body.page-clientregister .section-desc {
    font-size: .72rem !important;
    color: rgba(255, 255, 255, .42) !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    font-style: normal;
    max-width: 100%;
}

/* Bulle info ajoutée à côté des titres de section (mailing list, etc.) */
body.register-page .pcm-info-tooltip,
body.page-clientregister .pcm-info-tooltip {
    display: inline-block;
    margin-left: 6px;
    color: rgba(255, 255, 255, .45);
    cursor: help;
    font-size: .85em;
    vertical-align: baseline;
    transition: color .15s ease;
}

body.register-page .pcm-info-tooltip:hover,
body.page-clientregister .pcm-info-tooltip:hover {
    color: var(--brand-primary-lighter, #6298fe);
}

body.register-page .form-actions { margin-top: 14px; }

body.register-page .form-actions .btn,
body.register-page button[type="submit"] {
    width: 100%;
    padding: 11px 18px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
}

body.register-page .btn-social,
body.register-page .btn-google {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    width: 100%;
}

body.register-page .login-divider {
    margin: 14px 0 !important;
    color: rgba(255, 255, 255, .4);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: 12px;
}

body.register-page .login-divider span:first-child,
body.register-page .login-divider span:last-child {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

body.register-page .login-footer,
body.page-clientregister .login-footer {
    text-align: center;
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .65);
    font-size: .85rem;
    background: transparent !important;
    min-height: auto !important;
    display: block !important;
}

body.register-page .login-footer a,
body.page-clientregister .login-footer a {
    color: var(--brand-primary-lighter, #6298fe) !important;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 540px) {
    body.register-page .login-body,
    body.page-clientregister .login-body {
        padding: 26px 22px !important;
    }
    body.register-page .loginForm .col-md-6,
    body.page-clientregister .loginForm .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================================================
   22. Print
   ========================================================= */
@media print {
    .site-banner::before,
    .banner.banner-secondary::before { display: none; }
    .feature::after { display: none; }
    * { box-shadow: none !important; transform: none !important; }
}

/* ============================================================
   Page /clientarea/service/<id>/action/manage — Comptes Open-Xchange
   Style le DOM EXISTANT (template store/ox/manage.tpl)
   ZÉRO modification DOM — JS Lagom natif continue à fonctionner.
   ============================================================ */

/* Panel principal */
body .panel.panel-manage-ox {
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px -8px rgba(0,0,0,0.40) !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
}
body .panel-manage-ox .panel-heading {
    background: linear-gradient(135deg, rgba(25,102,255,0.10), rgba(0,154,255,0.04)) !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
body .panel-manage-ox .panel-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
body .panel-manage-ox .panel-heading-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
}
body .panel-manage-ox .panel-heading-actions .btn.btn-default {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 9px !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body .panel-manage-ox .panel-heading-actions .btn.btn-default:hover:not([disabled]) {
    background: rgba(25,102,255,0.18) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body .panel-manage-ox .panel-heading-actions #btnAddAccount {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40) !important;
}
body .panel-manage-ox .panel-heading-actions #btnAddAccount:hover {
    filter: brightness(1.10) !important;
}

/* Table des comptes */
body .ox-table-accounts {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    color: #cfe1ff !important;
}
body .ox-table-accounts thead {
    background: rgba(0,8,30,0.40) !important;
}
body .ox-table-accounts thead th {
    color: var(--cyan-soft, #6298fe) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
}
body .ox-table-accounts tbody tr {
    background: transparent !important;
    transition: background .12s !important;
}
body .ox-table-accounts tbody.account-entry {
    cursor: pointer !important;
}
body .ox-table-accounts tbody.account-entry > tr > td {
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
}
body .ox-table-accounts tbody.account-entry:hover > tr > td {
    background: rgba(25,102,255,0.06) !important;
}
body .ox-table-accounts tbody.account-entry .account {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
body .ox-table-accounts tbody.account-entry > tr > td:first-child {
    position: relative !important;
}

/* Aliases pill bouton */
body .ox-table-accounts .email-aliases.btn {
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #6298fe !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .15s, color .15s !important;
}
body .ox-table-accounts .email-aliases.btn:hover {
    background: rgba(25,102,255,0.20) !important;
    color: #ffffff !important;
}
body .ox-table-accounts .alias-count {
    background: rgba(0,154,255,0.20) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 1px 8px !important;
    font-weight: 800 !important;
}

/* Quota / .limit */
body .ox-table-accounts .limit {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'SF Mono', Menlo, monospace !important;
    font-size: 14px !important;
}

/* Actions buttons (Gérer / Mot de passe / Supprimer) */
body .ox-table-accounts .btn-group .btn.btn-default,
body .ox-table-accounts .btn-group .btn.btn-default.btn-sm {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body .ox-table-accounts .btn-group .btn.btn-default:hover {
    background: rgba(25,102,255,0.18) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
body .ox-table-accounts .btn.btn-danger,
body .ox-table-accounts .btn.btn-danger.btn-sm {
    background: rgba(239,68,68,0.10) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    color: #ff8a80 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s, color .15s !important;
}
body .ox-table-accounts .btn.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Aliases body — sous-table imbriquée */
body .ox-table-accounts tbody.aliases-body {
    background: rgba(0,8,30,0.30) !important;
}
body .ox-table-accounts tbody.aliases-body > tr > td {
    padding: 0 !important;
    border: 0 !important;
}
body .ox-table-accounts tbody.aliases-body .table {
    background: transparent !important;
    margin: 0 !important;
}
body .ox-table-accounts tbody.aliases-body .table tr.alias-entry > td {
    padding: 10px 18px 10px 40px !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.08) !important;
    color: #cfe1ff !important;
    font-size: 13px !important;
}
body .ox-table-accounts tbody.aliases-body .table tr.alias-entry .alias {
    color: #6298fe !important;
    font-weight: 700 !important;
}
body .ox-table-accounts tbody.aliases-body .btn.btn-default.btn-xs {
    background: transparent !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
    color: #ff8a80 !important;
    border-radius: 7px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
body .ox-table-accounts tbody.aliases-body .btn.btn-default.btn-xs:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #ffffff !important;
}

/* Form création alias */
body .ox-table-accounts tr.create-alias > td {
    padding: 12px 18px 12px 40px !important;
    background: rgba(0,8,30,0.40) !important;
    border-top: 1px solid rgba(98,152,254,0.10) !important;
}
body .ox-table-accounts tr.create-alias .input-group {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body .ox-table-accounts tr.create-alias .input-group:focus-within {
    border-color: rgba(0,154,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}
body .ox-table-accounts tr.create-alias .input-group input.form-control {
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    flex: 1 !important;
    min-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
body .ox-table-accounts tr.create-alias .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    background: transparent !important;
}
body .ox-table-accounts tr.create-alias .input-group-text {
    background: rgba(98,152,254,0.10) !important;
    border: 0 !important;
    color: #6298fe !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
}
body .ox-table-accounts tr.create-alias .btn.ox-create-alias {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Empty state / Loading / No-accounts */
body .ox-table-accounts tr.no-accounts > th,
body .ox-table-accounts tr.loading > th {
    text-align: center !important;
    padding: 32px 20px !important;
    color: #8fadc9 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Bottom config tabs (retrieval / dav / usage / migration) */
body .panel-default > .panel-nav > ul.nav.nav-tabs {
    background: transparent !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 0 22px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 4px !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: #8fadc9 !important;
    padding: 14px 16px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color .15s, border-color .15s !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a:hover {
    color: #ffffff !important;
    background: transparent !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a.active {
    color: #ffffff !important;
    border-bottom: 2px solid var(--cyan, #009AFF) !important;
    background: transparent !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a i {
    color: var(--cyan-soft, #6298fe) !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a.active i {
    color: var(--cyan, #009AFF) !important;
}

/* Force .hidden = display:none partout */
body .alert.hidden,
body .tab-pane.hidden,
body div.hidden:not(.app-nav-menu):not(.app-nav),
body span.hidden,
body li.hidden,
body tr.hidden,
body tbody.hidden,
body input.hidden {
    display: none !important;
}

/* Config tables — SCOPÉ aux 2 tables 2 colonnes uniquement (retrieval / dav) */
body .panel-default .tab-content {
    background: transparent !important;
}
body .panel-default .tab-content .panel-body {
    background: transparent !important;
    color: #cfe1ff !important;
    padding: 18px 22px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}
body #retrievalsettings .table,
body #davsettings .table {
    background: transparent !important;
    margin: 0 !important;
}
body #retrievalsettings .table > tbody > tr > td,
body #davsettings .table > tbody > tr > td {
    padding: 12px 22px !important;
    border-top: 1px solid rgba(98,152,254,0.10) !important;
    color: #cfe1ff !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body #retrievalsettings .table > tbody > tr > td:first-child,
body #davsettings .table > tbody > tr > td:first-child {
    color: #6298fe !important;
    font-weight: 700 !important;
    width: 40% !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
}
body #retrievalsettings .table > tbody > tr > td:nth-child(2),
body #davsettings .table > tbody > tr > td:nth-child(2) {
    color: #ffffff !important;
    font-family: 'SF Mono', Menlo, monospace !important;
    font-weight: 600 !important;
}
/* Instructions (#usage) : texte normal multi-lignes, JAMAIS en uppercase mini */
body #usage .table,
body #usage .table > tbody {
    background: transparent !important;
    margin: 0 !important;
}
body #usage .table > tbody > tr > td,
body #usage .table > tbody > tr > th,
body #tablePanelUsage tr > td {
    color: #cfe1ff !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    padding: 14px 22px !important;
    border-top: 1px solid rgba(98,152,254,0.10) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    width: auto !important;
    font-family: inherit !important;
}

/* Tabs : pas de wrap moche, underline propre */
body .panel-default > .panel-nav > ul.nav.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0 !important;
    padding: 0 14px !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a {
    padding: 14px 18px 12px !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
}
body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a.active {
    border-bottom: 2px solid var(--cyan, #009AFF) !important;
}

/* Alerts oxSuccess / oxLoadError */
body #oxSuccess.alert.alert-success {
    background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.04)) !important;
    border: 1px solid rgba(74,222,128,0.30) !important;
    color: #4ade80 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
body #oxLoadError.alert.alert-danger {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    color: #ff8a80 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

/* Modals OX (Add / Manage / SetPassword / Delete) */
body #modalAddAccount .modal-content,
body #modalManageAccount .modal-content,
body #modalSetPassword .modal-content,
body #modalDeleteAccount .modal-content,
body #modalDeleteAlias .modal-content {
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 60%, #08122e 100%) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.65) !important;
    color: #cfe1ff !important;
    overflow: hidden !important;
}
body #modalAddAccount .modal-header,
body #modalManageAccount .modal-header,
body #modalSetPassword .modal-header,
body #modalDeleteAccount .modal-header,
body #modalDeleteAlias .modal-header {
    background: linear-gradient(135deg, rgba(25,102,255,0.10), rgba(0,154,255,0.04)) !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
    padding: 18px 22px !important;
}
body #modalAddAccount .modal-title,
body #modalManageAccount .modal-title,
body #modalSetPassword .modal-title,
body #modalDeleteAccount .modal-title,
body #modalDeleteAlias .modal-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}
body #modalAddAccount .modal-header .close,
body #modalManageAccount .modal-header .close,
body #modalSetPassword .modal-header .close,
body #modalDeleteAccount .modal-header .close,
body #modalDeleteAlias .modal-header .close {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #8fadc9 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body #modalAddAccount .modal-header .close:hover {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.40) !important;
    color: #ff8a80 !important;
}
body #modalAddAccount .modal-body,
body #modalManageAccount .modal-body,
body #modalSetPassword .modal-body,
body #modalDeleteAccount .modal-body,
body #modalDeleteAlias .modal-body {
    padding: 22px !important;
    background: transparent !important;
    color: #cfe1ff !important;
}
body #modalAddAccount .modal-body label,
body #modalManageAccount .modal-body label,
body #modalSetPassword .modal-body label {
    color: #8fadc9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 7px !important;
    display: block !important;
}
body #modalAddAccount .modal-body input.form-control,
body #modalManageAccount .modal-body input.form-control,
body #modalSetPassword .modal-body input.form-control {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body #modalAddAccount .modal-body input.form-control:focus,
body #modalManageAccount .modal-body input.form-control:focus,
body #modalSetPassword .modal-body input.form-control:focus {
    border-color: rgba(0,154,255,0.55) !important;
    background: rgba(0,8,30,0.70) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
    outline: none !important;
}
body #modalAddAccount .input-group-addon {
    background: rgba(98,152,254,0.10) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-left: 0 !important;
    color: #6298fe !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 0 10px 10px 0 !important;
}
body #modalAddAccount .modal-footer,
body #modalManageAccount .modal-footer,
body #modalSetPassword .modal-footer,
body #modalDeleteAccount .modal-footer,
body #modalDeleteAlias .modal-footer {
    background: rgba(0,8,30,0.30) !important;
    border-top: 1px solid rgba(98,152,254,0.15) !important;
    padding: 14px 22px !important;
}
body #modalAddAccount .modal-footer .btn.btn-primary,
body #modalManageAccount .modal-footer .btn.btn-primary,
body #modalSetPassword .modal-footer .btn.btn-primary {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px -2px rgba(25,102,255,0.40) !important;
}

/* OX intro paragraphes */
body .panel-manage-ox + p,
body .section-body > p.m-b-0x,
body .section-body > p:not([class*="text-"]) {
    color: #cfe1ff !important;
}


/* Kill border-bottom natif Bootstrap sur TOUTES les .nav-tabs */
html body ul.nav.nav-tabs,
html body .nav.nav-tabs,
html body .panel-nav > .nav-tabs {
    border-bottom: 1px solid rgba(98,152,254,0.12) !important;
}
/* Cache les ::before / ::after pseudo-elements bizarres */
html body ul.nav.nav-tabs::before,
html body ul.nav.nav-tabs::after,
html body .nav-tabs::before,
html body .nav-tabs::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    height: 0 !important;
}
/* Force la police pour OX manage panel */
body .panel-manage-ox,
body .panel-manage-ox *,
body #retrievalsettings,
body #retrievalsettings *,
body #davsettings,
body #davsettings *,
body #usage,
body #usage *,
body #migration,
body #migration * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* Force la police monospace seulement sur les valeurs serveur IMAP/SMTP */
body #retrievalsettings .table > tbody > tr > td:nth-child(2),
body #davsettings .table > tbody > tr > td:nth-child(2),
body #retrievalsettings .table > tbody > tr > td:nth-child(2) *,
body #davsettings .table > tbody > tr > td:nth-child(2) * {
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace !important;
}

/* ===== Fix icône chevron-right cassée dans EMAIL ALIASES pill ===== */
html body .ox-table-accounts .email-aliases.btn > i.fas,
html body .ox-table-accounts .email-aliases.btn > i.fa,
html body .ox-table-accounts .email-aliases.btn > i.far {
    display: none !important;
}
html body .ox-table-accounts .email-aliases.btn::before {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #6298fe !important;
    border-bottom: 2px solid #6298fe !important;
    transform: rotate(-45deg) !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    transition: transform .15s !important;
}
/* Hover/clic : rotation chevron */
html body .ox-table-accounts tbody.account-entry.is-open .email-aliases.btn::before,
html body .ox-table-accounts .email-aliases.btn[aria-expanded="true"]::before {
    transform: rotate(45deg) !important;
}

/* ===== Fix double underline sur tabs Paramètres/Calendrier/Instructions/Migration ===== */
html body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a,
html body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a.active {
    position: relative !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a::after,
html body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
}
/* UN SEUL underline propre via ::after sur active */
html body .panel-default > .panel-nav > ul.nav.nav-tabs > li > a.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: -1px !important;
    height: 2px !important;
    background: var(--cyan, #009AFF) !important;
    border-radius: 2px !important;
    border: 0 !important;
}
/* Tue le border-bottom .nav-tabs natif pour pas qu'il fasse trait #2 */
html body .panel-default > .panel-nav > ul.nav.nav-tabs {
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
    position: relative !important;
}

/* ============================================================
   Enrichissements page OX manage (stats / filter / avatar / quota / QR)
   ============================================================ */

/* Stats card en haut */
.pcm-ox-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.pcm-ox-stat {
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 12px;
    padding: 14px 16px;
}
.pcm-ox-stat-label {
    color: #6298fe;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
}
.pcm-ox-stat-value {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.pcm-ox-stat-sub {
    color: #8fadc9;
    font-size: 11.5px;
    font-weight: 600;
}
.pcm-ox-stat-bar {
    height: 4px;
    background: rgba(98,152,254,0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.pcm-ox-stat-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1966FF, #009AFF);
    border-radius: 2px;
    transition: width .4s ease-out;
}

/* Filtre recherche */
.pcm-ox-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.20);
    border-bottom: 0;
    padding: 0 18px;
    transition: border-color .15s, box-shadow .15s;
}
.pcm-ox-filter:focus-within {
    border-color: rgba(0,154,255,0.45);
}
.pcm-ox-filter-icon {
    color: #6298fe;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pcm-ox-filter-input {
    flex: 1;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    padding: 12px 0 !important;
    font-size: 13.5px !important;
    outline: none !important;
    min-height: 42px !important;
}
.pcm-ox-filter-input::placeholder { color: #5a7494; }

/* Avatar lettrines */
.pcm-ox-avatar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-right: 12px;
    vertical-align: middle;
    text-transform: uppercase;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.30);
    flex-shrink: 0;
}

/* Quota barre */
.pcm-ox-quota-bar {
    height: 4px;
    background: rgba(98,152,254,0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
    max-width: 140px;
}
.pcm-ox-quota-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #009AFF);
    border-radius: 2px;
}
.pcm-ox-quota-sub {
    color: #6298fe;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

/* Bouton QR */
.pcm-ox-qr-btn.btn {
    background: rgba(98,152,254,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #6298fe !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 4px 0 0 !important;
}
.pcm-ox-qr-btn.btn:hover {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Modal QR */
.pcm-ox-qr-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; opacity: 0;
    transition: opacity .2s;
}
.pcm-ox-qr-modal.is-show { opacity: 1; }
.pcm-ox-qr-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,6,20,0.65);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
}
.pcm-ox-qr-card {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 100%);
    border: 1px solid rgba(98,152,254,0.30);
    border-radius: 18px;
    box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7);
    width: 100%; max-width: 420px;
    padding: 32px 28px 24px;
    text-align: center;
    transform: scale(0.96) translateY(20px);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.pcm-ox-qr-modal.is-show .pcm-ox-qr-card { transform: none; }
.pcm-ox-qr-close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(0,8,30,0.55); border: 1px solid rgba(98,152,254,0.30);
    color: #8fadc9; width: 32px; height: 32px;
    border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pcm-ox-qr-close svg { width: 14px; height: 14px; }
.pcm-ox-qr-close:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.40); color: #ff8a80; }
.pcm-ox-qr-title {
    color: #ffffff; font-size: 18px; font-weight: 800;
    letter-spacing: -0.02em; margin: 0 0 8px;
}
.pcm-ox-qr-sub {
    color: #8fadc9; font-size: 12.5px; line-height: 1.5;
    margin: 0 0 18px;
}
.pcm-ox-qr-sub b { color: #cfe1ff; font-weight: 700; }
.pcm-ox-qr-img {
    display: inline-block;
    padding: 14px;
    background: #ffffff;
    border-radius: 14px;
    margin: 0 0 18px;
    box-shadow: 0 4px 16px -4px rgba(0,154,255,0.30);
}
.pcm-ox-qr-img img { display: block; width: 260px; height: 260px; }
.pcm-ox-qr-info {
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    text-align: left;
}
.pcm-ox-qr-row {
    display: flex; justify-content: space-between;
    align-items: center; gap: 12px;
    padding: 4px 0;
    font-size: 12px;
}
.pcm-ox-qr-row + .pcm-ox-qr-row {
    border-top: 1px dashed rgba(98,152,254,0.15);
}
.pcm-ox-qr-row span {
    color: #6298fe; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    font-size: 10.5px;
}
.pcm-ox-qr-row b {
    color: #ffffff;
    font-family: 'SF Mono', Menlo, monospace;
    font-weight: 600; font-size: 12px;
}
.pcm-ox-qr-foot {
    color: #5a7494; font-size: 11px;
    line-height: 1.5; margin: 0;
}

/* Click-to-copy sur hostnames/ports */
.pcm-ox-copyable {
    border-bottom: 1px dashed rgba(98,152,254,0.30) !important;
    padding-bottom: 1px !important;
    transition: color .12s, border-color .12s !important;
}
.pcm-ox-copyable:hover {
    color: #009AFF !important;
    border-bottom-color: #009AFF !important;
}

/* ============================================================
   OX manage — features avancées : toolbar / sortable / bulk / DNS / mobileconfig
   ============================================================ */

/* Toolbar (Export CSV...) */
.pcm-ox-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 0 0 14px;
}
.pcm-ox-tb-btn {
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #cfe1ff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
}
.pcm-ox-tb-btn:hover {
    background: rgba(25,102,255,0.18);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
}
.pcm-ox-tb-btn svg { width: 14px; height: 14px; }

/* Sortable column arrows */
.pcm-ox-sort-arrow {
    margin-left: 6px;
    color: #6298fe;
    transition: opacity .15s;
}

/* Checkbox bulk */
.pcm-ox-checkbox {
    width: 16px; height: 16px;
    margin-right: 10px;
    accent-color: #009AFF;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Bulk bar (sticky bottom) */
.pcm-ox-bulk-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: linear-gradient(160deg, #0f1d3f, #0a1631);
    border: 1px solid rgba(0,154,255,0.40);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 16px 50px -16px rgba(0,154,255,0.40),
                0 0 0 1px rgba(0,154,255,0.20) inset;
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-width: 360px;
    animation: pcm-ox-bulk-in .25s cubic-bezier(.22,1,.36,1);
}
@keyframes pcm-ox-bulk-in {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.pcm-ox-bulk-count {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    flex: 1;
    min-width: 140px;
}
.pcm-ox-bulk-action {
    background: rgba(25,102,255,0.20);
    border: 1px solid rgba(98,152,254,0.40);
    color: #cfe1ff;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.pcm-ox-bulk-action:hover {
    background: rgba(25,102,255,0.35);
    color: #ffffff;
}
.pcm-ox-bulk-action.danger {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.40);
    color: #ff8a80;
}
.pcm-ox-bulk-action.danger:hover {
    background: linear-gradient(135deg, #ef4444, #f97316);
    border-color: transparent;
    color: #ffffff;
}
.pcm-ox-bulk-clear {
    background: transparent;
    border: 0;
    color: #8fadc9;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
    padding: 6px 8px;
}
.pcm-ox-bulk-clear:hover { color: #ffffff; }

/* ====== DNS Health Card — design premium PCM ====== */
.pcm-ox-dns-card {
    position: relative;
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 18px;
    padding: 24px 26px 22px;
    margin: 22px 0;
    overflow: hidden;
    box-shadow: 0 8px 30px -16px rgba(0,0,0,0.50);
}
.pcm-ox-dns-bg {
    position: absolute; inset: -2px;
    background: radial-gradient(60% 80% at 0% 0%, rgba(25,102,255,0.18), transparent 60%),
                radial-gradient(50% 60% at 100% 0%, rgba(0,154,255,0.10), transparent 65%);
    opacity: 0.7; pointer-events: none; z-index: 0;
}
.pcm-ox-dns-card > *:not(.pcm-ox-dns-bg) { position: relative; z-index: 1; }

.pcm-ox-dns-head {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px; padding-bottom: 18px;
    border-bottom: 1px solid rgba(98,152,254,0.15);
}
.pcm-ox-dns-head-left {
    display: flex; align-items: center; gap: 14px;
    flex: 1; min-width: 0;
}
.pcm-ox-dns-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(25,102,255,0.30), rgba(0,154,255,0.15));
    border: 1px solid rgba(0,154,255,0.40);
    color: #009AFF;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px rgba(0,154,255,0.40);
}
.pcm-ox-dns-icon svg { width: 22px; height: 22px; }
.pcm-ox-dns-title {
    color: #ffffff; font-size: 16px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.2;
    margin-bottom: 3px;
}
.pcm-ox-dns-sub {
    color: #8fadc9; font-size: 12.5px; line-height: 1.4;
}
.pcm-ox-dns-sub b {
    color: #cfe1ff; font-weight: 700;
    font-family: 'SF Mono', Menlo, monospace; font-size: 12px;
}

/* Score Ring */
.pcm-ox-dns-score {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px; flex-shrink: 0;
}
.pcm-ox-dns-score-ring { position: relative; width: 52px; height: 52px; }
.pcm-ox-dns-score-ring svg { width: 52px; height: 52px; }
.pcm-ox-dns-score-bg { stroke: rgba(98,152,254,0.18); stroke-width: 4; }
.pcm-ox-dns-score-fg {
    stroke: #6298fe; stroke-width: 4; stroke-linecap: round;
    transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1), stroke .3s;
}
.pcm-ox-dns-score-fg.s-high { stroke: #4ade80; }
.pcm-ox-dns-score-fg.s-mid  { stroke: #fcd34d; }
.pcm-ox-dns-score-fg.s-low  { stroke: #ef4444; }
.pcm-ox-dns-score-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 15px; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.pcm-ox-dns-score-num.s-high { color: #4ade80; }
.pcm-ox-dns-score-num.s-mid  { color: #fcd34d; }
.pcm-ox-dns-score-num.s-low  { color: #ef4444; }
.pcm-ox-dns-score-label {
    color: #6298fe; font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px;
}

.pcm-ox-dns-refresh {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #6298fe;
    width: 38px; height: 38px;
    border-radius: 10px; padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .4s;
    flex-shrink: 0;
}
.pcm-ox-dns-refresh:hover {
    background: rgba(25,102,255,0.20);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
    transform: rotate(180deg);
}
.pcm-ox-dns-refresh svg { width: 16px; height: 16px; }

/* Grid items */
.pcm-ox-dns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.pcm-ox-dns-item {
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .15s, background .15s;
    position: relative;
    overflow: hidden;
}
/* Bordure-gauche colorée RETIRÉE (demande utilisateur) */
.pcm-ox-dns-item::before {
    content: none !important;
    display: none !important;
}
@keyframes pcm-pulse-pending {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

.pcm-ox-dns-item-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.pcm-ox-dns-item-name {
    display: inline-flex; align-items: center; gap: 8px;
    color: #ffffff; font-size: 14px; font-weight: 800;
    letter-spacing: 0.3px;
}
.pcm-ox-dns-item-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6298fe;
    box-shadow: 0 0 8px rgba(98,152,254,0.50);
    flex-shrink: 0;
}
.pcm-ox-dns-item.s-ok   .pcm-ox-dns-item-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.65); }
.pcm-ox-dns-item.s-warn .pcm-ox-dns-item-dot { background: #fcd34d; box-shadow: 0 0 8px rgba(252,211,77,0.65); }
.pcm-ox-dns-item.s-fail .pcm-ox-dns-item-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.65); }
.pcm-ox-dns-item-status {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    background: rgba(98,152,254,0.15);
    color: #6298fe;
    border: 1px solid rgba(98,152,254,0.30);
}
.pcm-ox-dns-item.s-ok .pcm-ox-dns-item-status {
    background: rgba(74,222,128,0.12); color: #4ade80;
    border-color: rgba(74,222,128,0.35);
}
.pcm-ox-dns-item.s-warn .pcm-ox-dns-item-status {
    background: rgba(252,211,77,0.12); color: #fcd34d;
    border-color: rgba(252,211,77,0.35);
}
.pcm-ox-dns-item.s-fail .pcm-ox-dns-item-status {
    background: rgba(239,68,68,0.12); color: #ff8a80;
    border-color: rgba(239,68,68,0.35);
}
.pcm-ox-dns-item-sub {
    color: #8fadc9; font-size: 11.5px; font-weight: 600;
    margin-bottom: 10px;
}
.pcm-ox-dns-item-value {
    background: rgba(0,8,30,0.65);
    border: 1px solid rgba(98,152,254,0.15);
    border-radius: 8px;
    padding: 8px 10px;
    color: #cfe1ff;
    font-family: 'SF Mono', Menlo, Monaco, monospace !important;
    font-size: 11px; line-height: 1.5;
    word-break: break-all; white-space: pre-wrap;
    margin: 0 0 8px;
    max-height: 90px; overflow-y: auto;
}
.pcm-ox-dns-item-hint {
    color: #5a7494; font-size: 10.5px; line-height: 1.5;
    font-style: italic;
}

/* Bouton .mobileconfig dans le modal QR */
.pcm-ox-mobileconfig-btn {
    background: linear-gradient(135deg, #1966FF, #009AFF);
    border: 0;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 12px;
    box-shadow: 0 4px 12px -2px rgba(0,154,255,0.40);
    transition: filter .15s;
    font-family: inherit;
}
.pcm-ox-mobileconfig-btn:hover { filter: brightness(1.10); }

/* ====================================================================
   PCM OX Email Backup — Card "Sauvegarde des emails"
   ==================================================================== */
.pcm-ox-backup-card {
    position: relative;
    background: linear-gradient(160deg, rgba(15,29,63,0.85) 0%, rgba(10,22,49,0.92) 100%);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 18px;
    padding: 24px 26px 22px;
    margin: 22px 0;
    overflow: hidden;
    box-shadow: 0 8px 30px -16px rgba(0,0,0,0.50);
}
.pcm-ox-backup-bg {
    position: absolute; inset: -2px;
    background: radial-gradient(50% 80% at 100% 0%, rgba(74,222,128,0.10), transparent 60%),
                radial-gradient(60% 60% at 0% 100%, rgba(25,102,255,0.10), transparent 65%);
    opacity: 0.7; pointer-events: none; z-index: 0;
}
.pcm-ox-backup-card > *:not(.pcm-ox-backup-bg) { position: relative; z-index: 1; }

.pcm-ox-backup-head {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px; padding-bottom: 18px;
    border-bottom: 1px solid rgba(98,152,254,0.15);
    flex-wrap: wrap;
}
.pcm-ox-backup-head-left {
    display: flex; align-items: center; gap: 14px;
    flex: 1; min-width: 0;
}
.pcm-ox-backup-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(74,222,128,0.25), rgba(34,197,94,0.10));
    border: 1px solid rgba(74,222,128,0.45);
    color: #4ade80;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px rgba(74,222,128,0.40);
}
.pcm-ox-backup-icon svg { width: 22px; height: 22px; }
.pcm-ox-backup-title {
    color: #ffffff; font-size: 16px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.2;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 8px;
}
.pcm-ox-backup-badge-new {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #1966FF, #009AFF);
    color: #ffffff;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pcm-ox-backup-sub { color: #8fadc9; font-size: 12.5px; }

.pcm-ox-backup-pricing {
    text-align: right;
    padding: 8px 14px;
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.20);
    border-radius: 12px;
}
.pcm-ox-backup-pricing-value {
    color: #4ade80; font-size: 14px; font-weight: 800;
}
.pcm-ox-backup-pricing-sub { color: #8fadc9; font-size: 11px; font-weight: 600; }

.pcm-ox-backup-body { min-height: 100px; }
.pcm-ox-backup-body[data-pcm-loading] { display: flex; align-items: center; justify-content: center; color: #8fadc9; }

.pcm-ox-backup-empty {
    text-align: center; padding: 8px 0;
}
.pcm-ox-backup-empty-title {
    color: #ffffff; font-size: 15px; font-weight: 700;
    margin-bottom: 14px;
}
.pcm-ox-backup-features {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px 22px; text-align: left;
}
.pcm-ox-backup-features li {
    display: flex; align-items: center; gap: 10px;
    color: #cfe1ff; font-size: 13px;
}
.pcm-ox-check {
    width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    flex-shrink: 0; position: relative;
}
.pcm-ox-check::after {
    content: ""; position: absolute;
    left: 5px; top: 4px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Stats global */
.pcm-ox-backup-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.pcm-ox-backup-stat {
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 10px;
    padding: 10px 14px;
}
.pcm-ox-backup-stat-label {
    color: #6298fe; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.pcm-ox-backup-stat-value {
    color: #ffffff; font-size: 18px; font-weight: 800;
    letter-spacing: -0.01em;
}
.pcm-ox-backup-stat-value.s-free { color: #4ade80; }

/* Account row */
.pcm-ox-backup-account {
    background: rgba(0,8,30,0.45);
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.pcm-ox-backup-account-info { flex: 1; min-width: 0; }
.pcm-ox-backup-account-email {
    color: #ffffff; font-weight: 700; font-size: 14px;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.pcm-ox-backup-account-status {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pcm-ox-backup-account-status.s-active   { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.pcm-ox-backup-account-status.s-paused   { background: rgba(252,211,77,0.12); color: #fcd34d; border: 1px solid rgba(252,211,77,0.35); }
.pcm-ox-backup-account-status.s-error    { background: rgba(239,68,68,0.12); color: #ff8a80; border: 1px solid rgba(239,68,68,0.35); }
.pcm-ox-backup-account-status.s-inactive { background: rgba(98,152,254,0.10); color: #8fadc9; border: 1px solid rgba(98,152,254,0.25); }
.pcm-ox-backup-account-meta { color: #8fadc9; font-size: 11.5px; font-weight: 600; }
.pcm-ox-backup-account-cost { color: #fcd34d; font-weight: 700; }
.pcm-ox-backup-quota {
    height: 4px; background: rgba(98,152,254,0.15);
    border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.pcm-ox-backup-quota > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #4ade80, #009AFF);
    border-radius: 2px; transition: width .4s ease-out;
}
.pcm-ox-backup-error {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 7px;
    color: #ff8a80; font-size: 11.5px;
}
.pcm-ox-backup-account-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.pcm-ox-backup-btn {
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #cfe1ff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.pcm-ox-backup-btn:hover {
    background: rgba(25,102,255,0.18);
    border-color: rgba(0,154,255,0.55);
    color: #ffffff;
}
.pcm-ox-backup-btn.primary {
    background: linear-gradient(135deg, #1966FF, #009AFF);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px -2px rgba(0,154,255,0.40);
}
.pcm-ox-backup-btn.primary:hover { filter: brightness(1.10); }
.pcm-ox-backup-btn.danger {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.30);
    color: #ff8a80;
}
.pcm-ox-backup-btn.danger:hover {
    background: linear-gradient(135deg, #ef4444, #f97316);
    border-color: transparent;
    color: #ffffff;
}

/* Modal activation / suppression */
.pcm-ox-backup-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.pcm-ox-backup-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,6,20,0.65);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
}
.pcm-ox-backup-modal-card {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 100%);
    border: 1px solid rgba(98,152,254,0.30);
    border-radius: 18px;
    box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7);
    width: 100%; max-width: 460px;
    padding: 28px;
    color: #cfe1ff;
}
.pcm-ox-backup-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.30);
    color: #8fadc9;
    width: 32px; height: 32px;
    border-radius: 9px;
    cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; line-height: 1;
}
.pcm-ox-backup-modal-close:hover {
    background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.40); color: #ff8a80;
}
.pcm-ox-backup-modal-card h3 {
    color: #ffffff; font-size: 18px; font-weight: 800;
    margin: 0 0 6px; letter-spacing: -0.01em;
}
.pcm-ox-backup-modal-sub {
    color: #8fadc9; font-size: 13px; margin: 0 0 18px;
}
.pcm-ox-backup-modal-sub b { color: #cfe1ff; }
.pcm-ox-backup-modal-card label {
    display: block;
    color: #8fadc9; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.pcm-ox-backup-modal-card input {
    width: 100%;
    background: rgba(0,8,30,0.65);
    border: 1px solid rgba(98,152,254,0.25);
    border-radius: 10px;
    color: #ffffff;
    padding: 11px 14px;
    font-size: 14px;
    margin-bottom: 14px;
    font-family: inherit;
    outline: none;
}
.pcm-ox-backup-modal-card input:focus {
    border-color: rgba(0,154,255,0.55);
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12);
}
.pcm-ox-backup-modal-info {
    background: rgba(25,102,255,0.08);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 10px;
    padding: 10px 14px;
    color: #cfe1ff;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.pcm-ox-backup-modal-info b { color: #ffffff; }
.pcm-ox-backup-modal-warn {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 10px;
    padding: 12px 14px;
    color: #ff8a80;
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 16px;
}
.pcm-ox-backup-modal-warn b { color: #ffffff; }
.pcm-ox-backup-modal-card button[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #1966FF, #009AFF);
    border: 0;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0,154,255,0.40);
    font-family: inherit;
}
.pcm-ox-backup-modal-card button[type="submit"]:hover:not(:disabled) { filter: brightness(1.10); }
.pcm-ox-backup-modal-card button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.pcm-ox-backup-modal-card button[type="submit"].danger {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 4px 12px -2px rgba(239,68,68,0.40);
}
.pcm-ox-backup-modal-err {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 9px;
    color: #ff8a80;
    font-size: 12.5px;
}
.pcm-ox-backup-loader { color: #8fadc9; font-size: 13px; padding: 30px; }

.pcm-toast.is-error { border-color: rgba(239,68,68,0.45); }
.pcm-toast.is-error::before { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.6); }

/* État "Bientôt disponible" sur la card backup */
.pcm-ox-backup-soon {
    text-align: center; padding: 14px 0;
}
.pcm-ox-backup-soon-badge {
    display: inline-block;
    padding: 5px 14px;
    background: linear-gradient(135deg, rgba(252,211,77,0.15), rgba(252,211,77,0.05));
    border: 1px solid rgba(252,211,77,0.35);
    border-radius: 999px;
    color: #fcd34d;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px;
    margin-bottom: 14px;
}
.pcm-ox-backup-soon-title {
    color: #ffffff; font-size: 17px; font-weight: 800;
    letter-spacing: -0.02em; margin-bottom: 8px;
}
.pcm-ox-backup-soon-text {
    color: #8fadc9; font-size: 13px; line-height: 1.55;
    max-width: 520px; margin: 0 auto 18px;
}
.pcm-ox-backup-soon .pcm-ox-backup-features {
    max-width: 520px; margin: 0 auto 16px;
}
.pcm-ox-backup-soon-foot {
    color: #5a7494; font-size: 11.5px;
    font-style: italic; margin-top: 12px;
}

/* ============================================================
   FIX productdetails — gros carré bleu trop grand + btn-warning trop léger
   ============================================================ */

/* 1) Réduit la taille du .product-icon (le gros carré bleu avec cube) */
body .product-details .product-icon,
body .product-details > .row > [class*="col-"] > .product-icon {
    background: linear-gradient(160deg, rgba(25,102,255,0.18), rgba(0,154,255,0.06)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    color: #ffffff !important;
}
body .product-details .product-icon .product-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
body .product-details .product-icon .product-image {
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px -6px rgba(0,154,255,0.45) !important;
    padding: 12px !important;
}
body .product-details .product-icon .product-image svg,
body .product-details .product-icon .product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 32px !important;
    max-height: 32px !important;
}
body .product-details .product-icon .product-name,
body .product-details .product-icon h2.product-name {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
body .product-details .product-icon .product-group-name {
    color: rgba(255,255,255,0.65) !important;
    font-weight: 600 !important;
}
body .product-details .product-icon .product-footer,
body .product-details .product-icon a.product-footer {
    background: rgba(0,8,30,0.40) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body .product-details .product-icon a.product-footer:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}
/* La col-md-6 qui contient ce carré ne doit pas forcer une hauteur égale */
body .product-details .row-eq-height,
body .product-details .row.row-eq-height-sm {
    align-items: flex-start !important;
}

/* 2) Bouton .btn-warning EN PLUS du btn-xs (rate sur la taille XS) */
html body a.btn.btn-xs.btn-warning,
html body button.btn.btn-xs.btn-warning,
html body .btn-xs.btn-warning,
html body .btn-xs.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-image: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    background-color: #ef4444 !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px -2px rgba(239,68,68,0.40) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
html body a.btn.btn-xs.btn-warning:hover {
    filter: brightness(1.10) !important;
    color: #ffffff !important;
}
html body .btn-xs.btn-warning span,
html body .btn-xs.btn-warning .btn-text,
html body .btn-xs.btn-warning i {
    color: #ffffff !important;
}

/* ====================================================================
   FIX productdetails — refonte complète
   ==================================================================== */

/* 1) Alert "Vous avez une facture impayée" : bouton À DROITE du texte, même ligne */
html body .alert.alert-lagom.alert-warning,
html body .alert.alert-lagom.alert-danger,
html body #alertUnpaidInvoice,
html body #alertOverdueInvoice {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px 14px 44px !important;
    flex-wrap: wrap !important;
}
html body .alert.alert-lagom .alert-body,
html body #alertUnpaidInvoice .alert-body,
html body #alertOverdueInvoice .alert-body {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
html body .alert.alert-lagom .alert-actions,
html body .alert.alert-lagom .alert-actions.pull-right,
html body #alertUnpaidInvoice .alert-actions,
html body #alertOverdueInvoice .alert-actions {
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: right !important;
}

/* 2) Right card "État/Date/Mode de paiement" : design premium grid */
body .product-details .product-info {
    background: linear-gradient(160deg, rgba(15,29,63,0.85), rgba(10,22,49,0.92)) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    box-shadow: 0 4px 18px -8px rgba(0,0,0,0.40) !important;
}
body .product-details .product-info ul.list-info,
body .product-details .product-info ul.list-info-v {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 16px 22px !important;
}
body .product-details .product-info ul.list-info > li,
body .product-details .product-info ul.list-info-v > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    border: 0 !important;
    background: transparent !important;
}
body .product-details .product-info .list-info-title {
    color: #6298fe !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    width: auto !important;
}
body .product-details .product-info .list-info-text {
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Pill status (Actif / Suspendu / etc.) */
body .product-details .product-info .status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body .product-details .product-info .status::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 6px currentColor !important;
}
body .product-details .product-info .status.status-active {
    background: rgba(74,222,128,0.12) !important;
    border: 1px solid rgba(74,222,128,0.35) !important;
    color: #4ade80 !important;
}
body .product-details .product-info .status.status-pending {
    background: rgba(252,211,77,0.12) !important;
    border: 1px solid rgba(252,211,77,0.35) !important;
    color: #fcd34d !important;
}
body .product-details .product-info .status.status-suspended,
body .product-details .product-info .status.status-terminated {
    background: rgba(239,68,68,0.12) !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
    color: #ff8a80 !important;
}

/* 3) Section "Domaine" en bas — card propre */
body .product-details .list-info.list-info-50,
body .product-details .list-info.list-info-bordered {
    background: linear-gradient(160deg, rgba(15,29,63,0.65), rgba(10,22,49,0.80)) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin-top: 22px !important;
    overflow: hidden !important;
    list-style: none !important;
}
body .product-details .list-info.list-info-50 > li,
body .product-details .list-info.list-info-bordered > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border-bottom: 1px solid rgba(98,152,254,0.10) !important;
}
body .product-details .list-info.list-info-50 > li:last-child,
body .product-details .list-info.list-info-bordered > li:last-child {
    border-bottom: 0 !important;
}
body .product-details .list-info.list-info-50 .list-info-title,
body .product-details .list-info.list-info-bordered .list-info-title {
    color: #6298fe !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    min-width: 160px !important;
}
body .product-details .list-info.list-info-50 .list-info-text,
body .product-details .list-info.list-info-bordered .list-info-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    margin: 0 !important;
}

/* Header de section avec icône (Domaine) */
body .product-details h3,
body .product-details h4,
body .product-details .panel-heading {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 22px 0 10px !important;
    padding-left: 14px !important;
    position: relative !important;
    line-height: 1.3 !important;
}
body .product-details h3::before,
body .product-details h4::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 3px !important;
    background: linear-gradient(180deg, #1966FF, #009AFF) !important;
    border-radius: 2px !important;
}

/* 4) Tabs onglets (Détails / Add-ons / etc.) — cohérent */
body .tab-content {
    background: transparent !important;
}

/* 5) Btn "Visiter le site" — cyan ghost */
body .product-details a.btn.btn-primary,
body .product-details a.btn[href*="://"] {
    background: rgba(25,102,255,0.10) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 9px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .15s, color .15s, border-color .15s !important;
}
body .product-details a.btn.btn-primary:hover {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Bouton Payer la facture : ROUGE pur, pas de gradient orange */
html body a.btn.btn-warning,
html body button.btn.btn-warning,
html body input.btn.btn-warning,
html body .btn.btn-warning,
html body .btn-warning,
html body .btn-xs.btn-warning,
html body .btn-sm.btn-warning,
html body .alert .btn.btn-warning,
html body .alert-warning .btn.btn-warning,
html body .alert-danger .btn.btn-warning,
html body .client-home-alert .btn.btn-warning {
    background: #dc2626 !important;
    background-image: none !important;
    background-color: #dc2626 !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(220,38,38,0.40) !important;
}
html body a.btn.btn-warning:hover,
html body .btn.btn-warning:hover,
html body .alert .btn.btn-warning:hover {
    background: #b91c1c !important;
    background-image: none !important;
    background-color: #b91c1c !important;
    filter: none !important;
    box-shadow: 0 6px 18px -2px rgba(220,38,38,0.55) !important;
    color: #ffffff !important;
}

/* Refonte product-details : ONE-ROW horizontal product card */
body .product-details .row.row-eq-height,
body .product-details .row.row-eq-height-sm {
    align-items: stretch !important;
    margin: 0 -8px !important;
}
body .product-details .row > [class*="col-md-6"] {
    padding: 0 8px !important;
}
body .product-details .product-icon {
    background: linear-gradient(160deg, rgba(15,29,63,0.85), rgba(10,22,49,0.92)) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 14px !important;
}
body .product-details .product-icon .product-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}
body .product-details .product-icon .product-image {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    padding: 10px !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px -6px rgba(0,154,255,0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body .product-details .product-icon .product-image svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 32px !important;
    max-height: 32px !important;
}
body .product-details .product-icon .product-name {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
body .product-details .product-icon .product-footer,
body .product-details .product-icon a.product-footer {
    background: rgba(0,8,30,0.55) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    color: #cfe1ff !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    align-self: flex-start !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body .product-details .product-icon a.product-footer::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}
body .product-details .product-icon a.product-footer:hover {
    background: rgba(25,102,255,0.20) !important;
    border-color: rgba(0,154,255,0.55) !important;
    color: #ffffff !important;
}

/* Hauteurs égales gauche/droite */
body .product-details .product-info {
    height: 100% !important;
}

/* =========================================================
   POPPINS — police globale pour tout WHMCS Lagom + nos UI
   ========================================================= */
html, html body,
html body *,
html body .panel, html body .panel-default,
html body .btn, html body .form-control,
html body input, html body textarea, html body select, html body button,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .alert, html body .alert *,
html body .nav, html body .nav *,
html body .modal, html body .modal *,
html body [class^="pcm-"], html body [class*=" pcm-"],
html body .pcm-toast, html body .pcm-sub-modal,
html body .feature, html body .feature *,
html body .package, html body .package *,
html body .ox-table-accounts, html body .ox-table-accounts *,
html body .panel-manage-ox, html body .panel-manage-ox *,
html body .product-icon, html body .product-icon *,
html body .product-info, html body .product-info *,
html body .ticket-reply, html body .ticket-reply *,
html body .main-header-title, html body .main-header-bottom,
html body .breadcrumb, html body .breadcrumb *,
html body .app-nav, html body .app-nav * {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-feature-settings: "ss01", "cv01", "kern";
}

/* Garde la monospace pour code / hostnames / IPs (besoin technique) */
html body code, html body pre,
html body .pcm-ox-dns-item-value,
html body .pcm-ox-qr-row b,
html body .ticket-reply-message code,
html body .ticket-reply-message pre,
html body .pcm-msg-ip,
html body .svc-latency,
html body .svc-uptime,
html body .stat-value,
html body .pcm-char-counter,
html body #retrievalsettings .table > tbody > tr > td:nth-child(2),
html body #davsettings .table > tbody > tr > td:nth-child(2),
html body .embed-row pre,
html body .pcm-md-syntax pre,
html body .ox-table-accounts .limit,
html body .pcm-ox-backup-quota,
html body .pcm-ox-dns-sub b {
    font-family: 'SF Mono', 'JetBrains Mono', Menlo, Monaco, Consolas, monospace !important;
}

/* Pondération propre Poppins partout */
html body h1, html body h2, html body h3, html body .hero-title, html body .pcm-sub-title,
html body .section-title, html body .panel-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
html body strong, html body b, html body .name, html body .product-name {
    font-weight: 700 !important;
}

/* ====================================================================
   productdetails enrichi — stats banner + quick actions
   ==================================================================== */
.pcm-pd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}
.pcm-pd-stat {
    background: linear-gradient(160deg, rgba(15,29,63,0.85), rgba(10,22,49,0.92));
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color .15s, transform .15s;
}
.pcm-pd-stat:hover {
    border-color: rgba(0,154,255,0.45);
    transform: translateY(-1px);
}
.pcm-pd-stat-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(0,8,30,0.55);
    border: 1px solid rgba(98,152,254,0.22);
    display: inline-flex; align-items: center; justify-content: center;
}
.pcm-pd-stat-icon svg { width: 18px; height: 18px; }
.pcm-pd-stat-label {
    color: #6298fe;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
}
.pcm-pd-stat-value {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Quick actions row */
.pcm-pd-quick {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.pcm-pd-quick-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(15,29,63,0.55);
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 12px;
    color: #cfe1ff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    font-family: 'Poppins', sans-serif;
}
.pcm-pd-quick-btn:hover {
    background: linear-gradient(135deg, rgba(25,102,255,0.18), rgba(0,154,255,0.08));
    border-color: rgba(0,154,255,0.55);
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
.pcm-pd-quick-btn svg {
    width: 16px; height: 16px;
    color: #6298fe;
}
.pcm-pd-quick-btn:hover svg { color: #ffffff; }
.pcm-pd-quick-btn[data-pcm-visit] {
    background: linear-gradient(135deg, #1966FF, #009AFF);
    border-color: transparent;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(0,154,255,0.40);
}
.pcm-pd-quick-btn[data-pcm-visit] svg { color: #ffffff; }
.pcm-pd-quick-btn[data-pcm-visit]:hover { filter: brightness(1.10); }

/* Icônes SVG sidebar (remplacent les FA/Lagom cassées) */
.pcm-sb-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #6298fe;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}
.pcm-sb-icon svg { width: 16px; height: 16px; display: block; }
.list-group-item:hover .pcm-sb-icon,
.list-group-item.active .pcm-sb-icon,
aside a:hover .pcm-sb-icon { color: #009AFF; }

/* Right card .product-info : layout plus dense, moins vide */
body .product-details .product-info {
    padding: 22px 26px !important;
}
body .product-details .product-info ul.list-info,
body .product-details .product-info ul.list-info-v {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 14px 28px !important;
}
body .product-details .product-info ul.list-info > li {
    padding: 6px 0 !important;
    border-bottom: 1px dashed rgba(98,152,254,0.10) !important;
}
body .product-details .product-info ul.list-info > li:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

/* Bottom Domaine section : compact + 1 ligne */
body .product-details .list-info.list-info-50,
body .product-details .list-info.list-info-bordered {
    margin-top: 14px !important;
    padding: 16px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
body .product-details .list-info.list-info-50 > li,
body .product-details .list-info.list-info-bordered > li {
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(98,152,254,0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
body .product-details .list-info.list-info-50 > li:last-child {
    border-bottom: 0 !important;
}

/* Header "Domaine" plus discret */
body .product-details h3,
body .product-details h4 {
    font-size: 11px !important;
    margin: 16px 0 6px !important;
    color: #6298fe !important;
}

/* ====================================================================
   PRODUCTDETAILS — Bandeau unifié compact (refonte 2026-06-06)
   Fusionne les 2 cartes (identité + infos) en UNE carte pleine largeur.
   Supprime le vide dû au row-eq-height (hauteur auto, sections empilées).
   Spécificité augmentée (> .row > [col] >) pour primer sur les anciennes
   règles 4-classes, sinon l'identité reste centrée.
   ==================================================================== */
html body .product-details {
    margin-bottom: 16px !important;
}
/* La row devient LA carte unique pleine largeur */
html body .product-details > .row.row-eq-height,
html body .product-details > .row.row-eq-height-sm {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    background: linear-gradient(160deg, rgba(15,29,63,0.85), rgba(10,22,49,0.92)) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px -8px rgba(0,0,0,0.40) !important;
    overflow: hidden !important;
    padding: 0 !important;
}
/* Colonnes -> sections empilées pleine largeur. height:auto neutralise
   la hauteur inline posée par le JS row-eq-height de Lagom (cause du vide) */
html body .product-details > .row.row-eq-height > [class*="col-"],
html body .product-details > .row.row-eq-height-sm > [class*="col-"] {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Section identité (haut) : transparente, contenu calé à GAUCHE sur 1 ligne */
html body .product-details > .row > [class*="col-"] > .product-icon,
html body .product-details .product-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 26px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    text-align: left !important;
}
html body .product-details > .row > [class*="col-"] > .product-icon .product-content,
html body .product-details .product-icon .product-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
}
/* Badge domaine : poussé à droite du nom sur desktop, passe dessous en wrap */
html body .product-details > .row > [class*="col-"] > .product-icon a.product-footer,
html body .product-details .product-icon a.product-footer,
html body .product-details .product-icon .product-footer {
    align-self: center !important;
    margin: 0 0 0 auto !important;
}
/* Section infos (bas) : transparente + filet séparateur en haut */
html body .product-details > .row > [class*="col-"] > .product-info,
html body .product-details .product-info {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(98,152,254,0.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 26px !important;
}
/* Grille d'infos : s'étale en une rangée sur toute la largeur */
html body .product-details .product-info ul.list-info,
html body .product-details .product-info ul.list-info-v {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 14px 0 !important;
}

/* --- Finition premium : relief icône, hiérarchie nom, barre de stats --- */
/* Icône : halo plus profond + liseré interne lumineux */
html body .product-details .product-icon .product-image {
    box-shadow: 0 10px 26px -8px rgba(0,154,255,0.55),
                inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}
/* Nom produit plus présent + nom de groupe en retrait discret */
html body .product-details .product-icon .product-name,
html body .product-details .product-icon h2.product-name {
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}
html body .product-details .product-icon .product-group-name {
    color: rgba(255,255,255,0.55) !important;
    font-weight: 600 !important;
}
/* Bandeau infos en "barre de stats" : séparateurs verticaux fins,
   plus de tirets horizontaux, cellules aérées */
html body .product-details .product-info ul.list-info > li,
html body .product-details .product-info ul.list-info-v > li {
    border-bottom: 0 !important;
    border-right: 1px solid rgba(98,152,254,0.15) !important;
    padding: 2px 22px 2px 0 !important;
    margin: 0 !important;
    gap: 5px !important;
}
html body .product-details .product-info ul.list-info > li:last-child,
html body .product-details .product-info ul.list-info-v > li:last-child {
    border-right: 0 !important;
}
/* Libellés un poil plus contrastés, valeurs nettes */
html body .product-details .product-info .list-info-title {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
    color: #7aa6ff !important;
}
html body .product-details .product-info .list-info-text {
    font-size: 15px !important;
}

/* ====================================================================
   FIX : Exclure les icônes des familles forcées (Poppins / monospace)
   FontAwesome / Lagom natif doivent garder leur font-family d'origine
   ==================================================================== */
html body i.fa,
html body i.fas,
html body i.far,
html body i.fab,
html body i.fal,
html body i.fad,
html body .fa,
html body .fas,
html body .far,
html body .fab,
html body .fal,
html body .fad,
html body [class^="fa-"],
html body [class*=" fa-"],
html body i.lm,
html body i.ls,
html body i.icon,
html body [class^="lm-"],
html body [class*=" lm-"],
html body [class^="ls-"],
html body [class*=" ls-"] {
    font-family: inherit !important;
}
/* FontAwesome 6 — force la bonne family */
html body i.fa::before, html body .fa::before,
html body i.fas::before, html body .fas::before,
html body i.fad::before, html body .fad::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
html body i.far::before, html body .far::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
html body i.fab::before, html body .fab::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
/* Lagom icons (lagom-medium-icons / large-icons) — gardent leur family natif */
html body i.lm::before, html body .lm::before {
    font-family: "lagom-medium-icons" !important;
}
html body i.ls::before, html body .ls::before {
    font-family: "lagom-small-icons" !important;
}

/* =========================================================
   PCM PATCH register.php — ajusts demandés 22h59
   ========================================================= */
body.page-clientregister .login-wrapper,
body.register-page .login-wrapper,
body.page-clientregister .login-body,
body.register-page .login-body { max-width: 920px !important; }

/* Cacher tous les titres de section "Informations personnelles", "Adresse de facturation", "Sécurité du compte", etc. */
body.page-clientregister .loginForm .section-header,
body.register-page .loginForm .section-header,
body.page-clientregister .loginForm h2.section-title,
body.register-page .loginForm h2.section-title,
body.page-clientregister .loginForm h5.section-title,
body.register-page .loginForm h5.section-title { display: none !important; }

/* Labels alignés à gauche + espacement vertical uniforme 30px */
body.page-clientregister .loginForm .section-body,
body.register-page .loginForm .section-body { text-align: left !important; }
body.page-clientregister .loginForm .form-group,
body.register-page .loginForm .form-group {
    margin-bottom: 30px !important;
    text-align: left !important;
}
body.page-clientregister .loginForm .form-group label,
body.register-page .loginForm .form-group label,
body.page-clientregister .loginForm .form-group .label-required,
body.register-page .loginForm .form-group .label-required {
    text-align: left !important;
    display: block !important;
    margin-bottom: 8px !important;
}
body.page-clientregister .loginForm .form-control,
body.register-page .loginForm .form-control { min-height: 48px !important; padding: 12px 14px !important; }
body.page-clientregister .loginForm .row > [class*="col-"],
body.register-page .loginForm .row > [class*="col-"] { margin-bottom: 0 !important; }

/* Centrer le bloc bouton Google (linkableProviders / pcm-social-wrap) */
body.page-clientregister #pcm-social-wrap,
body.register-page #pcm-social-wrap { text-align: center !important; }
body.page-clientregister #pcm-social-wrap .providerPreLinking,
body.register-page #pcm-social-wrap .providerPreLinking { text-align: center !important; }
body.page-clientregister #pcm-social-wrap .social-signin-btns,
body.register-page #pcm-social-wrap .social-signin-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
body.page-clientregister #pcm-social-wrap .social-signin-btns > [class*="col"],
body.register-page #pcm-social-wrap .social-signin-btns > [class*="col"],
body.page-clientregister #pcm-social-wrap .social-signin-btns > div,
body.register-page #pcm-social-wrap .social-signin-btns > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 320px !important;
    float: none !important;
    margin: 0 auto !important;
}

/* Fix bug champ Téléphone : dropdown sélecteur pays sortait du flux et chevauchait les autres champs */
body.page-clientregister .iti,
body.register-page .iti,
body.page-clientregister .intl-tel-input,
body.register-page .intl-tel-input { width: 100% !important; display: block !important; position: relative !important; }
body.page-clientregister .iti__country-list,
body.register-page .iti__country-list,
body.page-clientregister .intl-tel-input .country-list,
body.register-page .intl-tel-input .country-list {
    position: absolute !important;
    z-index: 99999 !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 280px !important;
    max-width: 100% !important;
    background: #0f1d3f !important;
    border: 1px solid rgba(0,212,255,0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.50) !important;
}
body.page-clientregister .iti__country,
body.register-page .iti__country,
body.page-clientregister .intl-tel-input .country-list .country,
body.register-page .intl-tel-input .country-list .country {
    padding: 8px 12px !important;
    color: #c4e3ff !important;
}
body.page-clientregister .iti__country:hover,
body.register-page .iti__country:hover,
body.page-clientregister .intl-tel-input .country-list .country:hover,
body.register-page .intl-tel-input .country-list .country:hover {
    background: rgba(0,154,255,0.15) !important;
}
/* Empêche TOUT parent de couper le dropdown pays */
body.page-clientregister .section,
body.register-page .section,
body.page-clientregister .section-body,
body.register-page .section-body,
body.page-clientregister .row,
body.register-page .row,
body.page-clientregister .form-group,
body.register-page .form-group { overflow: visible !important; }

/* =========================================================
   PCM PATCH FINAL register.php — fix dropdown téléphone TRANSPARENT
   ========================================================= */
/* Tous les noms possibles de l'éléments dropdown (intl-tel-input v16 / v17 / v18) */
html body.page-clientregister .iti__country-list,
html body.register-page .iti__country-list,
html body.page-clientregister .iti__dropdown-content,
html body.register-page .iti__dropdown-content,
html body.page-clientregister .intl-tel-input .country-list,
html body.register-page .intl-tel-input .country-list,
html body.page-clientregister .iti--allow-dropdown .iti__country-list,
html body.register-page .iti--allow-dropdown .iti__country-list {
    background-color: #0a1631 !important;
    background: #0a1631 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #009AFF !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(0, 212, 255, 0.30) !important;
    position: absolute !important;
    z-index: 999999 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 320px !important;
    width: 100% !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

/* Items du dropdown : opaques + isolation */
html body.page-clientregister .iti__country-list .iti__country,
html body.register-page .iti__country-list .iti__country,
html body.page-clientregister .iti__dropdown-content .iti__country,
html body.register-page .iti__dropdown-content .iti__country,
html body.page-clientregister .intl-tel-input .country-list .country,
html body.register-page .intl-tel-input .country-list .country {
    background-color: #0a1631 !important;
    background: #0a1631 !important;
    color: #c4e3ff !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important;
}

html body.page-clientregister .iti__country:hover,
html body.register-page .iti__country:hover,
html body.page-clientregister .country-list .country:hover,
html body.register-page .country-list .country:hover {
    background-color: #1966FF !important;
    background: #1966FF !important;
    color: #fff !important;
}

/* Active / highlight */
html body.page-clientregister .iti__country.iti__highlight,
html body.register-page .iti__country.iti__highlight,
html body.page-clientregister .iti__country.iti__active,
html body.register-page .iti__country.iti__active {
    background-color: #009AFF !important;
    background: #009AFF !important;
    color: #fff !important;
}

/* Wrapper iti = stacking context isolé */
html body.page-clientregister .iti,
html body.register-page .iti,
html body.page-clientregister .iti--allow-dropdown,
html body.register-page .iti--allow-dropdown {
    position: relative !important;
    isolation: isolate !important;
    z-index: 10 !important;
}

/* Quand le dropdown est OPEN : promotion du parent en z-index très haut */
html body.page-clientregister .iti.iti--show-dropdown,
html body.register-page .iti.iti--show-dropdown,
html body.page-clientregister .iti--container,
html body.register-page .iti--container { z-index: 999999 !important; }

/* =========================================================
   PCM PATCH ULTRA — fix téléphone + retire badge top-heberg
   ========================================================= */

/* 1. Retire le badge top-heberg.com du footer partout */
a[href*="top-heberg.com"],
img[src*="top-heberg.com"] { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; }

/* 2. Téléphone : Force le code dial "+33" à ne PAS chevaucher le placeholder */
html body.page-clientregister .iti--separate-dial-code .iti__selected-flag,
html body.register-page .iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(0, 154, 255, 0.10) !important;
    border-right: 1px solid rgba(0, 212, 255, 0.30) !important;
    padding: 0 10px !important;
    border-radius: 8px 0 0 8px !important;
}
html body.page-clientregister .iti--separate-dial-code .iti__selected-dial-code,
html body.register-page .iti--separate-dial-code .iti__selected-dial-code {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}
/* Décale le placeholder pour éviter le chevauchement */
html body.page-clientregister .iti--separate-dial-code input[type=tel],
html body.register-page .iti--separate-dial-code input[type=tel],
html body.page-clientregister .iti--separate-dial-code input.form-control,
html body.register-page .iti--separate-dial-code input.form-control {
    padding-left: 90px !important;
}

/* 3. Dropdown pays : SUPER opaque, ne laisse RIEN passer derrière */
html body.page-clientregister .iti__country-list,
html body.register-page .iti__country-list,
html body.page-clientregister .iti__dropdown,
html body.register-page .iti__dropdown,
html body.page-clientregister .iti__dropdown-content,
html body.register-page .iti__dropdown-content,
html body.page-clientregister .intl-tel-input .country-list,
html body.register-page .intl-tel-input .country-list {
    background: #050d24 !important;
    background-color: #050d24 !important;
    background-image: linear-gradient(180deg, #08132e 0%, #050d24 100%) !important;
    opacity: 1 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid #009AFF !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(0, 212, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: absolute !important;
    z-index: 999999 !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    min-width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Wrapper du dropdown : crée un stacking context isolé ULTRA haut */
html body.page-clientregister .iti.iti--show-dropdown,
html body.register-page .iti.iti--show-dropdown,
html body.page-clientregister .iti.iti--container,
html body.register-page .iti.iti--container {
    z-index: 999999 !important;
}
/* Si la lib utilise un container global (body-level), on lui force aussi */
.iti--container { z-index: 999999 !important; }

/* =========================================================
   PCM PATCH NUCLÉAIRE — désactive widget drapeau téléphone
   ========================================================= */
/* Cache TOUT élément lié à intl-tel-input (drapeaux, code dial, dropdown pays) */
html body.page-clientregister [class*="iti__"],
html body.register-page [class*="iti__"],
html body.page-clientregister .iti__selected-flag,
html body.register-page .iti__selected-flag,
html body.page-clientregister .iti__flag-container,
html body.register-page .iti__flag-container,
html body.page-clientregister .iti__selected-dial-code,
html body.register-page .iti__selected-dial-code,
html body.page-clientregister .iti__country-list,
html body.register-page .iti__country-list,
html body.page-clientregister .iti__arrow,
html body.register-page .iti__arrow,
html body.page-clientregister .iti__dropdown,
html body.register-page .iti__dropdown,
html body.page-clientregister .iti__dropdown-content,
html body.register-page .iti__dropdown-content,
html body.page-clientregister .country-list,
html body.register-page .country-list,
html body.page-clientregister .selected-flag,
html body.register-page .selected-flag {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Le wrapper .iti garde sa fonction (positionne l'input) mais sans le widget */
html body.page-clientregister .iti,
html body.register-page .iti,
html body.page-clientregister .iti--allow-dropdown,
html body.register-page .iti--allow-dropdown,
html body.page-clientregister .intl-tel-input,
html body.register-page .intl-tel-input {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    position: relative !important;
}

/* L'input téléphone : remis aux dimensions normales, padding-left standard */
html body.page-clientregister #inputPhone,
html body.register-page #inputPhone,
html body.page-clientregister input[type="tel"][name="phonenumber"],
html body.register-page input[type="tel"][name="phonenumber"],
html body.page-clientregister .iti input[type="tel"],
html body.register-page .iti input[type="tel"],
html body.page-clientregister .iti input.form-control,
html body.register-page .iti input.form-control {
    width: 100% !important;
    padding: 12px 14px !important;
    padding-left: 14px !important;
    background: transparent !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    border-radius: 10px !important;
    color: #c4e3ff !important;
    font-size: 14px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

html body.page-clientregister #inputPhone::placeholder,
html body.register-page #inputPhone::placeholder { color: #5a7494 !important; opacity: 1 !important; }

/* Force le placeholder visible du champ tel — attribut placeholder dynamique JS */
html body.page-clientregister #inputPhone,
html body.register-page #inputPhone { text-indent: 0 !important; }

/* =========================================================
   PCM PATCH — Pages Legal (Conditions, Politique confidentialité, etc.)
   Cible /legal/* qui utilise .section-legal
   ========================================================= */
body.page-lagompage:has(.section-legal),
body.page-lagom-cms:has(.section-legal) {
    background: #050d24 !important;
    color: #e2e8f0 !important;
}
body.page-lagompage:has(.section-legal)::before,
body.page-lagom-cms:has(.section-legal)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(16, 98, 254, .18), transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(0, 154, 255, .14), transparent 55%);
}

/* Hero banner */
body.page-lagompage .site-banner.banner-cms:has(~ * .section-legal),
body:has(.section-legal) .site-banner.banner-cms {
    background: linear-gradient(135deg, #08132e 0%, #0a1631 60%, #0f1d3f 100%) !important;
    color: #ffffff !important;
    padding: 60px 0 56px !important;
    margin: 0 0 48px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
}
body:has(.section-legal) .site-banner.banner-cms::before {
    content: '';
    position: absolute;
    top: -20%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0,154,255,0.22) 0%, transparent 70%);
    pointer-events: none;
}
body:has(.section-legal) .site-banner.banner-cms .banner-content {
    position: relative; z-index: 1;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}
body:has(.section-legal) .banner-caption {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 14px !important;
    background: rgba(0, 154, 255, 0.15) !important;
    border: 1px solid rgba(0, 212, 255, 0.40) !important;
    border-radius: 100px !important;
    color: #00d4ff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    margin-bottom: 18px !important;
}
body:has(.section-legal) .banner-title {
    color: #ffffff !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.15 !important;
    text-shadow: 0 4px 24px rgba(0, 154, 255, 0.20);
}
body:has(.section-legal) .banner-subtitle {
    color: #c4e3ff !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    opacity: 0.85;
}

/* Body legal : layout principal */
body:has(.section-legal) .site-section.section-legal {
    background: transparent !important;
    padding: 0 0 80px 0 !important;
    position: relative;
    z-index: 1;
}
body:has(.section-legal) .section-legal .container {
    max-width: 1180px !important;
    padding: 0 24px;
}
body:has(.section-legal) .section-legal .section-body {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 36px !important;
    align-items: start !important;
}
@media (max-width: 900px) {
    body:has(.section-legal) .section-legal .section-body { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* Sidebar nav */
body:has(.section-legal) .section-sidebar {
    background: linear-gradient(180deg, rgba(15, 29, 63, 0.85), rgba(10, 22, 49, 0.85)) !important;
    border: 1px solid rgba(0, 212, 255, 0.18) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    position: sticky !important;
    top: 24px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
}
body:has(.section-legal) .nav-legal {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body:has(.section-legal) .nav-legal .nav-item { margin: 0 !important; }
body:has(.section-legal) .nav-legal .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    color: #c4e3ff !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    position: relative;
    line-height: 1.35;
}
body:has(.section-legal) .nav-legal .nav-link:hover {
    background: rgba(0, 154, 255, 0.10) !important;
    border-color: rgba(0, 212, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}
body:has(.section-legal) .nav-legal .nav-link.active {
    background: linear-gradient(135deg, rgba(25, 102, 255, 0.20), rgba(0, 154, 255, 0.14)) !important;
    border-color: rgba(0, 212, 255, 0.40) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px rgba(0, 154, 255, 0.15) !important;
}
body:has(.section-legal) .nav-legal .nav-link.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    background: linear-gradient(180deg, #00d4ff, #1966FF);
    border-radius: 0 4px 4px 0;
}

/* Content sections */
body:has(.section-legal) .section-content {
    background: linear-gradient(180deg, rgba(15, 29, 63, 0.55), rgba(10, 22, 49, 0.55)) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 18px !important;
    padding: 40px 44px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
@media (max-width: 600px) {
    body:has(.section-legal) .section-content { padding: 28px 22px !important; }
}

body:has(.section-legal) .section-content section {
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
}
body:has(.section-legal) .section-content section:first-of-type { padding-top: 0 !important; }
body:has(.section-legal) .section-content section:last-of-type { border-bottom: 0 !important; }

body:has(.section-legal) .section-content h2,
body:has(.section-legal) .section-content h2.h3,
body:has(.section-legal) .section-content h3 {
    color: #00d4ff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}
body:has(.section-legal) .section-content p {
    color: #c4e3ff !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin: 0 0 14px 0 !important;
    opacity: 0.92;
}
body:has(.section-legal) .section-content p:last-child { margin-bottom: 0 !important; }
body:has(.section-legal) .section-content a {
    color: #00d4ff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px dashed rgba(0, 212, 255, 0.40) !important;
    transition: all 0.15s;
}
body:has(.section-legal) .section-content a:hover {
    color: #6298fe !important;
    border-bottom-color: #6298fe !important;
}

/* Footer du contenu legal (mailto contact) */
body:has(.section-legal) .section-content > footer {
    margin-top: 32px !important;
    padding: 22px 26px !important;
    background: linear-gradient(135deg, rgba(25, 102, 255, 0.08), rgba(0, 154, 255, 0.05)) !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    border-radius: 14px !important;
    text-align: center;
}
body:has(.section-legal) .section-content > footer p {
    margin: 0 !important;
    color: #c4e3ff !important;
    font-size: 13.5px !important;
}

/* Liste ul/ol dans le contenu legal */
body:has(.section-legal) .section-content ul,
body:has(.section-legal) .section-content ol {
    color: #c4e3ff !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    padding-left: 24px !important;
    margin: 0 0 14px 0 !important;
}
body:has(.section-legal) .section-content li { margin-bottom: 6px !important; }

/* Scrollbar custom dark navy */
body:has(.section-legal) .section-sidebar::-webkit-scrollbar { width: 6px; }
body:has(.section-legal) .section-sidebar::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.30); border-radius: 3px; }

/* =========================================================
   PCM PATCH — Bannières d'erreur DISCRÈTES (page commande /cart)
   Override des styles d'alerte précédents pour plus de subtilité
   ========================================================= */
html body .alert,
html body .alert-danger,
html body .alert-warning,
html body .alert-info,
html body .alert-success,
html body .form-error,
html body .error-message,
html body .help-block.has-error,
html body .has-error .help-block,
html body [class*="error-text"] {
    background: rgba(239, 68, 68, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    border-radius: 8px !important;
    color: #ffa39e !important;
    padding: 7px 12px 7px 32px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin: 6px 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* Bloc-level pour les bannières en flux (sidebar erreurs globales, etc.) */
html body .order-summary .alert-danger,
html body .order-summary .alert,
html body .order-summary .form-error,
html body .checkout-errors .alert,
html body .checkout-errors .alert-danger,
html body [class*="error-summary"] .alert,
html body [class*="error-summary"] .alert-danger {
    display: block !important;
    width: 100% !important;
}

/* Icône SVG plus petite + bien positionnée */
html body .alert::before,
html body .alert-danger::before,
html body .form-error::before,
html body .error-message::before,
html body .help-block.has-error::before {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
}

/* Variante warning (jaune doux) */
html body .alert-warning,
html body .alert-info {
    background: rgba(252, 211, 77, 0.06) !important;
    border-color: rgba(252, 211, 77, 0.25) !important;
    color: #fcd34d !important;
}
html body .alert-warning::before,
html body .alert-info::before {
    width: 14px !important;
    height: 14px !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Variante success (vert doux) */
html body .alert-success {
    background: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}
html body .alert-success::before {
    width: 14px !important;
    height: 14px !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Tooltip d'erreur HTML5 native + jQuery validate */
html body label.error,
html body label.help-block.error,
html body .invalid-feedback,
html body .invalid-feedback-tooltip,
html body .form-control-feedback {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    border-radius: 8px !important;
    color: #ffa39e !important;
    padding: 6px 10px 6px 28px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    display: inline-block !important;
    position: relative !important;
    line-height: 1.4 !important;
    width: auto !important;
}
html body label.error::before,
html body .invalid-feedback::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 13px !important;
    height: 13px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffa39e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Bordure subtile sur input invalide (au lieu d'un gros highlight rouge) */
html body .has-error input,
html body .has-error select,
html body .has-error textarea,
html body input.has-error,
html body select.has-error,
html body input.is-invalid,
html body input:invalid:not(:placeholder-shown):not([readonly]) {
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.08) !important;
}

/* =========================================================
   PCM PATCH — Bannières Lagom .message (page /order, /cart)
   La vraie classe utilisée est .message.message-danger (pas .alert-danger)
   ========================================================= */
html body .message,
html body div.message,
html body .message.message-danger,
html body .message.message-warning,
html body .message.message-info,
html body .message.message-success {
    background: rgba(239, 68, 68, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    border-radius: 10px !important;
    color: #ffa39e !important;
    padding: 10px 14px 10px 40px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin: 8px 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    text-align: left !important;
    min-height: auto !important;
}

/* Variantes warning / info */
html body .message.message-warning,
html body .message.message-info {
    background: rgba(252, 211, 77, 0.06) !important;
    border-color: rgba(252, 211, 77, 0.25) !important;
    color: #fcd34d !important;
}

/* Variante success */
html body .message.message-success {
    background: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}

/* Icône cercle Lagom : devient un petit SVG cercle exclamation à gauche */
html body .message .message-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cache l'icône Lagom natif (.lm-close, .lm-warning, etc.) */
html body .message .message-icon i.lm,
html body .message .message-icon i[class^="lm-"],
html body .message .message-icon i[class*=" lm-"],
html body .message .message-icon i.fa,
html body .message .message-icon i.ls { display: none !important; }

/* Injecte une icône SVG cercle exclamation propre */
html body .message.message-danger .message-icon::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffa39e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
html body .message.message-warning .message-icon::before,
html body .message.message-info .message-icon::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
html body .message.message-success .message-icon::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Titre / texte : pas de gras massif, alignement gauche */
html body .message .message-text,
html body .message .message-title,
html body .message h3.message-title,
html body .message h3.message-text {
    color: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Sous-texte (description en plus petit) */
html body .message .message-subtext {
    color: inherit !important;
    opacity: 0.85;
    font-size: 11.5px !important;
    margin-top: 2px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Variante .message-lg : on annule l'agrandissement, tout reste compact */
html body .message.message-lg {
    padding: 12px 16px 12px 40px !important;
    font-size: 12.5px !important;
}
html body .message.message-lg .message-text,
html body .message.message-lg .message-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Variante .message-no-data (placeholder "aucune donnée") : alignée centre, plus aérée */
html body .message.message-no-data {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 20px !important;
    background: rgba(0, 154, 255, 0.04) !important;
    border-color: rgba(0, 212, 255, 0.18) !important;
    color: #8fadc9 !important;
}
html body .message.message-no-data .message-icon {
    position: static !important;
    transform: none !important;
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
}
html body .message.message-no-data.message-danger .message-icon::before {
    width: 28px; height: 28px;
}
html body .message.message-no-data .message-text,
html body .message.message-no-data .message-title { text-align: center !important; }

/* =========================================================
   PCM PATCH FINAL — RESET COMPLET bannières .alert.alert-sm
   Cible exactement <div class="alert alert-danger alert-sm"> de Lagom Vue.js
   ========================================================= */

/* Désactive le pseudo-élément ::before qui créait le grand carré rouge */
html body div.alert.alert-danger::before,
html body div.alert.alert-danger.alert-sm::before,
html body div.alert.alert-warning::before,
html body div.alert.alert-warning.alert-sm::before,
html body div.alert.alert-info::before,
html body div.alert.alert-info.alert-sm::before,
html body div.alert.alert-success::before,
html body div.alert.alert-success.alert-sm::before,
html body div.alert.alert-danger::after,
html body div.alert.alert-warning::after,
html body div.alert.alert-success::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bannière .alert.alert-sm : look minimaliste cohérent PCM */
html body div.alert.alert-danger.alert-sm,
html body div.alert.alert-danger,
html body .alert.alert-danger.alert-sm,
html body .alert.alert-danger {
    background: rgba(239, 68, 68, 0.06) !important;
    background-image: none !important;
    background-color: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    border-radius: 8px !important;
    color: #ffa39e !important;
    padding: 8px 12px !important;
    padding-left: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 6px 0 !important;
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    text-indent: 0 !important;
    position: static !important;
    min-height: 0 !important;
}

html body div.alert.alert-warning.alert-sm,
html body div.alert.alert-warning,
html body .alert.alert-warning.alert-sm {
    background: rgba(252, 211, 77, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(252, 211, 77, 0.22) !important;
    border-radius: 8px !important;
    color: #fcd34d !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 6px 0 !important;
    box-shadow: none !important;
    display: block !important;
    text-align: left !important;
    text-indent: 0 !important;
    position: static !important;
}

html body div.alert.alert-success.alert-sm,
html body div.alert.alert-success,
html body .alert.alert-success.alert-sm {
    background: rgba(34, 197, 94, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    border-radius: 8px !important;
    color: #86efac !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 6px 0 !important;
    box-shadow: none !important;
    display: block !important;
    text-align: left !important;
    text-indent: 0 !important;
    position: static !important;
}

/* Cache les enfants <i>, <svg>, .alert-icon que Lagom Vue pourrait injecter */
html body .alert.alert-danger > i,
html body .alert.alert-danger > svg,
html body .alert.alert-danger .alert-icon,
html body .alert.alert-warning > i,
html body .alert.alert-warning > svg,
html body .alert.alert-warning .alert-icon,
html body .alert.alert-success > i,
html body .alert.alert-success > svg,
html body .alert.alert-success .alert-icon,
html body .alert.alert-info > i,
html body .alert.alert-info > svg,
html body .alert.alert-info .alert-icon { display: none !important; }

/* =========================================================
   PCM PATCH — Centrer bouton Google sur /login.php
   ========================================================= */
body.page-login .providerPreLinking,
body.page-login .providerPreLinking > * { text-align: center !important; }
body.page-login .social-signin-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
body.page-login .social-signin-btns > [class*="col"],
body.page-login .social-signin-btns > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 320px !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center !important;
}
body.page-login .social-signin-btns iframe,
body.page-login .social-signin-btns .g_id_signin,
body.page-login .social-signin-btns [data-provider] {
    margin: 0 auto !important;
    display: inline-block !important;
}
body.page-login .login-divider { margin-top: 18px !important; }

/* Centrage du sub-heading "Utilisez un compte social" + texte */
body.page-login .text-center,
body.page-login .sub-heading,
body.page-login .sub-heading-borderless { text-align: center !important; }


/* =========================================================
   PCM PATCH — Page 404 (.error-page) — éditorial sans box
   ========================================================= */
html body .main-body.error-page,
html body .main-body.error-page.pattern-bg-error {
    background: #050d24 !important;
    background-image: none !important;
    min-height: calc(100vh - 200px) !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Ligne fine cyan en haut de page */
html body .main-body.error-page::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff 30%, #1966FF 70%, transparent);
    z-index: 2;
}

/* Reset le container Lagom */
html body .error-page .container-fluid,
html body .error-page .main-grid {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: inherit !important;
}

html body .error-page .container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 80px 8vw !important;
    margin: 0 !important;
    max-width: 1400px !important;
    width: 100% !important;
    position: relative !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
        "kicker  digits"
        "title   digits"
        "desc    digits"
        "actions digits" !important;
    gap: 12px 60px !important;
    align-items: center !important;
}

/* "404" giant en outline à droite, jamais en box, jamais filled */
html body .error-page .error-page-title {
    grid-area: digits !important;
    display: block !important;
    font-size: clamp(180px, 28vw, 360px) !important;
    font-weight: 900 !important;
    line-height: 0.85 !important;
    letter-spacing: -0.06em !important;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(0, 212, 255, 0.55) !important;
    text-stroke: 2px rgba(0, 212, 255, 0.55) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 !important;
    text-shadow: none !important;
    animation: none !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    user-select: none;
    pointer-events: none;
    position: relative;
}

/* Petit kicker mono au-dessus du titre */
html body .error-page .container::before {
    content: 'Erreur · ' attr(data-code, '404');
    grid-area: kicker;
    color: #00d4ff;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
html body .error-page .container::before {
    content: 'Erreur · 404 · Hors-piste';
}

/* Titre principal */
html body .error-page h2 {
    grid-area: title !important;
    color: #ffffff !important;
    font-size: clamp(34px, 5vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    max-width: 580px;
    font-family: 'Poppins', -apple-system, sans-serif !important;
}

/* Description en italic + serif inspiration éditoriale */
html body .error-page p {
    grid-area: desc !important;
    color: rgba(196, 227, 255, 0.70) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 480px;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Actions : pas boutons, links + flèche */
html body .error-page .error-page-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    margin-top: 16px !important;
    justify-content: flex-start !important;
}
html body .error-page .error-page-actions .btn,
html body .error-page .error-page-actions .btn-primary,
html body .error-page .error-page-actions .btn-lg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    position: relative;
    color: #ffffff !important;
    min-width: 0 !important;
    width: auto !important;
    transition: gap 0.25s ease, color 0.2s ease !important;
}

/* Lien primary : underline accent cyan */
html body .error-page .error-page-actions .btn:nth-child(1) {
    color: #ffffff !important;
}
html body .error-page .error-page-actions .btn:nth-child(1)::before {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, #1966FF);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
html body .error-page .error-page-actions .btn:nth-child(1)::after {
    content: '→';
    font-size: 18px;
    color: #00d4ff;
    transition: transform 0.25s ease;
    margin-left: 4px;
}
html body .error-page .error-page-actions .btn:nth-child(1):hover {
    gap: 16px !important;
    color: #00d4ff !important;
}
html body .error-page .error-page-actions .btn:nth-child(1):hover::after {
    transform: translateX(6px);
}

/* Lien secondary : texte gris cyan, hover blanc */
html body .error-page .error-page-actions .btn:nth-child(2) {
    color: rgba(196, 227, 255, 0.65) !important;
    font-weight: 500 !important;
}
html body .error-page .error-page-actions .btn:nth-child(2)::after {
    content: ' ↗';
    color: rgba(196, 227, 255, 0.50);
    margin-left: 2px;
    transition: transform 0.25s ease;
}
html body .error-page .error-page-actions .btn:nth-child(2):hover {
    color: #ffffff !important;
}
html body .error-page .error-page-actions .btn:nth-child(2):hover::after {
    color: #00d4ff;
    transform: translate(2px, -2px);
}

/* Lignes décoratives discrètes en haut/bas */
html body .main-body.error-page::after {
    content: '';
    position: absolute;
    bottom: 32px; left: 8vw;
    width: 60px; height: 1px;
    background: rgba(0, 212, 255, 0.40);
    z-index: 2;
}

/* Responsive : empile vertical */
@media (max-width: 900px) {
    html body .error-page .container {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "digits"
            "kicker"
            "title"
            "desc"
            "actions" !important;
        gap: 18px !important;
        padding: 60px 24px !important;
        text-align: left !important;
    }
    html body .error-page .error-page-title {
        font-size: clamp(140px, 40vw, 240px) !important;
        line-height: 0.85 !important;
        -webkit-text-stroke-width: 1.5px !important;
    }
}
@media (max-width: 480px) {
    html body .error-page .error-page-actions { flex-direction: column; gap: 18px !important; }
}



/* =========================================================
   PCM PATCH — Icônes SSL liste domaines (clientareadomains)
   ========================================================= */
/* Wrapper .ssl-info : devient un badge PCM 24×24 arrondi */
html body .ssl-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Cache l'img SVG native, on injecte un SVG plus moderne via ::before */
html body .ssl-info img.ssl-status,
html body .ssl-info .ssl-status {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

html body .ssl-info::before {
    content: '';
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    transition: transform 0.2s ease;
}

/* === SSL ACTIF (vert) : cadenas fermé avec check === */
html body .ssl-info:has(.ssl-status[src*="ssl-active"]) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.08)) !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.18), inset 0 0 0 1px rgba(34, 197, 94, 0.10) !important;
}
html body .ssl-info:has(.ssl-status[src*="ssl-active"])::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 1 1 8 0v4'/><polyline points='10 16 11.5 17.5 14 14.5' stroke='%2386efac' stroke-width='2'/></svg>");
}
html body .ssl-info:has(.ssl-status[src*="ssl-active"]):hover {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.40) !important;
}

/* === SSL INACTIF / INVALIDE (rouge) : cadenas ouvert avec X === */
html body .ssl-info:has(.ssl-status[src*="ssl-inactive"]) {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06)) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), inset 0 0 0 1px rgba(239, 68, 68, 0.08) !important;
}
html body .ssl-info:has(.ssl-status[src*="ssl-inactive"])::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 7-2.65'/><line x1='10' y1='15' x2='14' y2='18' stroke='%23fca5a5' stroke-width='2.2'/><line x1='14' y1='15' x2='10' y2='18' stroke='%23fca5a5' stroke-width='2.2'/></svg>");
}
html body .ssl-info:has(.ssl-status[src*="ssl-inactive"]):hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.35) !important;
}

/* === SSL INCONNU (jaune/ambre) : cadenas avec ? === */
html body .ssl-info:has(.ssl-status[src*="ssl-unknown"]) {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.20), rgba(252, 211, 77, 0.06)) !important;
    border: 1px solid rgba(252, 211, 77, 0.45) !important;
    box-shadow: 0 0 12px rgba(252, 211, 77, 0.18) !important;
}
html body .ssl-info:has(.ssl-status[src*="ssl-unknown"])::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde68a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/><path d='M11.5 15c0-1 .8-1.5 1.5-1.5s1.5.5 1.5 1.5c0 .8-1.5 1-1.5 2.5' stroke='%23fde68a' stroke-width='1.8'/><circle cx='13' cy='18.5' r='0.6' fill='%23fde68a'/></svg>");
}

/* Fallback pour navigateurs sans :has() (Firefox ancien) : utilise les classes natives sur l'img */
@supports not selector(:has(*)) {
    html body .ssl-info { background: rgba(0, 154, 255, 0.10) !important; border: 1px solid rgba(0, 212, 255, 0.30) !important; }
    html body .ssl-info img.ssl-status { display: block !important; width: 14px !important; height: 14px !important; opacity: 1 !important; visibility: visible !important; position: static !important; }
    html body .ssl-info::before { display: none !important; }
}

/* === SSL "à configurer" (sslStatus null + domaine actif) : badge jaune avec tooltip === */
html body .ssl-info:not(:has(.ssl-status)) {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.20), rgba(252, 211, 77, 0.06)) !important;
    border: 1px solid rgba(252, 211, 77, 0.45) !important;
    box-shadow: 0 0 12px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(252, 211, 77, 0.08) !important;
    cursor: help !important;
}
html body .ssl-info:not(:has(.ssl-status))::before {
    content: '' !important;
    width: 14px;
    height: 14px;
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde68a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/><circle cx='12' cy='16' r='0.6' fill='%23fde68a'/><path d='M11 13.5c0-.6.5-1.2 1-1.2s1 .4 1 1c0 .5-1 .8-1 1.5' stroke-width='1.8'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Tooltip "SSL à configurer" au hover */
html body .ssl-info:not(:has(.ssl-status))::after {
    content: 'SSL à configurer';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0a1631;
    color: #fde68a;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(252, 211, 77, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
    z-index: 100;
}
html body .ssl-info:not(:has(.ssl-status)):hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(252, 211, 77, 0.40) !important;
}
html body .ssl-info:not(:has(.ssl-status)):hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

/* === SSL en cours de scan (ssl-loading.gif + class .ssl-sync) : badge cyan pulse === */
html body .ssl-info:has(.ssl-status[src*="ssl-loading"]),
html body .ssl-info:has(.ssl-status.ssl-sync) {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.20), rgba(0, 212, 255, 0.06)) !important;
    border: 1px solid rgba(0, 212, 255, 0.45) !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.22), inset 0 0 0 1px rgba(0, 212, 255, 0.10) !important;
    cursor: help !important;
    animation: pcm-ssl-pulse 2s ease-in-out infinite;
}
html body .ssl-info:has(.ssl-status[src*="ssl-loading"])::before,
html body .ssl-info:has(.ssl-status.ssl-sync)::before {
    content: '' !important;
    width: 14px;
    height: 14px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/><path d='M9 15a3 3 0 0 1 6 0' stroke='%2300d4ff' stroke-width='1.8'><animateTransform attributeName='transform' type='rotate' from='0 12 16' to='360 12 16' dur='1.2s' repeatCount='indefinite'/></path></svg>");
}
/* Tooltip "Vérification en cours…" */
html body .ssl-info:has(.ssl-status[src*="ssl-loading"])::after,
html body .ssl-info:has(.ssl-status.ssl-sync)::after {
    content: 'Vérification SSL en cours…';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0a1631;
    color: #00d4ff;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border: 1px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
    z-index: 100;
}
html body .ssl-info:has(.ssl-status[src*="ssl-loading"]):hover::after,
html body .ssl-info:has(.ssl-status.ssl-sync):hover::after {
    opacity: 1;
}
@keyframes pcm-ssl-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(0, 212, 255, 0.22), inset 0 0 0 1px rgba(0, 212, 255, 0.10); }
    50%      { box-shadow: 0 0 22px rgba(0, 212, 255, 0.45), inset 0 0 0 1px rgba(0, 212, 255, 0.20); }
}


/* =========================================================
   PCM — Page Domain Details — design complet propre
   ========================================================= */
body[class*="page-clientareadomain"] { background: #050d24 !important; color: #e2e8f0 !important; }
body[class*="page-clientareadomain"]::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(16, 98, 254, .14), transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(0, 154, 255, .12), transparent 55%);
}
body[class*="page-clientareadomain"] .main-body { background: transparent !important; }
body[class*="page-clientareadomain"] .main-body > .container,
body[class*="page-clientareadomain"] .main-grid { position: relative !important; z-index: 1 !important; max-width: 1280px !important; padding: 32px 24px 60px !important; }

/* === Carte hero (icône+nom) en bas : MASQUÉE (déjà dans stats du haut) === */
body[class*="page-clientareadomain"] .product-details { display: none !important; }

/* === Sidebar Gérer / DNS Manager / Actions : chaque section dans une CARD === */
body[class*="page-clientareadomain"] .panel.panel-sidebar,
body[class*="page-clientareadomain"] .panel.panel-default {
    background: linear-gradient(180deg, rgba(15,29,63,0.50), rgba(10,22,49,0.60)) !important;
    border: 1px solid rgba(0,212,255,0.16) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    overflow: hidden !important;
}
body[class*="page-clientareadomain"] .panel-heading {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,212,255,0.12) !important;
    padding: 14px 18px !important;
}
body[class*="page-clientareadomain"] .panel-title,
body[class*="page-clientareadomain"] .panel-heading h3,
body[class*="page-clientareadomain"] .panel-heading h5 {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    text-transform: none !important;
}
body[class*="page-clientareadomain"] .panel-title::before,
body[class*="page-clientareadomain"] .panel-heading h3::before,
body[class*="page-clientareadomain"] .panel-heading h5::before {
    content: '';
    width: 3px; height: 14px;
    background: linear-gradient(180deg, #00d4ff, #1966FF);
    border-radius: 2px;
    flex-shrink: 0;
}
body[class*="page-clientareadomain"] .panel-body { padding: 14px 18px !important; background: transparent !important; }

/* Liens dans les panels (Gérer, Actions, etc.) */
body[class*="page-clientareadomain"] .panel ul,
body[class*="page-clientareadomain"] .panel ol,
body[class*="page-clientareadomain"] .panel .list-group { list-style: none !important; padding: 0 !important; margin: 0 !important; }
body[class*="page-clientareadomain"] .panel ul li,
body[class*="page-clientareadomain"] .panel .list-group-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,212,255,0.06) !important;
    padding: 0 !important;
}
body[class*="page-clientareadomain"] .panel ul li:last-child,
body[class*="page-clientareadomain"] .panel .list-group-item:last-child { border-bottom: 0 !important; }

body[class*="page-clientareadomain"] .panel ul li > a,
body[class*="page-clientareadomain"] .panel .list-group-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    border-radius: 8px !important;
    margin: 2px 0 !important;
}
body[class*="page-clientareadomain"] .panel ul li > a:hover,
body[class*="page-clientareadomain"] .panel .list-group-item > a:hover {
    background: rgba(0,154,255,0.10) !important;
    color: #00d4ff !important;
    transform: translateX(2px);
}

/* Cache TOUTES les icônes natives Lagom dans les panels (lm-*, ls-*, fa-*) */
body[class*="page-clientareadomain"] .panel a > i,
body[class*="page-clientareadomain"] .panel li > i,
body[class*="page-clientareadomain"] .panel .list-group-item > a > i,
body[class*="page-clientareadomain"] .panel ul li > a > i { display: none !important; }

/* Icônes SVG via ::before (Iconly Curved) */
body[class*="page-clientareadomain"] .panel a::before {
    content: '';
    width: 18px; height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: filter 0.15s ease;
}
body[class*="page-clientareadomain"] .panel a:hover::before {
    filter: brightness(0) saturate(100%) invert(70%) sepia(95%) saturate(2900%) hue-rotate(165deg) brightness(105%) contrast(101%);
}
body[class*="page-clientareadomain"] .panel a[data-pcm-renew-icon="1"]::before { display: none !important; }

body[class*="page-clientareadomain"] .panel a[href*="#Overview"]::before,
body[class*="page-clientareadomain"] .panel a[href*="#tabOverview"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12c0-3 4-7 10-7s10 4 10 7-4 7-10 7-10-4-10-7z'/><circle cx='12' cy='12' r='3'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="#Autorenew"]::before,
body[class*="page-clientareadomain"] .panel a[href*="#tabAutorenew"]::before,
body[class*="page-clientareadomain"] .panel a[href*="domain-renewal"]:not([data-pcm-renew-icon="1"])::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 14.5-7.1L21 6'/><polyline points='21 2 21 6 17 6'/><path d='M21 12a9 9 0 0 1-14.5 7.1L3 18'/><polyline points='3 22 3 18 7 18'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="#Nameservers"]::before,
body[class*="page-clientareadomain"] .panel a[href*="#tabNameservers"]::before,
body[class*="page-clientareadomain"] .panel a[href*="DNSManagerPCM"]::before,
body[class*="page-clientareadomain"] .panel a[href*="dnsmanager"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3a14 14 0 0 1 0 18'/><path d='M12 3a14 14 0 0 0 0 18'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="#Reglock"]::before,
body[class*="page-clientareadomain"] .panel a[href*="#tabReglock"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5c-.4 0-.9.1-1.3.3l-6 2.7C4 6 3.5 7 3.5 8v4.4c0 4.6 3.3 8.9 7.6 9.9.6.1 1.2.1 1.8 0 4.3-1 7.6-5.3 7.6-9.9V8c0-1-.5-2-1.2-2.5l-6-2.7c-.4-.2-.9-.3-1.3-.3z'/><path d='M8.5 12.5l2.5 2.5 4.5-4.5'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="domaincontacts"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7.5' r='4'/><path d='M4 20c0-3.5 3.6-6 8-6s8 2.5 8 6'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="#PrivateNS"]::before,
body[class*="page-clientareadomain"] .panel a[href*="#tabPrivateNS"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='7' rx='2'/><rect x='3' y='14' width='18' height='7' rx='2'/><circle cx='7' cy='6.5' r='0.8' fill='%23ffffff'/><circle cx='7' cy='17.5' r='0.8' fill='%23ffffff'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="GetEPPCode"]::before,
body[class*="page-clientareadomain"] .panel a[href*="epp"]::before,
body[class*="page-clientareadomain"] .panel a[href*="EppCode"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='14' r='4'/><path d='M11 11l8-8'/><path d='M16 6l3 3'/><path d='M19 3l2 2'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="domainregister"]::before,
body[class*="page-clientareadomain"] .panel a[href*="/cart.php"]:not([href*="renewal"])::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.5'/><path d='M12 8v8M8 12h8'/></svg>");
}
body[class*="page-clientareadomain"] .panel a[href*="domaintransfer"]::before,
body[class*="page-clientareadomain"] .panel a[href*="transfer"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3l5 5-5 5'/><path d='M21 8H8a4 4 0 0 0-4 4'/><path d='M8 21l-5-5 5-5'/><path d='M3 16h13a4 4 0 0 0 4-4'/></svg>");
}

/* === Panel SSL : meilleur design avec list-info élégante === */
body[class*="page-clientareadomain"] .panel .list-info,
body[class*="page-clientareadomain"] .panel .list-info-bordered,
body[class*="page-clientareadomain"] .panel .list-info-50 {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body[class*="page-clientareadomain"] .panel .list-info-bordered li,
body[class*="page-clientareadomain"] .panel .list-info li {
    padding: 13px 18px !important;
    border-bottom: 1px solid rgba(0,212,255,0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}
body[class*="page-clientareadomain"] .panel .list-info-bordered li:last-child,
body[class*="page-clientareadomain"] .panel .list-info li:last-child { border-bottom: 0 !important; }
body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-title,
body[class*="page-clientareadomain"] .panel .list-info .list-info-title {
    color: #8fadc9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
}
body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text,
body[class*="page-clientareadomain"] .panel .list-info .list-info-text {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: right !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* === Section "Qu'est ce que vous voulez faire aujourd'hui" → wrap dans une card === */
body[class*="page-clientareadomain"] .panel.panel-sidebar.m-b-0,
body[class*="page-clientareadomain"] .panel.panel-sidebar { /* already styled above */ }

/* === Onglets / tab-content === */
body[class*="page-clientareadomain"] .nav-tabs {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,212,255,0.18) !important;
    margin-bottom: 22px !important;
    display: flex !important;
    gap: 4px !important;
}
body[class*="page-clientareadomain"] .nav-tabs > li > a,
body[class*="page-clientareadomain"] .nav-tabs .nav-link {
    color: #8fadc9 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: -1px !important;
}
body[class*="page-clientareadomain"] .nav-tabs > li > a:hover { color: #ffffff !important; background: rgba(0,154,255,0.05) !important; }
body[class*="page-clientareadomain"] .nav-tabs > li.active > a,
body[class*="page-clientareadomain"] .nav-tabs .nav-link.active { color: #00d4ff !important; background: transparent !important; border-bottom-color: #00d4ff !important; }

/* === Section form (Nameservers, etc.) === */
body[class*="page-clientareadomain"] .section { background: transparent !important; padding: 0 !important; margin-bottom: 26px !important; }
body[class*="page-clientareadomain"] .section-header { margin-bottom: 14px !important; text-align: left !important; }
body[class*="page-clientareadomain"] .section-title,
body[class*="page-clientareadomain"] .section h2.section-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
body[class*="page-clientareadomain"] .section-title::before {
    content: '';
    width: 4px; height: 16px;
    background: linear-gradient(180deg, #00d4ff, #1966FF);
    border-radius: 2px;
}
body[class*="page-clientareadomain"] .section-desc { color: #8fadc9 !important; font-size: 12.5px !important; }

/* === Inputs === */
body[class*="page-clientareadomain"] .form-control,
body[class*="page-clientareadomain"] input.form-control,
body[class*="page-clientareadomain"] select.form-control,
body[class*="page-clientareadomain"] textarea.form-control {
    background: rgba(5,13,36,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,212,255,0.20) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
    box-shadow: none !important;
}
body[class*="page-clientareadomain"] .form-control:focus {
    border-color: rgba(0,212,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.12) !important;
}

/* === Boutons === */
body[class*="page-clientareadomain"] .btn-primary,
body[class*="page-clientareadomain"] button[type="submit"] {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.25) !important;
    transition: all 0.2s ease !important;
}
body[class*="page-clientareadomain"] .btn-primary:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.10) !important;
}

/* === Toggle Autorenew === */
body[class*="page-clientareadomain"] .panel.panel-switch {
    background: rgba(0,154,255,0.06) !important;
    border: 1px solid rgba(0,212,255,0.20) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
body[class*="page-clientareadomain"] .panel.panel-switch.checked {
    background: linear-gradient(135deg, rgba(25,102,255,0.15), rgba(0,154,255,0.08)) !important;
    border-color: rgba(0,212,255,0.50) !important;
    box-shadow: 0 0 16px rgba(0,154,255,0.15) !important;
}

/* === Alerte "Domaine déverrouillé" === */
body[class*="page-clientareadomain"] .alert.alert-warning,
body[class*="page-clientareadomain"] .alert.alert-lagom.alert-warning,
body[class*="page-clientareadomain"] .alert.alert-lagom.alert-primary.alert-warning {
    background: linear-gradient(135deg, rgba(252,165,165,0.10), rgba(239,68,68,0.04)) !important;
    border: 1px solid rgba(252,165,165,0.25) !important;
    border-left: 3px solid #fca5a5 !important;
    border-radius: 12px !important;
    color: #fca5a5 !important;
    padding: 14px 18px 14px 52px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    box-shadow: none !important;
    position: relative !important;
    margin-bottom: 20px !important;
}
body[class*="page-clientareadomain"] .alert.alert-warning::before {
    content: '';
    position: absolute;
    left: 16px; top: 16px;
    width: 20px; height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><line x1='2' y1='2' x2='22' y2='22' stroke-width='2'/></svg>");
}
body[class*="page-clientareadomain"] .alert.alert-warning strong { color: #ffffff !important; }

/* === Section "Qu'est ce que vous voulez faire" - les liens dans panel-body === */
body[class*="page-clientareadomain"] .panel-body ul.list-group-v,
body[class*="page-clientareadomain"] .panel-body ul.list-group,
body[class*="page-clientareadomain"] .panel-body .list-group-v { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* Liens génériques cyan — SAUF dans tableaux/sidebars (laissés en blanc) */
body[class*="page-clientareadomain"] .section-body a:not(.btn):not(.nav-link):not(.tabControlLink):not(.list-group-item):not(table a) {
    color: #00d4ff !important;
    text-decoration: none !important;
}
body[class*="page-clientareadomain"] .section-body a:not(.btn):not(.nav-link):hover { color: #6298fe !important; }

/* === Responsive === */
@media (max-width: 768px) {
    body[class*="page-clientareadomain"] .main-body > .container { padding: 24px 16px 40px !important; }
}

/* === Fix DOUBLE ICÔNE : cache ::before CSS quand le JS a déjà injecté un SVG === */
html body a[data-pcm-domain-icon="1"]::before,
html body a[data-pcm-renew-icon="1"]::before,
html body a[data-pcm-sidebar-fixed="1"]::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   PCM — Aération des sidebar Gérer/DNS/Actions (moins compact, plus design)
   ========================================================= */
html body[class*="page-clientareadomain"] .panel.panel-sidebar,
html body[class*="page-clientareadomain"] .panel.panel-default {
    margin-bottom: 22px !important;
    padding: 0 !important;
}
html body[class*="page-clientareadomain"] .panel-heading {
    padding: 18px 22px !important;
    border-bottom: 1px solid rgba(0,212,255,0.10) !important;
}
html body[class*="page-clientareadomain"] .panel-title,
html body[class*="page-clientareadomain"] .panel-heading h3,
html body[class*="page-clientareadomain"] .panel-heading h5 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    gap: 12px !important;
}
html body[class*="page-clientareadomain"] .panel-title::before,
html body[class*="page-clientareadomain"] .panel-heading h3::before,
html body[class*="page-clientareadomain"] .panel-heading h5::before {
    width: 4px !important; height: 18px !important;
    border-radius: 3px !important;
}
html body[class*="page-clientareadomain"] .panel-body { padding: 10px 12px !important; }

/* Items : plus de respiration + lignes séparateurs plus visibles */
html body[class*="page-clientareadomain"] .panel ul li > a,
html body[class*="page-clientareadomain"] .panel .list-group-item > a,
html body[class*="page-clientareadomain"] .panel ul li a {
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    gap: 14px !important;
    border-radius: 10px !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
    min-height: 48px !important;
}
html body[class*="page-clientareadomain"] .panel ul li > a:hover,
html body[class*="page-clientareadomain"] .panel .list-group-item > a:hover {
    background: rgba(0, 154, 255, 0.12) !important;
    transform: translateX(3px) !important;
}

/* Séparateurs entre items dans la même card (pas trop épais) */
html body[class*="page-clientareadomain"] .panel ul li:not(:last-child),
html body[class*="page-clientareadomain"] .panel .list-group-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important;
}

/* Espace entre les 3 cards (Gérer / DNS / Actions) */
html body[class*="page-clientareadomain"] .panel + .panel { margin-top: 18px !important; }

/* === Fix doublon SVG : cache TOUT SVG/icône natif dans le même <li> que mon SVG injecté === */
html body li:has(a[data-pcm-domain-icon="1"]) > svg,
html body li:has(a[data-pcm-domain-icon="1"]) > i,
html body li:has(a[data-pcm-domain-icon="1"]) > .icon,
html body li:has(a[data-pcm-domain-icon="1"]) > .icon-wrap,
html body li:has(a[data-pcm-domain-icon="1"]) > .lagom-icon,
html body li:has(a[data-pcm-domain-icon="1"]) svg:not(.pcm-injected-icon):not(.pcm-icon-wrap svg),
html body li:has(a[data-pcm-domain-icon="1"]) a > svg:not(.pcm-injected-icon),
html body li:has(a[data-pcm-domain-icon="1"]) a > i {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}
/* Ne touche PAS au wrapper PCM */
html body .pcm-icon-wrap,
html body .pcm-icon-wrap svg.pcm-injected-icon {
    display: inline-flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
}
html body .pcm-icon-wrap svg.pcm-injected-icon {
    width: 18px !important;
    height: 18px !important;
}

/* === Marges latérales pour aérer les items sidebar === */
html body[class*="page-clientareadomain"] .panel-body {
    padding: 12px 16px !important;
}
html body[class*="page-clientareadomain"] .panel ul li > a,
html body[class*="page-clientareadomain"] .panel .list-group-item > a {
    margin: 4px 0 !important;
}
/* Les <li> n'ont pas de bordure plate qui touche le bord */
html body[class*="page-clientareadomain"] .panel ul li:not(:last-child),
html body[class*="page-clientareadomain"] .panel .list-group-item:not(:last-child) {
    border-bottom: 0 !important;
}
/* Séparateurs : remplacés par un inset (laisse les marges latérales) */
html body[class*="page-clientareadomain"] .panel ul li:not(:last-child) > a {
    position: relative;
}
html body[class*="page-clientareadomain"] .panel ul li:not(:last-child) > a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: -4px;
    height: 1px;
    background: rgba(0, 212, 255, 0.06);
    pointer-events: none;
}

/* === Marges latérales ENCORE plus généreuses === */
html body[class*="page-clientareadomain"] .panel-body {
    padding: 14px 20px !important;
}
html body[class*="page-clientareadomain"] .panel ul li > a,
html body[class*="page-clientareadomain"] .panel .list-group-item > a {
    margin: 5px 0 !important;
    padding: 13px 16px !important;
}
/* Séparateurs avec inset 20px */
html body[class*="page-clientareadomain"] .panel ul li:not(:last-child) > a::after {
    left: 16px !important;
    right: 16px !important;
}

/* =========================================================
   PCM PATCH — Fix 3 bugs (Gérer les DNS alignement / double hover / SSL badge)
   ========================================================= */

/* 1. Fix "Gérer les DNS" : aligner l'icône comme les autres items */
html body[class*="page-clientareadomain"] .list-group.list-group-tab-nav .list-group-item,
html body[class*="page-clientareadomain"] .list-group.list-group-tab-nav > a {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* L'item "Gérer les DNS" a parfois un padding extra venant du tpl natif - reset */
html body[class*="page-clientareadomain"] .list-group .pcm-icon-wrap {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 2. Fix double hover dans "Qu'est ce que vous voulez faire aujourd'hui" */
/* Cible le panel "doToday" : désactiver le hover sur le wrapper list-group-item */
html body[class*="page-clientareadomain"] .panel.panel-sidebar.m-b-0 .list-group-item:hover,
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item:hover {
    background: transparent !important;
}
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item > a {
    /* Force le hover sur le <a>, pas sur le <li> parent */
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Statut SSL : applique le badge SSL design (comme sur /clientarea.php?action=domains) */
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Le wrapper du statut SSL devient un badge PCM */
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > img.ssl-status,
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > .ssl-status,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text > img.ssl-status,
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > i.fa,
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > i.fas,
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > i.far,
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > i[class*="fa-lock"],
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > i[class*="fa-shield"],
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text > svg,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text > i.fa,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text > i.fas,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text > svg {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    margin: 0 !important;
}
html body[class*="page-clientareadomain"] .panel .list-info-bordered .list-info-text::before,
html body[class*="page-clientareadomain"] .panel .list-info .list-info-text::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
/* SSL actif (vert) */
html body[class*="page-clientareadomain"] .panel .list-info-bordered li:has(.ssl-status[src*="ssl-active"]) .list-info-text::before,
html body[class*="page-clientareadomain"] .panel .list-info li:has(.ssl-status[src*="ssl-active"]) .list-info-text::before {
    background-color: rgba(34, 197, 94, 0.22) !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.18) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 1 1 8 0v4'/><polyline points='10 16 11.5 17.5 14 14.5' stroke='%2386efac' stroke-width='2'/></svg>") !important;
}
/* SSL inactif (rouge) */
html body[class*="page-clientareadomain"] .panel .list-info-bordered li:has(.ssl-status[src*="ssl-inactive"]) .list-info-text::before {
    background-color: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 7-2.65'/><line x1='10' y1='15' x2='14' y2='18' stroke-width='2.2'/><line x1='14' y1='15' x2='10' y2='18' stroke-width='2.2'/></svg>") !important;
}
/* SSL loading / sync (cyan pulse) */
html body[class*="page-clientareadomain"] .panel .list-info-bordered li:has(.ssl-status[src*="ssl-loading"]) .list-info-text::before,
html body[class*="page-clientareadomain"] .panel .list-info-bordered li:has(.ssl-status.ssl-sync) .list-info-text::before {
    background-color: rgba(0, 212, 255, 0.20) !important;
    border: 1px solid rgba(0, 212, 255, 0.45) !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.22) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/><circle cx='12' cy='16' r='0.6' fill='%2300d4ff'/></svg>") !important;
    animation: pcm-ssl-pulse 2s ease-in-out infinite;
}
/* SSL inconnu (jaune) */
html body[class*="page-clientareadomain"] .panel .list-info-bordered li:has(.ssl-status[src*="ssl-unknown"]) .list-info-text::before {
    background-color: rgba(252, 211, 77, 0.20) !important;
    border: 1px solid rgba(252, 211, 77, 0.45) !important;
    box-shadow: 0 0 12px rgba(252, 211, 77, 0.18) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde68a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/><path d='M11.5 15c0-1 .8-1.5 1.5-1.5s1.5.5 1.5 1.5c0 .8-1.5 1-1.5 2.5'/><circle cx='13' cy='18.5' r='0.6' fill='%23fde68a'/></svg>") !important;
}

/* Fix doublon SSL : kill le ::before global UNIQUEMENT là où mon badge .list-info-text::before existe */
/* (sur la page details, à l'intérieur de .list-info-bordered → mon badge s'applique → on cache le doublon natif) */
html body[class*="page-clientareadomain"] .list-info-bordered .ssl-info::before,
html body[class*="page-clientareadomain"] .list-info .ssl-info::before {
    display: none !important;
    content: none !important;
}

/* Cache aussi tout badge SSL injecté par d'autres scripts custom dans .list-info-text */
html body[class*="page-clientareadomain"] .list-info-text [class*="ssl-badge"]:not(.pcm-ssl-badge),
html body[class*="page-clientareadomain"] .list-info-text [class*="ssl-icon"]:not(.pcm-ssl-icon) {
    display: none !important;
}

/* =========================================================
   PCM PATCH FINAL — Fix barre shake + couleurs blanches + designs pages
   ========================================================= */

/* 1) Désactive l'animation transition sur les sidebars au chargement (fix shake) */
html body[class*="page-clientareadomain"] .panel,
html body[class*="page-clientareadomain"] .panel.panel-sidebar,
html body[class*="page-clientareadomain"] .panel.panel-default,
html body[class*="page-clientareadomain"] .list-group-tab-nav .list-group-item {
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
}
/* Empêche width/height/padding d'animer (cause du shake) */
html body[class*="page-clientareadomain"] .panel * {
    transition-property: background-color, color, transform, opacity, border-color, box-shadow !important;
}

/* 2) Panel "Qu'est ce que vous voulez faire" : TOUS les liens en BLANC + ultra compact */
html body[class*="page-clientareadomain"] .panel.panel-sidebar a,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a:link,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a:visited,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a *,
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item,
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item * {
    color: #ffffff !important;
}
html body[class*="page-clientareadomain"] .panel.panel-sidebar a:hover,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a:hover * {
    color: #00d4ff !important;
}

/* Espace ultra réduit dans le panel "À faire" */
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a.list-group-item {
    padding: 7px 14px !important;
    min-height: 34px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,212,255,0.05) !important;
}
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item:last-child {
    border-bottom: 0 !important;
}
html body[class*="page-clientareadomain"] .panel.panel-sidebar .panel-body {
    padding: 4px 8px !important;
}

/* 3) Design page domaincontacts (formulaire info contact) */
body.page-clientareadomaincontacts .panel.panel-default,
body.page-clientareadomainregisterns .panel.panel-default,
body[class*="page-clientareadomain"] .form-control {
    background: rgba(5,13,36,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,212,255,0.20) !important;
}
body.page-clientareadomaincontacts h2,
body.page-clientareadomaincontacts h3,
body.page-clientareadomainregisterns h2,
body.page-clientareadomainregisterns h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
body.page-clientareadomaincontacts label,
body.page-clientareadomaincontacts .control-label,
body.page-clientareadomainregisterns label,
body.page-clientareadomainregisterns .control-label {
    color: #c4e3ff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* 4) Onglet Nameservers : style cohérent du form */
body[class*="page-clientareadomain"] #tabNameservers .form-control,
body[class*="page-clientareadomain"] #Nameservers .form-control,
body[class*="page-clientareadomain"] .tab-pane#Nameservers input {
    background: rgba(5,13,36,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,212,255,0.20) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
}
body[class*="page-clientareadomain"] .tab-pane label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
}

/* =========================================================
   PCM PATCH — Boutons pages domain*  IDENTIQUES à la page /order
   ========================================================= */
/* Primary : gradient bleu/cyan PCM (comme /order/hebergement-wordpress) */
html body[class*="page-clientareadomain"] .btn-primary,
html body[class*="page-clientareadomain"] button.btn-primary,
html body[class*="page-clientareadomain"] a.btn-primary,
html body[class*="page-clientareadomain"] input.btn-primary,
html body[class*="page-clientareadomain"] button[type="submit"]:not(.btn-default):not(.btn-secondary),
html body[class*="page-clientareadomain"] input[type="submit"]:not(.btn-default):not(.btn-secondary),
html body[class*="page-clientareadomain"] .btn-submit,
html body[class*="page-clientareadomain"] .btn-action,
html body[class*="page-clientareadomain"] .btn-action-primary,
html body[class*="page-clientareadomain"] .btn.btn-lg:not(.btn-default):not(.btn-secondary):not(.btn-outline) {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-color: #1966FF !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    border: 0 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    text-shadow: none !important;
    transition: box-shadow .2s ease, filter .2s ease, transform .15s ease !important;
}
html body[class*="page-clientareadomain"] .btn-primary:hover,
html body[class*="page-clientareadomain"] button.btn-primary:hover,
html body[class*="page-clientareadomain"] a.btn-primary:hover,
html body[class*="page-clientareadomain"] button[type="submit"]:hover,
html body[class*="page-clientareadomain"] input[type="submit"]:hover,
html body[class*="page-clientareadomain"] .btn-action:hover {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}
html body[class*="page-clientareadomain"] .btn-primary:focus,
html body[class*="page-clientareadomain"] .btn-primary:active {
    box-shadow: 0 0 0 3px rgba(0,154,255,0.30), 0 4px 14px rgba(25,102,255,0.30) !important;
    color: #ffffff !important;
}

/* Secondary : ghost cyan PCM */
html body[class*="page-clientareadomain"] .btn-default,
html body[class*="page-clientareadomain"] .btn-secondary,
html body[class*="page-clientareadomain"] a.btn-default,
html body[class*="page-clientareadomain"] button.btn-default {
    background: rgba(0,154,255,0.08) !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0,212,255,0.35) !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: all .2s ease !important;
}
html body[class*="page-clientareadomain"] .btn-default:hover,
html body[class*="page-clientareadomain"] .btn-secondary:hover {
    background: rgba(0,154,255,0.18) !important;
    border-color: rgba(0,212,255,0.65) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Outline */
html body[class*="page-clientareadomain"] .btn-outline {
    background: transparent !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0,212,255,0.40) !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
}
html body[class*="page-clientareadomain"] .btn-outline:hover {
    background: rgba(0,154,255,0.10) !important;
    color: #ffffff !important;
}

/* Danger (Annuler, Supprimer) */
html body[class*="page-clientareadomain"] .btn-danger,
html body[class*="page-clientareadomain"] button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(239,68,68,0.30) !important;
}
html body[class*="page-clientareadomain"] .btn-danger:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Tailles spéciales : btn-lg, btn-sm, btn-xs */
html body[class*="page-clientareadomain"] .btn-lg { padding: 14px 28px !important; font-size: 15px !important; }
html body[class*="page-clientareadomain"] .btn-sm { padding: 7px 14px !important; font-size: 12.5px !important; }
html body[class*="page-clientareadomain"] .btn-xs { padding: 4px 10px !important; font-size: 11.5px !important; border-radius: 7px !important; }

/* =========================================================
   PCM PATCH FINAL — Boxes panels + couleurs liens + bouton "Connecter un domaine"
   ========================================================= */

/* 1) Panels uniformes sur TOUTES les pages domain (domaincontacts, registerns, domains, etc.) */
html body[class*="page-clientareadomain"] .panel,
html body[class*="page-clientareadomain"] .panel.panel-default,
html body[class*="page-clientareadomain"] .panel.panel-form,
html body[class*="page-clientareadomain"] .panel.panel-info {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
    border: 1px solid rgba(0,212,255,0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}
html body[class*="page-clientareadomain"] .panel-body {
    background: transparent !important;
    padding: 18px 22px !important;
}
html body[class*="page-clientareadomain"] .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,212,255,0.12) !important;
    padding: 16px 22px !important;
}

/* 2) Liens noms de domaines (sur la liste) en BLANC */
html body[class*="page-clientareadomain"] table tbody td a,
html body[class*="page-clientareadomain"] table tbody td a:link,
html body[class*="page-clientareadomain"] table tbody td a:visited,
html body[class*="page-clientareadomain"] .table-domains tbody a,
html body[class*="page-clientareadomain"] .data-table-products tbody a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
html body[class*="page-clientareadomain"] table tbody td a:hover {
    color: #00d4ff !important;
}

/* 3) Bouton "Connecter un domaine" : style PCM gradient EXACT */
html body .pcm-external-domain-cta,
html body a[href*="ExternalDomainsPCM"].btn,
html body a[href*="external"][class*="btn"],
html body .external-domain-btn,
html body a[href*="m=ExternalDomainsPCM"]:not(.pcm-dash-card):not(.pcm-dash-action) {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-color: #1966FF !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 13px 28px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    text-shadow: none !important;
    transition: box-shadow .2s ease, filter .2s ease, transform .15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body .pcm-external-domain-cta:hover,
html body a[href*="ExternalDomainsPCM"].btn:hover,
html body a[href*="external"][class*="btn"]:hover {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(25,102,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* 4) Headers de tableau (DOMAINE / ÉCHÉANCE / etc.) en cyan PCM */
html body[class*="page-clientareadomain"] table thead th,
html body[class*="page-clientareadomain"] .data-table-products thead th {
    color: #00d4ff !important;
    background: transparent !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    border-bottom: 1px solid rgba(0,212,255,0.18) !important;
    padding: 14px 12px !important;
}

/* 5) Rows du tableau : hover navy léger */
html body[class*="page-clientareadomain"] table tbody tr {
    transition: background 0.15s ease;
}
html body[class*="page-clientareadomain"] table tbody tr:hover {
    background: rgba(0,154,255,0.06) !important;
}
html body[class*="page-clientareadomain"] table tbody td {
    border-top: 1px solid rgba(0,212,255,0.06) !important;
    color: #c4e3ff !important;
    padding: 14px 12px !important;
}

/* 6) Bouton "Changer les serveurs DNS" (form Nameservers) : style PCM */
html body[class*="page-clientareadomain"] #tabNameservers button,
html body[class*="page-clientareadomain"] #Nameservers button,
html body[class*="page-clientareadomain"] .tab-pane#Nameservers .btn-primary,
html body[class*="page-clientareadomain"] form[action*="nameservers"] button[type="submit"] {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 13px 26px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* === FIX DÉFINITIF du shake sidebar : désactive transitions au load === */
html body[class*="page-clientareadomain"] .list-group-tab-nav,
html body[class*="page-clientareadomain"] .list-group-tab-nav *,
html body[class*="page-clientareadomain"] .panel,
html body[class*="page-clientareadomain"] .panel * {
    transition: none !important;
    animation: none !important;
}
/* Active les transitions UNIQUEMENT au hover (pas au load) */
html body[class*="page-clientareadomain"] .list-group-tab-nav .list-group-item:hover,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a:hover {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

/* === Force noms de domaines BLANC sur /clientarea.php?action=domains === */
html body.page-clientareadomains table a,
html body.page-clientareadomains table tbody td a,
html body[class*="domains"] table tbody a,
html body[class*="domains"] .data-table-products tbody a,
html body[class*="domains"] td.cell-name a,
html body[class*="domains"] td[data-sort] a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
html body.page-clientareadomains table tbody td a:hover {
    color: #00d4ff !important;
}

/* Force le bouton "Connecter un domaine" avec gradient PCM sur la page liste */
html body.page-clientareadomains a.btn:not(.btn-default):not(.btn-secondary):not(.btn-icon),
html body[class*="domains"] a[href*="ExternalDomainsPCM"],
html body[class*="domains"] .pcm-external-domain-cta {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    background-image: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 13px 28px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* =========================================================
   PCM PATCH — /clientarea.php?action=domains : tout en BLANC
   ========================================================= */

/* Headers du tableau : BLANC (au lieu de cyan) */
html body[class*="page-clientareadomain"] table thead th,
html body[class*="page-clientareadomain"] .data-table-products thead th,
html body[class*="page-clientareadomain"] table thead a,
html body[class*="page-clientareadomain"] thead th a {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Noms de domaines en BLANC — sélecteurs ULTRA large */
html body[class*="page-clientareadomain"] table tbody a,
html body[class*="page-clientareadomain"] table tbody td a,
html body[class*="page-clientareadomain"] table tbody td a:link,
html body[class*="page-clientareadomain"] table tbody td a:visited,
html body[class*="page-clientareadomain"] tbody td > a,
html body[class*="page-clientareadomain"] tbody a[href*="domaindetails"],
html body[class*="page-clientareadomain"] tbody a[target="_blank"],
html body[class*="page-clientareadomain"] td[data-sort] a,
html body[class*="page-clientareadomain"] td.cell-name a,
html body[class*="page-clientareadomain"] .table-domains a,
html body[class*="page-clientareadomain"] tr td a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
html body[class*="page-clientareadomain"] table tbody a:hover {
    color: #00d4ff !important;
}

/* Pagination : Précédent / Suivant / numéros en BLANC */
html body[class*="page-clientareadomain"] .pagination a,
html body[class*="page-clientareadomain"] .pagination .page-item a,
html body[class*="page-clientareadomain"] .pagination .page-link,
html body[class*="page-clientareadomain"] .lagom-pagination a,
html body[class*="page-clientareadomain"] .dataTables_paginate a,
html body[class*="page-clientareadomain"] .dataTables_paginate .paginate_button {
    background: rgba(0, 154, 255, 0.06) !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    margin: 0 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
html body[class*="page-clientareadomain"] .pagination a:hover,
html body[class*="page-clientareadomain"] .dataTables_paginate a:hover {
    background: rgba(0, 154, 255, 0.18) !important;
    border-color: rgba(0, 212, 255, 0.50) !important;
    color: #ffffff !important;
}
/* Page active = gradient bleu */
html body[class*="page-clientareadomain"] .pagination .active a,
html body[class*="page-clientareadomain"] .pagination .active .page-link,
html body[class*="page-clientareadomain"] .dataTables_paginate .current,
html body[class*="page-clientareadomain"] .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30) !important;
}

/* === Force TOUS les textes tbody en blanc (sauf badges status) === */
html body[class*="page-clientareadomain"] table tbody,
html body[class*="page-clientareadomain"] table tbody td,
html body[class*="page-clientareadomain"] table tbody td:not(.cell-status):not(.status),
html body[class*="page-clientareadomain"] table tbody td span:not(.status):not(.badge),
html body[class*="page-clientareadomain"] tbody tr,
html body[class*="page-clientareadomain"] tbody tr * {
    color: #ffffff !important;
}

/* Sauvegarde les badges colorés (Actif vert, Expiré rouge, etc.) */
html body[class*="page-clientareadomain"] table tbody .status,
html body[class*="page-clientareadomain"] table tbody .status *,
html body[class*="page-clientareadomain"] table tbody .badge,
html body[class*="page-clientareadomain"] table tbody [class*="status-"],
html body[class*="page-clientareadomain"] table tbody [class*="status-"] *,
html body[class*="page-clientareadomain"] .ssl-info,
html body[class*="page-clientareadomain"] .ssl-info * {
    color: revert !important;
}
/* Force pills Actif (vert) et Expiré (rouge) explicitement */
html body[class*="page-clientareadomain"] .status.status-active,
html body[class*="page-clientareadomain"] .status[class*="active"] { color: #4ade80 !important; }
html body[class*="page-clientareadomain"] .status[class*="expired"],
html body[class*="page-clientareadomain"] .status[class*="cancelled"],
html body[class*="page-clientareadomain"] .status[class*="suspended"] { color: #fca5a5 !important; }
html body[class*="page-clientareadomain"] .status[class*="redemption"],
html body[class*="page-clientareadomain"] .status[class*="pending"] { color: #fcd34d !important; }

/* "Afficher 10" + select pagination en blanc */
html body[class*="page-clientareadomain"] .dataTables_length,
html body[class*="page-clientareadomain"] .dataTables_length label,
html body[class*="page-clientareadomain"] .dataTables_length select,
html body[class*="page-clientareadomain"] .dataTables_info,
html body[class*="page-clientareadomain"] .dataTables_filter label {
    color: #ffffff !important;
}
html body[class*="page-clientareadomain"] .dataTables_length select {
    background: rgba(5,13,36,0.60) !important;
    border: 1px solid rgba(0,212,255,0.25) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
}

/* "Période de rédemption (Expiré)" en orange/ambre */
html body[class*="page-clientareadomain"] td:has(.fa-clock-o),
html body[class*="page-clientareadomain"] td:has(.fa-clock) {
    color: #fcd34d !important;
}

/* =========================================================
   PCM PATCH — Pagination /domains : blanc + supprime double box
   ========================================================= */

/* Wrapper <li>, <span> autour des liens pagination : transparent (pas de double box) */
html body[class*="page-clientareadomain"] .pagination,
html body[class*="page-clientareadomain"] .pagination li,
html body[class*="page-clientareadomain"] .pagination .page-item,
html body[class*="page-clientareadomain"] .dataTables_paginate,
html body[class*="page-clientareadomain"] .dataTables_paginate span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Style UNIQUE sur le <a>/<button> (un seul cadre) */
html body[class*="page-clientareadomain"] .pagination a,
html body[class*="page-clientareadomain"] .pagination .page-link,
html body[class*="page-clientareadomain"] .pagination button,
html body[class*="page-clientareadomain"] .dataTables_paginate .paginate_button,
html body[class*="page-clientareadomain"] .dataTables_paginate a {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin: 0 6px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}
html body[class*="page-clientareadomain"] .pagination a:hover,
html body[class*="page-clientareadomain"] .pagination .page-link:hover,
html body[class*="page-clientareadomain"] .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 154, 255, 0.10) !important;
    border-color: rgba(0, 212, 255, 0.50) !important;
    color: #ffffff !important;
}

/* Page active : SEULE box bleue gradient (pas de wrapper outer) */
html body[class*="page-clientareadomain"] .pagination .active a,
html body[class*="page-clientareadomain"] .pagination .active .page-link,
html body[class*="page-clientareadomain"] .pagination .page-item.active a,
html body[class*="page-clientareadomain"] .pagination li.active a,
html body[class*="page-clientareadomain"] .dataTables_paginate .current,
html body[class*="page-clientareadomain"] .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    background-image: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(25, 102, 255, 0.30) !important;
}

/* Supprime tout SPAN/I dedans qui crée un carré intérieur */
html body[class*="page-clientareadomain"] .pagination a > span,
html body[class*="page-clientareadomain"] .pagination .page-link > span,
html body[class*="page-clientareadomain"] .dataTables_paginate a > span {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Désactivé (Précédent quand on est page 1) */
html body[class*="page-clientareadomain"] .pagination .disabled a,
html body[class*="page-clientareadomain"] .pagination .disabled .page-link,
html body[class*="page-clientareadomain"] .dataTables_paginate .disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* === Force aucun border/bg sur .paginate_button (DataTables) — SUPÉRIEUR à toute règle native === */
html body[class*="page-clientareadomain"] .dataTables_paginate ul.pagination,
html body[class*="page-clientareadomain"] ul.pagination,
html body[class*="page-clientareadomain"] .table-container .pagination,
html body[class*="page-clientareadomain"] .table-container .dataTables_paginate {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: inline-flex !important;
    gap: 8px !important;
}
html body[class*="page-clientareadomain"] .paginate_button,
html body[class*="page-clientareadomain"] li.paginate_button,
html body[class*="page-clientareadomain"] li.paginate_button.page-item,
html body[class*="page-clientareadomain"] .pagination .paginate_button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Aussi : si .active a son propre border sur le <li> */
html body[class*="page-clientareadomain"] li.page-item.active,
html body[class*="page-clientareadomain"] li.paginate_button.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================================================
   PCM PATCH GLOBAL — Pagination DataTables sur TOUTES les pages clientarea
   (domains, services, invoices, etc.)
   ========================================================= */

/* Wrappers transparents */
html body[class*="page-clientarea"] ul.pagination,
html body[class*="page-clientarea"] .dataTables_paginate,
html body[class*="page-clientarea"] .table-container .pagination,
html body[class*="page-clientarea"] .table-container .dataTables_paginate {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: inline-flex !important;
    gap: 8px !important;
}

/* Wrappers <li> (DataTables paginate_button) */
html body[class*="page-clientarea"] .paginate_button,
html body[class*="page-clientarea"] li.paginate_button,
html body[class*="page-clientarea"] li.paginate_button.page-item,
html body[class*="page-clientarea"] .pagination li,
html body[class*="page-clientarea"] .pagination .page-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body[class*="page-clientarea"] li.page-item.active,
html body[class*="page-clientarea"] li.paginate_button.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Le <a> (page-link) : SEUL cadre, texte BLANC */
html body[class*="page-clientarea"] .pagination a,
html body[class*="page-clientarea"] .pagination .page-link,
html body[class*="page-clientarea"] .pagination button,
html body[class*="page-clientarea"] .dataTables_paginate .paginate_button a,
html body[class*="page-clientarea"] .dataTables_paginate a.page-link {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 212, 255, 0.20) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}
html body[class*="page-clientarea"] .pagination a:hover,
html body[class*="page-clientarea"] .pagination .page-link:hover,
html body[class*="page-clientarea"] .dataTables_paginate a:hover {
    background: rgba(0, 154, 255, 0.10) !important;
    border-color: rgba(0, 212, 255, 0.50) !important;
    color: #ffffff !important;
}

/* Page active : gradient bleu PCM */
html body[class*="page-clientarea"] .pagination .active a,
html body[class*="page-clientarea"] .pagination .active .page-link,
html body[class*="page-clientarea"] .pagination .page-item.active a,
html body[class*="page-clientarea"] .pagination li.active a,
html body[class*="page-clientarea"] .dataTables_paginate .current,
html body[class*="page-clientarea"] .dataTables_paginate .paginate_button.current,
html body[class*="page-clientarea"] li.paginate_button.active a {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    background-image: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(25, 102, 255, 0.30) !important;
}

/* Désactivé (Précédent quand page 1) */
html body[class*="page-clientarea"] .pagination .disabled a,
html body[class*="page-clientarea"] .pagination .disabled .page-link,
html body[class*="page-clientarea"] li.paginate_button.disabled a {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Span enfants neutralisés */
html body[class*="page-clientarea"] .pagination a > span,
html body[class*="page-clientarea"] .pagination .page-link > span {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* =========================================================
   PCM PATCH — Alerte "Domaine déverrouillé" : design card PCM
   ========================================================= */
html body[class*="page-clientareadomain"] .alert.alert-warning,
html body[class*="page-clientareadomain"] .alert.alert-lagom.alert-warning,
html body[class*="page-clientareadomain"] .alert.alert-lagom.alert-primary.alert-warning,
html body[class*="page-clientareadomain"] [class*="alert"][class*="warning"] {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
    border: 1px solid rgba(252,165,165,0.30) !important;
    border-left: 0 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    padding: 28px 32px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 0 24px rgba(239,68,68,0.10) !important;
    margin: 0 0 24px 0 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    text-align: left !important;
    line-height: 1.55 !important;
    font-size: 14px !important;
}

/* Glow décoratif rouge */
html body[class*="page-clientareadomain"] .alert.alert-warning::after {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(239,68,68,0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Icône shield-off à gauche (remplace l'icône native) */
html body[class*="page-clientareadomain"] .alert.alert-warning::before {
    content: '';
    flex-shrink: 0;
    position: relative !important;
    z-index: 1 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(252,165,165,0.20), rgba(239,68,68,0.06)) !important;
    border: 1px solid rgba(252,165,165,0.40) !important;
    box-shadow: 0 8px 22px rgba(239,68,68,0.18) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><line x1='2' y1='2' x2='22' y2='22' stroke-width='2'/></svg>") !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-blend-mode: normal !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
}

/* Le contenu texte (à droite de l'icône) */
html body[class*="page-clientareadomain"] .alert.alert-warning > *:not(::before):not(::after) {
    position: relative !important;
    z-index: 1 !important;
}
html body[class*="page-clientareadomain"] .alert.alert-warning strong,
html body[class*="page-clientareadomain"] .alert.alert-warning b {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.01em !important;
}
html body[class*="page-clientareadomain"] .alert.alert-warning {
    color: #c4e3ff !important;
}

/* Bouton "Verrouiller maintenant" si présent dans l'alerte */
html body[class*="page-clientareadomain"] .alert.alert-warning .btn,
html body[class*="page-clientareadomain"] .alert.alert-warning a.btn {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30) !important;
}

/* Quand le JS a transformé l'alerte, désactive le ::before CSS */
html body[class*="page-clientareadomain"] .alert.alert-warning[data-pcm-unlock-fixed]::before {
    content: none !important;
    display: none !important;
}

/* =========================================================
   PCM — Fixe la largeur du sidebar domaindetails (.main-sidebar Lagom)
   ========================================================= */

/* Container Lagom .main-sidebar : largeur figée 300px */
html body[class*="page-clientareadomain"] .main-sidebar {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    box-sizing: border-box !important;
}

html body[class*="page-clientareadomain"] .main-sidebar .sidebar-sticky,
html body[class*="page-clientareadomain"] .main-sidebar .sidebar,
html body[class*="page-clientareadomain"] .main-sidebar .sidebar-primary,
html body[class*="page-clientareadomain"] .main-sidebar .sidebar-secondary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Content principal : sibling de .main-sidebar prend tout le reste */
html body[class*="page-clientareadomain"] .main-sidebar ~ .main-content,
html body[class*="page-clientareadomain"] .main-sidebar ~ div:not(.main-sidebar):not(.sidebar-overlay),
html body[class*="page-clientareadomain"] .app-content > .main-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: calc(100% - 300px - 24px) !important;
}

/* Fallback bootstrap (autres pages clientarea avec col-md-3/9) */
html body[class*="page-clientareadomain"] .row > [class*="col-md-3"],
html body[class*="page-clientareadomain"] .row > [class*="col-lg-3"],
html body[class*="page-clientareadomain"] .row > [class*="col-xl-3"] {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
}
html body[class*="page-clientareadomain"] .row > [class*="col-md-9"],
html body[class*="page-clientareadomain"] .row > [class*="col-lg-9"],
html body[class*="page-clientareadomain"] .row > [class*="col-xl-9"] {
    flex: 1 1 auto !important;
    max-width: calc(100% - 300px - 30px) !important;
    min-width: 0 !important;
}

/* Responsive mobile : full width */
@media (max-width: 991.98px) {
    html body[class*="page-clientareadomain"] .main-sidebar,
    html body[class*="page-clientareadomain"] .main-sidebar ~ .main-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Sidebar elle-même : pas de shrink, largeur stable */
html body[class*="page-clientareadomain"] .panel.panel-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Items : labels sur une seule ligne avec ellipsis si débordent */
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item,
html body[class*="page-clientareadomain"] .panel.panel-sidebar a.list-group-item {
    white-space: normal !important; /* on garde le wrap propre */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Réduit légèrement la taille de l'icône pour laisser plus de place au texte */
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item .pcm-icon,
html body[class*="page-clientareadomain"] .panel.panel-sidebar .list-group-item svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Responsive : sur mobile, la sidebar prend toute la largeur */
@media (max-width: 991.98px) {
    html body[class*="page-clientareadomain"] .row > [class*="col-md-3"],
    html body[class*="page-clientareadomain"] .row > [class*="col-lg-3"],
    html body[class*="page-clientareadomain"] .row > [class*="col-md-9"],
    html body[class*="page-clientareadomain"] .row > [class*="col-lg-9"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   PCM — Onglet Nameservers : tue le fond Lagom var(--ui-block-bg)
   ========================================================= */

/* Tue le background sur tout .panel-group-condensed sur pages domain* */
html body[class*="page-clientareadomain"] .panel-group-condensed,
html body[class*="page-clientareadomain"] .panel-group.panel-group-condensed,
html body[class*="page-clientareadomain"] #tabNameservers .panel-group-condensed,
html body[class*="page-clientareadomain"] #Nameservers .panel-group-condensed,
html body[class*="page-clientareadomain"] .tab-pane .panel-group-condensed {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    --ui-block-bg: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Tue le fond hérité sur les .panel internes du panel-group-condensed */
html body[class*="page-clientareadomain"] .panel-group-condensed > .panel,
html body[class*="page-clientareadomain"] .panel-group-condensed .panel-default,
html body[class*="page-clientareadomain"] .panel-group-condensed .panel-collapse,
html body[class*="page-clientareadomain"] .panel-group-condensed .panel-body,
html body[class*="page-clientareadomain"] .panel-group-condensed .panel-heading {
    background: transparent !important;
    background-color: transparent !important;
    --ui-block-bg: transparent !important;
}

/* Style propre des champs nameservers */
html body[class*="page-clientareadomain"] #tabNameservers .panel,
html body[class*="page-clientareadomain"] #Nameservers .panel {
    background: linear-gradient(180deg, rgba(15,29,63,0.50), rgba(10,22,49,0.60)) !important;
    border: 1px solid rgba(0,212,255,0.16) !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    padding: 8px !important;
}

/* =========================================================
   PCM — Order loader : "Vous y êtes presque !" fullscreen
   ========================================================= */

/* Loader = overlay fullscreen — uniquement quand visible (pas forcé display) */
html body #one-page-order-init-loader:not([style*="display: none"]):not([style*="display:none"]):not(.is-hidden):not(.hidden),
html body .message-fullscreen[data-order-loader]:not([style*="display: none"]):not([style*="display:none"]):not(.is-hidden):not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 40px !important;
    z-index: 999999 !important;
    background: radial-gradient(ellipse at center, #08132e 0%, #050d24 70%, #030819 100%) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    overflow: hidden !important;
}

/* Lagom cache le loader via display:none inline → on respecte */
html body #one-page-order-init-loader[style*="display: none"],
html body #one-page-order-init-loader[style*="display:none"],
html body #one-page-order-init-loader.is-hidden,
html body #one-page-order-init-loader.hidden {
    display: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* Lottie / illustration : plus grand */
html body #one-page-order-init-loader #lottie,
html body #one-page-order-init-loader #lottie-main-animation,
html body .message-fullscreen[data-order-loader] #lottie {
    width: min(420px, 38vw) !important;
    height: min(420px, 38vw) !important;
    max-width: 480px !important;
    max-height: 480px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body #one-page-order-init-loader #lottie-main-animation svg,
html body #one-page-order-init-loader #lottie-main-animation canvas,
html body #one-page-order-init-loader #lottie svg,
html body #one-page-order-init-loader #lottie canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Texte principal : gros + blanc + gradient cyan */
html body #one-page-order-init-loader .message-text,
html body #one-page-order-init-loader .message--loading-order,
html body .message-fullscreen[data-order-loader] .message-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
    font-size: clamp(24px, 2.6vw, 38px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    max-width: 820px !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Sous-texte : plus gros mais secondaire */
html body #one-page-order-init-loader .message-subtext,
html body .message-fullscreen[data-order-loader] .message-subtext {
    display: block !important;
    font-size: clamp(15px, 1.1vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #8fadc9 !important;
    -webkit-text-fill-color: #8fadc9 !important;
    margin-top: 6px !important;
    max-width: 640px !important;
}

/* Cache la sidebar et tout le reste pendant le loader */
html body:has(#one-page-order-init-loader[data-order-loader]) > *:not(#one-page-order-init-loader),
html body:has(#one-page-order-init-loader[data-order-loader]) .main-sidebar,
html body:has(#one-page-order-init-loader[data-order-loader]) .app-content,
html body:has(.message-fullscreen[data-order-loader]) .main-sidebar {
    /* on garde visible, mais le loader couvre tout via z-index */
}

/* Pulse rapide sur le lottie pendant le loading */
@keyframes pcm-order-loader-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.88; }
}
html body #one-page-order-init-loader #lottie,
html body .pcm-global-loader__icon {
    animation: pcm-order-loader-pulse 1.1s ease-in-out infinite !important;
}

/* =========================================================
   PCM — Loader global page-transition (toutes les pages connectées)
   ========================================================= */
.pcm-global-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: radial-gradient(ellipse at center, rgba(8,19,46,0.96) 0%, rgba(5,13,36,0.98) 70%, rgba(3,8,25,1) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.pcm-global-loader.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Icône / logo PCM cube */
.pcm-global-loader__icon {
    width: min(180px, 22vw);
    height: min(180px, 22vw);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pcm-global-loader__icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 28px rgba(25,102,255,0.45));
}

/* Ring spinner autour de l'icône */
.pcm-global-loader__ring {
    position: absolute;
    inset: -18px;
    border: 2.5px solid transparent;
    border-top-color: #1966FF;
    border-right-color: #009AFF;
    border-radius: 50%;
    animation: pcm-loader-spin 0.85s linear infinite;
}
@keyframes pcm-loader-spin {
    to { transform: rotate(360deg); }
}

/* Texte du loader */
.pcm-global-loader__text {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pcm-global-loader__sub {
    font-size: clamp(13px, 1vw, 16px);
    color: #8fadc9;
    margin-top: -8px;
    text-align: center;
}

/* Dots animation */
.pcm-global-loader__dots {
    display: inline-flex;
    gap: 6px;
    margin-top: 6px;
}
.pcm-global-loader__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1966FF, #009AFF);
    animation: pcm-loader-dots 1s ease-in-out infinite;
}
.pcm-global-loader__dots span:nth-child(2) { animation-delay: 0.15s; }
.pcm-global-loader__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pcm-loader-dots {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* =========================================================
   PCM — Page /affiliates.php : design navy + cyan PCM
   ========================================================= */

/* Background page + container */
html body.page-affiliates,
html body[class*="page-affiliate"] {
    background: #050d24 !important;
}
html body.page-affiliates .main-content,
html body[class*="page-affiliate"] .main-content {
    background: transparent !important;
    color: #c4e3ff !important;
}

/* Headers / titres */
html body[class*="page-affiliate"] .main-content h1,
html body[class*="page-affiliate"] .main-content h2,
html body[class*="page-affiliate"] .main-content h3,
html body[class*="page-affiliate"] .main-content h4,
html body[class*="page-affiliate"] .content-title,
html body[class*="page-affiliate"] .page-header,
html body[class*="page-affiliate"] legend {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border: 0 !important;
}
html body[class*="page-affiliate"] .main-content h1,
html body[class*="page-affiliate"] .content-title {
    font-size: 28px !important;
    margin-bottom: 24px !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Tous les blocs / panels / cards / sections */
html body[class*="page-affiliate"] .panel,
html body[class*="page-affiliate"] .panel-default,
html body[class*="page-affiliate"] .card,
html body[class*="page-affiliate"] .section,
html body[class*="page-affiliate"] .well,
html body[class*="page-affiliate"] fieldset {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 0 22px rgba(98,152,254,0.04) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden !important;
    margin-bottom: 22px !important;
    color: #c4e3ff !important;
}
html body[class*="page-affiliate"] .panel-heading,
html body[class*="page-affiliate"] .card-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.14) !important;
    padding: 16px 22px !important;
    color: #ffffff !important;
}
html body[class*="page-affiliate"] .panel-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body[class*="page-affiliate"] .panel-body,
html body[class*="page-affiliate"] .card-body {
    background: transparent !important;
    padding: 22px !important;
    color: #c4e3ff !important;
}

/* Stats cards (visitors / signups / pending / total) */
html body[class*="page-affiliate"] .row.affiliate-statistics,
html body[class*="page-affiliate"] .affiliate-stats,
html body[class*="page-affiliate"] .stats-row,
html body[class*="page-affiliate"] .row > [class*="col-md-3"],
html body[class*="page-affiliate"] .row > [class*="col-lg-3"] {
    margin-bottom: 8px !important;
}

/* Tile / metric pattern */
html body[class*="page-affiliate"] .info-list .info,
html body[class*="page-affiliate"] .stats-box,
html body[class*="page-affiliate"] .stat-card,
html body[class*="page-affiliate"] .panel.info-card {
    background: linear-gradient(180deg, rgba(15,29,63,0.62), rgba(10,22,49,0.72)) !important;
    border: 1px solid rgba(98,152,254,0.22) !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
html body[class*="page-affiliate"] .info-list .info:hover,
html body[class*="page-affiliate"] .stats-box:hover {
    transform: translateY(-2px);
    border-color: rgba(98,152,254,0.40) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.32), 0 0 24px rgba(98,152,254,0.10) !important;
}
html body[class*="page-affiliate"] .info-list .info::before,
html body[class*="page-affiliate"] .stats-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1966FF, #009AFF, #6298fe);
    opacity: 0.85;
}

/* Labels et valeurs stats */
html body[class*="page-affiliate"] .info-list .info .info-value,
html body[class*="page-affiliate"] .stat-value,
html body[class*="page-affiliate"] .h2 {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin: 4px 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body[class*="page-affiliate"] .info-list .info .info-label,
html body[class*="page-affiliate"] .info-list .info > small,
html body[class*="page-affiliate"] .stat-label {
    color: #8fadc9 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Lien d'affiliation : encadré copyable highlight */
html body[class*="page-affiliate"] .affiliate-link-area,
html body[class*="page-affiliate"] input[readonly][value*="affiliate"],
html body[class*="page-affiliate"] input[id*="affiliate"][readonly],
html body[class*="page-affiliate"] input[name*="aff"][readonly],
html body[class*="page-affiliate"] textarea[readonly] {
    background: rgba(5,13,36,0.70) !important;
    border: 1px solid rgba(98,152,254,0.40) !important;
    border-radius: 12px !important;
    color: #6298fe !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 14px 18px !important;
    width: 100% !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 0 18px rgba(98,152,254,0.06) !important;
    letter-spacing: 0.01em !important;
}

/* Form controls + labels */
html body[class*="page-affiliate"] .form-control,
html body[class*="page-affiliate"] input[type="text"]:not([readonly]),
html body[class*="page-affiliate"] input[type="email"],
html body[class*="page-affiliate"] input[type="number"],
html body[class*="page-affiliate"] input[type="url"],
html body[class*="page-affiliate"] textarea:not([readonly]),
html body[class*="page-affiliate"] select {
    background: rgba(5,13,36,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
html body[class*="page-affiliate"] .form-control:focus,
html body[class*="page-affiliate"] input:focus,
html body[class*="page-affiliate"] textarea:focus,
html body[class*="page-affiliate"] select:focus {
    border-color: rgba(98,152,254,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.18), 0 0 22px rgba(98,152,254,0.10) !important;
    outline: none !important;
}
html body[class*="page-affiliate"] label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Boutons : style PCM cohérent /order/hebergement-wordpress */
html body[class*="page-affiliate"] .btn-primary,
html body[class*="page-affiliate"] button.btn-primary,
html body[class*="page-affiliate"] a.btn-primary,
html body[class*="page-affiliate"] input.btn-primary,
html body[class*="page-affiliate"] button[type="submit"]:not(.btn-default):not(.btn-secondary),
html body[class*="page-affiliate"] input[type="submit"]:not(.btn-default):not(.btn-secondary) {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 8px 22px rgba(25,102,255,0.32) !important;
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    cursor: pointer !important;
}
html body[class*="page-affiliate"] .btn-primary:hover,
html body[class*="page-affiliate"] button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(25,102,255,0.42) !important;
    filter: brightness(1.06) !important;
}
html body[class*="page-affiliate"] .btn-default,
html body[class*="page-affiliate"] .btn-secondary,
html body[class*="page-affiliate"] a.btn-default {
    background: rgba(15,29,63,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 12px !important;
    padding: 12px 22px !important;
    font-weight: 600 !important;
    transition: all 0.18s !important;
}
html body[class*="page-affiliate"] .btn-default:hover {
    background: rgba(98,152,254,0.10) !important;
    border-color: rgba(98,152,254,0.55) !important;
}

/* Tableaux (commissions, historique) */
html body[class*="page-affiliate"] table,
html body[class*="page-affiliate"] .table,
html body[class*="page-affiliate"] .dataTable {
    background: transparent !important;
    color: #c4e3ff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
html body[class*="page-affiliate"] table thead th,
html body[class*="page-affiliate"] .table thead th {
    background: rgba(5,13,36,0.70) !important;
    color: #8fadc9 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.18) !important;
}
html body[class*="page-affiliate"] table tbody td,
html body[class*="page-affiliate"] .table tbody td {
    background: rgba(15,29,63,0.30) !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.06) !important;
    vertical-align: middle !important;
}
html body[class*="page-affiliate"] table tbody tr:hover td {
    background: rgba(25,102,255,0.10) !important;
}
html body[class*="page-affiliate"] table tbody td a {
    color: #6298fe !important;
    font-weight: 600 !important;
}

/* Texte / paragraphes */
html body[class*="page-affiliate"] p,
html body[class*="page-affiliate"] .description,
html body[class*="page-affiliate"] .help-block {
    color: #c4e3ff !important;
    line-height: 1.65 !important;
}
html body[class*="page-affiliate"] strong,
html body[class*="page-affiliate"] b {
    color: #ffffff !important;
}
html body[class*="page-affiliate"] hr {
    border-color: rgba(98,152,254,0.14) !important;
    border-top: 1px solid rgba(98,152,254,0.14) !important;
    margin: 22px 0 !important;
}

/* Alerts info / success / warning */
html body[class*="page-affiliate"] .alert,
html body[class*="page-affiliate"] .alert-info {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 14px !important;
    color: #c4e3ff !important;
    padding: 18px 22px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important;
}
html body[class*="page-affiliate"] .alert-success {
    border-color: rgba(34,197,94,0.40) !important;
}
html body[class*="page-affiliate"] .alert-warning {
    border-color: rgba(252,211,77,0.40) !important;
}
html body[class*="page-affiliate"] .alert strong {
    color: #ffffff !important;
}

/* "Activer compte affilié" : carte hero — uniquement sur form d'activation */
html body[class*="page-affiliate"] form[action*="aff=activate"]:not(.affiliate-link-form),
html body[class*="page-affiliate"] .signup-affiliate {
    background: radial-gradient(at top right, rgba(25,102,255,0.16), transparent 60%), linear-gradient(180deg, rgba(15,29,63,0.65), rgba(10,22,49,0.78)) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 18px !important;
    padding: 36px 38px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.30), 0 0 28px rgba(98,152,254,0.08) !important;
    position: relative;
    overflow: hidden;
}

/* Badge "0 €" / montants : couleur cyan brillante */
html body[class*="page-affiliate"] .currency,
html body[class*="page-affiliate"] .amount,
html body[class*="page-affiliate"] td.amount {
    color: #6298fe !important;
    font-weight: 700 !important;
}

/* Liens internes */
html body[class*="page-affiliate"] a:not(.btn):not(.nav-link) {
    color: #6298fe !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
html body[class*="page-affiliate"] a:not(.btn):not(.nav-link):hover {
    color: #6298fe !important;
    text-decoration: underline !important;
}

/* Pagination cohérente avec les autres pages */
html body[class*="page-affiliate"] .pagination,
html body[class*="page-affiliate"] .dataTables_paginate {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
html body[class*="page-affiliate"] .pagination a,
html body[class*="page-affiliate"] .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 3px !important;
    font-weight: 600 !important;
}
html body[class*="page-affiliate"] .pagination .active a,
html body[class*="page-affiliate"] .paginate_button.current {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(25,102,255,0.30) !important;
}

/* =========================================================
   PCM — /affiliates.php : amélioration "premium" avec hero + icons
   ========================================================= */

/* HERO BANNER injecté avant le contenu */
html body[class*="page-affiliate"] .main-content > .section:first-child::before,
html body[class*="page-affiliate"] #pcm-aff-hero {
    content: '';
    display: block;
    position: relative;
    background:
        radial-gradient(800px 320px at 15% 30%, rgba(25,102,255,0.30), transparent 60%),
        radial-gradient(700px 280px at 85% 70%, rgba(98,152,254,0.20), transparent 65%),
        linear-gradient(135deg, rgba(15,29,63,0.92) 0%, rgba(10,22,49,0.96) 100%);
    border: 1px solid rgba(98,152,254,0.26);
    border-radius: 22px;
    padding: 44px 48px;
    margin-bottom: 28px;
    overflow: hidden;
    min-height: 200px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 40px rgba(25,102,255,0.10);
}

/* Hero block JS-friendly */
.pcm-aff-hero {
    position: relative;
    background:
        radial-gradient(800px 320px at 15% 30%, rgba(25,102,255,0.30), transparent 60%),
        radial-gradient(700px 280px at 85% 70%, rgba(98,152,254,0.20), transparent 65%),
        linear-gradient(135deg, rgba(15,29,63,0.92) 0%, rgba(10,22,49,0.96) 100%);
    border: 1px solid rgba(98,152,254,0.26);
    border-radius: 22px;
    padding: 44px 48px;
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 40px rgba(25,102,255,0.10);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
}
.pcm-aff-hero__text { position: relative; z-index: 2; }
.pcm-aff-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(25,102,255,0.14);
    border: 1px solid rgba(25,102,255,0.45);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(25,102,255,0.18);
}
.pcm-aff-hero__badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 12px #22c55e, 0 0 4px rgba(34,197,94,0.8);
    animation: pcm-aff-blink 1.4s ease-in-out infinite;
}
@keyframes pcm-aff-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.pcm-aff-hero h1,
.pcm-aff-hero__title {
    margin: 0 0 12px 0 !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c4e3ff 50%, #6298fe 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.pcm-aff-hero__sub {
    color: #c4e3ff;
    font-size: 16px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

.pcm-aff-hero__illu {
    display: none !important;
}

/* Hero passe en 1 colonne sans illustration */
.pcm-aff-hero {
    grid-template-columns: 1fr !important;
}

/* GRILLE STATS : 4 colonnes responsive */
html body[class*="page-affiliate"] .row:has(> [class*="col-md-3"]),
html body[class*="page-affiliate"] .row:has(> [class*="col-lg-3"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 26px 0 !important;
}
html body[class*="page-affiliate"] .row:has(> [class*="col-md-3"]) > [class*="col-"],
html body[class*="page-affiliate"] .row:has(> [class*="col-lg-3"]) > [class*="col-"] {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
}

/* Stats card : avec icône SVG en haut à droite */
html body[class*="page-affiliate"] .info-list .info,
html body[class*="page-affiliate"] .panel.info-card,
html body[class*="page-affiliate"] .stats-box {
    min-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px 26px !important;
}
html body[class*="page-affiliate"] .info-list .info::after,
html body[class*="page-affiliate"] .stats-box::after {
    content: '';
    position: absolute;
    top: 18px; right: 18px;
    width: 40px; height: 40px;
    border-radius: 12px;
    background-color: rgba(98,152,254,0.12);
    border: 1px solid rgba(98,152,254,0.30);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

/* Icones spécifiques par mot-clé (nth-child fallback) */
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(1) .info::after,
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(1) .stats-box::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
}
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(2) .info::after,
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(2) .stats-box::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' y1='8' x2='19' y2='14'/><line x1='22' y1='11' x2='16' y2='11'/></svg>") !important;
}
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(3) .info::after,
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(3) .stats-box::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd34d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") !important;
    background-color: rgba(252,211,77,0.10) !important;
    border-color: rgba(252,211,77,0.40) !important;
}
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(4) .info::after,
html body[class*="page-affiliate"] .row > [class*="col-md-3"]:nth-child(4) .stats-box::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>") !important;
    background-color: rgba(34,197,94,0.10) !important;
    border-color: rgba(34,197,94,0.40) !important;
}

/* Sparkline visuel sous chaque stat (decoration) */
html body[class*="page-affiliate"] .info-list .info .info-value::after,
html body[class*="page-affiliate"] .stats-box .stat-value::after {
    content: '';
    display: block;
    margin-top: 10px;
    height: 4px;
    width: 64px;
    background: linear-gradient(90deg, rgba(25,102,255,0.65), rgba(98,152,254,0.85), transparent);
    border-radius: 2px;
    opacity: 0.85;
}

/* === Lien d'affiliation : input readonly cyan === */
html body[class*="page-affiliate"] input[readonly]:not([type="hidden"]):not([type="submit"]) {
    background: rgba(5,13,36,0.80) !important;
    border: 1px solid rgba(98,152,254,0.30) !important;
    border-radius: 12px !important;
    color: #6298fe !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 14px 18px !important;
    min-height: 48px !important;
    width: 100% !important;
    cursor: text !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}
html body[class*="page-affiliate"] input[readonly]:hover {
    border-color: rgba(98,152,254,0.60) !important;
    box-shadow: 0 0 20px rgba(98,152,254,0.14) !important;
}

/* Reset le background bizarre des form-group natifs Lagom (label sur fond blanc) */
html body[class*="page-affiliate"] .form-group,
html body[class*="page-affiliate"] .panel-body .form-group {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    display: block !important;
}
html body[class*="page-affiliate"] .form-group > label,
html body[class*="page-affiliate"] .form-group > .control-label {
    background: transparent !important;
    color: #c4e3ff !important;
    padding: 0 !important;
    display: block !important;
    margin-bottom: 8px !important;
    width: auto !important;
    text-align: left !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

/* === Kill TOUS les backgrounds blancs/bleus parasites sur la page === */
html body[class*="page-affiliate"] .form-horizontal,
html body[class*="page-affiliate"] .row.form-horizontal,
html body[class*="page-affiliate"] .panel-body > .form-horizontal,
html body[class*="page-affiliate"] .panel-body .form-group,
html body[class*="page-affiliate"] .panel-body .row,
html body[class*="page-affiliate"] form .row {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    --ui-block-bg: transparent !important;
    box-shadow: none !important;
}

/* Kill les colonnes blanches résiduelles (col-sm-X qui apparaissent blanches) */
html body[class*="page-affiliate"] .form-group > [class*="col-"],
html body[class*="page-affiliate"] .form-group > div[class*="col-md-"],
html body[class*="page-affiliate"] .form-group > div[class*="col-sm-"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hosting wrapper du bloc copy (parent contenant le bloc remplacé) */
html body[class*="page-affiliate"] .form-group:has(.pcm-aff-copy),
html body[class*="page-affiliate"] .panel-body:has(.pcm-aff-copy),
html body[class*="page-affiliate"] [class*="col-"]:has(.pcm-aff-copy) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* === Bloc copy : wrapper PCM avec bouton "Copier" intégré (injecté en JS) === */
.pcm-aff-copy {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65));
    border: 1px solid rgba(98,152,254,0.22);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.pcm-aff-copy__label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(98,152,254,0.10);
    border-radius: 10px;
    color: #c4e3ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-right: 8px;
}
.pcm-aff-copy__label svg { width: 16px; height: 16px; stroke: #6298fe; }
.pcm-aff-copy__input {
    flex: 1;
    background: transparent !important;
    border: 0 !important;
    color: #6298fe !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    outline: none;
    min-width: 0;
    box-shadow: none !important;
    min-height: auto !important;
}
.pcm-aff-copy__btn {
    flex-shrink: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(25,102,255,0.32);
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
    text-transform: none;
}
.pcm-aff-copy__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 24px rgba(25,102,255,0.45);
}
.pcm-aff-copy__btn svg { width: 15px; height: 15px; }
.pcm-aff-copy__btn.is-copied {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 6px 18px rgba(34,197,94,0.32);
}

/* Sections injectées en JS */
.pcm-aff-section {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65));
    border: 1px solid rgba(98,152,254,0.18);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pcm-aff-section__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pcm-aff-section__title-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(98,152,254,0.15));
    border: 1px solid rgba(98,152,254,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pcm-aff-section__title-icon svg { width: 18px; height: 18px; stroke: #6298fe; }

/* Grille "Comment ça marche" : 3 cartes */
.pcm-aff-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.pcm-aff-step {
    background: rgba(5,13,36,0.50);
    border: 1px solid rgba(98,152,254,0.16);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: border-color 0.18s, transform 0.18s;
}
.pcm-aff-step:hover { border-color: rgba(98,152,254,0.45); transform: translateY(-2px); }
.pcm-aff-step__num {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #1966FF, #009AFF);
    color: white;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 12px;
    box-shadow: 0 6px 14px rgba(25,102,255,0.30);
}
.pcm-aff-step__title { color: #ffffff; font-weight: 700; font-size: 15px; margin: 0 0 6px 0; }
.pcm-aff-step__desc { color: #8fadc9; font-size: 13px; line-height: 1.55; margin: 0; }

/* Programme info : 2 colonnes */
.pcm-aff-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.pcm-aff-info-item {
    background: rgba(5,13,36,0.50);
    border: 1px solid rgba(98,152,254,0.14);
    border-radius: 12px;
    padding: 16px 18px;
}
.pcm-aff-info-item__label {
    color: #8fadc9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.pcm-aff-info-item__value {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pcm-aff-info-item__value.is-accent {
    background: linear-gradient(135deg, #6298fe, #1966FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Boutons share réseaux sociaux */
.pcm-aff-share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.pcm-aff-share__btn {
    flex: 1 1 140px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(98,152,254,0.20);
    background: rgba(5,13,36,0.60);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.18s;
    text-decoration: none !important;
}
.pcm-aff-share__btn:hover {
    background: rgba(98,152,254,0.10);
    border-color: rgba(98,152,254,0.55);
    transform: translateY(-1px);
    color: #ffffff !important;
}
.pcm-aff-share__btn svg { width: 16px; height: 16px; }

/* Toast de confirmation copie */
.pcm-aff-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 16px 38px rgba(0,0,0,0.40), 0 0 24px rgba(34,197,94,0.30);
    opacity: 0;
    pointer-events: none;
    z-index: 9999999;
    transition: opacity 0.25s, transform 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pcm-aff-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pcm-aff-toast svg { width: 18px; height: 18px; }

/* =========================================================
   PCM — Empty state "Vos références" + "Lien vers nous" redesign
   ========================================================= */

/* Cache TOUTE l'illustration Lagom dans les empty states (img + svg inline + lottie) */
html body[class*="page-affiliate"] .message-no-data > img,
html body[class*="page-affiliate"] .message-no-data > svg,
html body[class*="page-affiliate"] .message-no-data > .icon,
html body[class*="page-affiliate"] .message-no-data > .illustration,
html body[class*="page-affiliate"] .message-no-data > .lagom-illustration,
html body[class*="page-affiliate"] .message-no-data > [class*="illustration"],
html body[class*="page-affiliate"] .message-no-data > [class*="lottie"],
html body[class*="page-affiliate"] .message-no-data > div:not(.message-text):not(.pcm-aff-empty-cta-btn):not([data-pcm-aff-empty-cta]),
html body[class*="page-affiliate"] .message-empty img,
html body[class*="page-affiliate"] .message-empty svg,
html body[class*="page-affiliate"] .empty-state img,
html body[class*="page-affiliate"] .empty-state svg,
html body[class*="page-affiliate"] .dataTables_empty img,
html body[class*="page-affiliate"] .dataTables_empty svg,
html body[class*="page-affiliate"] [data-pcm-aff-hide-lagom-illu="1"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* Empty state Lagom natif : design clean PCM bleu */
html body[class*="page-affiliate"] .message-no-data,
html body[class*="page-affiliate"] .message-empty,
html body[class*="page-affiliate"] .empty-state,
html body[class*="page-affiliate"] .no-records-found,
html body[class*="page-affiliate"] td.dataTables_empty {
    background: transparent !important;
    border: 0 !important;
    padding: 50px 24px !important;
    text-align: center !important;
    color: #c4e3ff !important;
    position: relative !important;
}
html body[class*="page-affiliate"] .message-no-data::before,
html body[class*="page-affiliate"] .empty-state::before,
html body[class*="page-affiliate"] .no-records-found::before,
html body[class*="page-affiliate"] td.dataTables_empty::before {
    content: '';
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px auto;
    border-radius: 18px;
    background-color: rgba(25,102,255,0.10);
    border: 1px solid rgba(98,152,254,0.30);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='4'/><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><path d='M19 8v6'/><path d='M22 11h-6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
    box-shadow: 0 8px 20px rgba(25,102,255,0.10);
}
html body[class*="page-affiliate"] .message-no-data .message-text,
html body[class*="page-affiliate"] td.dataTables_empty {
    color: #c4e3ff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* =========================================================
   PCM — Headers de section "Vos références" / "Lien vers nous"
   ========================================================= */

/* TOUS les titres directs des panels/sections : padding interne */
html body[class*="page-affiliate"] .panel > .panel-heading,
html body[class*="page-affiliate"] .panel > h1,
html body[class*="page-affiliate"] .panel > h2,
html body[class*="page-affiliate"] .panel > h3,
html body[class*="page-affiliate"] .panel > h4,
html body[class*="page-affiliate"] .panel > h5,
html body[class*="page-affiliate"] .panel > .section-header,
html body[class*="page-affiliate"] .panel > .card-header,
html body[class*="page-affiliate"] section > h1,
html body[class*="page-affiliate"] section > h2,
html body[class*="page-affiliate"] section > h3,
html body[class*="page-affiliate"] section > .section-header,
html body[class*="page-affiliate"] .section > h1,
html body[class*="page-affiliate"] .section > h2,
html body[class*="page-affiliate"] .section > h3,
html body[class*="page-affiliate"] .section > .section-header,
html body[class*="page-affiliate"] [class*="section"] > h2,
html body[class*="page-affiliate"] [class*="section"] > h3,
html body[class*="page-affiliate"] [class*="section"] > .panel-heading {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.14) !important;
    padding: 20px 26px 16px 26px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
html body[class*="page-affiliate"] .panel .panel-title,
html body[class*="page-affiliate"] .panel > .panel-heading > h3,
html body[class*="page-affiliate"] .panel > .panel-heading > h4,
html body[class*="page-affiliate"] .panel > .panel-heading > .panel-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Icône accent à gauche du titre selon le contenu */
html body[class*="page-affiliate"] .panel:has(table) > .panel-heading > .panel-title::before,
html body[class*="page-affiliate"] .panel:has(.message-no-data) > .panel-heading > .panel-title::before {
    content: '';
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(98,152,254,0.10));
    border: 1px solid rgba(98,152,254,0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    flex-shrink: 0;
}

/* Lien vers nous : icône lien à gauche */
html body[class*="page-affiliate"] .panel:has(a[href*="aff.php?aff="]) > .panel-heading > .panel-title::before {
    content: '';
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(25,102,255,0.25), rgba(98,152,254,0.10));
    border: 1px solid rgba(98,152,254,0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    flex-shrink: 0;
}

/* Heading "fully top-level" sans .panel-heading wrapper (h2/h3 flush gauche) */
html body[class*="page-affiliate"] .panel > h1:first-child,
html body[class*="page-affiliate"] .panel > h2:first-child,
html body[class*="page-affiliate"] .panel > h3:first-child,
html body[class*="page-affiliate"] .panel > h4:first-child,
html body[class*="page-affiliate"] .panel > h5:first-child,
html body[class*="page-affiliate"] .panel > strong:first-child,
html body[class*="page-affiliate"] section > h1:first-child,
html body[class*="page-affiliate"] section > h2:first-child,
html body[class*="page-affiliate"] section > h3:first-child {
    padding: 20px 26px 16px 26px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(98,152,254,0.14) !important;
    display: block !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

/* Padding interne du panel-body amélioré */
html body[class*="page-affiliate"] .panel > .panel-body {
    padding: 24px 26px !important;
    background: transparent !important;
}

/* Empty state : moins de padding vertical (la zone vide était trop haute) */
html body[class*="page-affiliate"] .message-no-data,
html body[class*="page-affiliate"] .message-empty,
html body[class*="page-affiliate"] .empty-state {
    padding: 36px 24px 32px 24px !important;
    min-height: auto !important;
}

/* Panel : reset le panel pour qu'il ait son padding via panel-body uniquement */
html body[class*="page-affiliate"] .panel {
    padding: 0 !important;
}

/* Si le titre est un TEXT NODE direct du panel (pas wrappé), force le padding via le panel */
html body[class*="page-affiliate"] .panel:not(:has(.panel-heading)):not(:has(.panel-body)) {
    padding: 0 !important;
}
html body[class*="page-affiliate"] .panel > * {
    /* Tout enfant direct du panel a un padding gauche/droite minimal pour ne pas être flush */
}
html body[class*="page-affiliate"] .panel > div:not(.panel-heading):not(.panel-body):not(.pcm-aff-copy):not(.pcm-aff-copy-host) {
    padding: 0 26px 24px 26px !important;
}

/* "Lien vers nous" : transformer le bare URL en bloc designed */
html body[class*="page-affiliate"] .panel-body > a[href*="aff.php?aff="],
html body[class*="page-affiliate"] .panel-body a[href*="aff.php?aff="]:only-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(5,13,36,0.70) !important;
    border: 1px solid rgba(98,152,254,0.28) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    color: #6298fe !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s !important;
    word-break: break-all !important;
    max-width: 100% !important;
}
html body[class*="page-affiliate"] .panel-body > a[href*="aff.php?aff="]:hover {
    border-color: rgba(98,152,254,0.60) !important;
    background: rgba(15,29,63,0.80) !important;
    color: #c4e3ff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(25,102,255,0.15) !important;
}
html body[class*="page-affiliate"] .panel-body > a[href*="aff.php?aff="]::before {
    content: '';
    width: 16px; height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236298fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Section "Comment ça marche" : timeline horizontale */
html body[class*="page-affiliate"] .panel-body ol,
html body[class*="page-affiliate"] .panel-body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
html body[class*="page-affiliate"] .panel-body ol li,
html body[class*="page-affiliate"] .panel-body ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    background: rgba(15,29,63,0.50) !important;
    border: 1px solid rgba(98,152,254,0.12) !important;
    border-radius: 12px !important;
    color: #c4e3ff !important;
    line-height: 1.55 !important;
    transition: border-color 0.18s, transform 0.18s !important;
}
html body[class*="page-affiliate"] .panel-body ol li:hover,
html body[class*="page-affiliate"] .panel-body ul li:hover {
    border-color: rgba(98,152,254,0.35) !important;
    transform: translateX(4px) !important;
}
html body[class*="page-affiliate"] .panel-body ol {
    counter-reset: pcm-aff-counter !important;
}
html body[class*="page-affiliate"] .panel-body ol li::before {
    counter-increment: pcm-aff-counter !important;
    content: counter(pcm-aff-counter) !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: white !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(25,102,255,0.30) !important;
}

/* Section "Bannières marketing" : grille images */
html body[class*="page-affiliate"] .banner-preview,
html body[class*="page-affiliate"] textarea[readonly][rows] {
    background: rgba(5,13,36,0.70) !important;
    border: 1px solid rgba(98,152,254,0.25) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: #c4e3ff !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Status badges dans la table (pending/paid/cancelled) */
html body[class*="page-affiliate"] table td:has([class*="badge"]),
html body[class*="page-affiliate"] table td .label,
html body[class*="page-affiliate"] table td .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    background: rgba(98,152,254,0.14) !important;
    color: #6298fe !important;
    border: 1px solid rgba(98,152,254,0.35) !important;
}
html body[class*="page-affiliate"] table td .badge.label-success,
html body[class*="page-affiliate"] table td .label-success {
    background: rgba(34,197,94,0.16) !important;
    color: #86efac !important;
    border-color: rgba(34,197,94,0.40) !important;
}
html body[class*="page-affiliate"] table td .badge.label-warning,
html body[class*="page-affiliate"] table td .label-warning {
    background: rgba(252,211,77,0.16) !important;
    color: #fde68a !important;
    border-color: rgba(252,211,77,0.40) !important;
}
html body[class*="page-affiliate"] table td .badge.label-danger,
html body[class*="page-affiliate"] table td .label-danger {
    background: rgba(239,68,68,0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,0.40) !important;
}

/* Glow effect au survol du panel hero */
.pcm-aff-hero::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(98,152,254,0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .pcm-aff-hero { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; }
    .pcm-aff-hero__illu { width: 140px; height: 140px; margin: 0 auto; }
    html body[class*="page-affiliate"] .info-list .info::after,
    html body[class*="page-affiliate"] .stats-box::after { width: 32px; height: 32px; background-size: 18px 18px; top: 14px; right: 14px; }
}

/* =========================================================
   PCM — Page /viewinvoice.php : design minimal navy (v2 simple)
   ========================================================= */

html body.pcm-invoice-page { background: #050d24 !important; }
html body.pcm-invoice-page .main-content { background: transparent !important; color: #c4e3ff !important; }

html body.pcm-invoice-page h1,
html body.pcm-invoice-page h2,
html body.pcm-invoice-page h3,
html body.pcm-invoice-page .content-title,
html body.pcm-invoice-page .panel-title { color: #ffffff !important; }

html body.pcm-invoice-page .panel,
html body.pcm-invoice-page .card {
    background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden !important;
    margin-bottom: 20px !important;
    color: #c4e3ff !important;
}
html body.pcm-invoice-page .panel-heading {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.14) !important;
    padding: 16px 22px !important;
}
html body.pcm-invoice-page .panel-body {
    background: transparent !important;
    padding: 22px !important;
    color: #c4e3ff !important;
}

html body.pcm-invoice-page table,
html body.pcm-invoice-page .table {
    background: transparent !important;
    color: #c4e3ff !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
html body.pcm-invoice-page table thead th,
html body.pcm-invoice-page .table thead th {
    background: rgba(5,13,36,0.70) !important;
    color: #8fadc9 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.16) !important;
}
html body.pcm-invoice-page table tbody td,
html body.pcm-invoice-page .table tbody td {
    background: rgba(15,29,63,0.30) !important;
    color: #ffffff !important;
    padding: 13px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(98,152,254,0.06) !important;
    vertical-align: middle !important;
}
html body.pcm-invoice-page table tr:has(strong) td,
html body.pcm-invoice-page table tfoot td {
    background: rgba(5,13,36,0.55) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

html body.pcm-invoice-page .btn-primary,
html body.pcm-invoice-page button[type="submit"]:not(.btn-default):not(.btn-secondary),
html body.pcm-invoice-page .btn-action-primary {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 18px rgba(25,102,255,0.28) !important;
    transition: transform 0.18s, filter 0.18s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    cursor: pointer !important;
}
html body.pcm-invoice-page .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05) !important;
}
html body.pcm-invoice-page .btn-default,
html body.pcm-invoice-page .btn-secondary {
    background: rgba(15,29,63,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.28) !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
}
html body.pcm-invoice-page .btn-default:hover { background: rgba(98,152,254,0.10) !important; }

html body.pcm-invoice-page .label,
html body.pcm-invoice-page .badge {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}
html body.pcm-invoice-page .label-success { background: rgba(34,197,94,0.18) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,0.45) !important; }
html body.pcm-invoice-page .label-warning { background: rgba(252,211,77,0.18) !important; color: #fde68a !important; border: 1px solid rgba(252,211,77,0.45) !important; }
html body.pcm-invoice-page .label-danger  { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,0.45) !important; }
html body.pcm-invoice-page .label-info    { background: rgba(98,152,254,0.18) !important; color: #6298fe !important; border: 1px solid rgba(98,152,254,0.45) !important; }
html body.pcm-invoice-page .label-default { background: rgba(148,163,184,0.18) !important; color: #c4e3ff !important; border: 1px solid rgba(148,163,184,0.40) !important; }

html body.pcm-invoice-page .form-control,
html body.pcm-invoice-page input[type="text"],
html body.pcm-invoice-page select {
    background: rgba(5,13,36,0.60) !important;
    color: #ffffff !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
}
html body.pcm-invoice-page label { color: #c4e3ff !important; font-weight: 600 !important; }

html body.pcm-invoice-page p,
html body.pcm-invoice-page td,
html body.pcm-invoice-page li { color: #c4e3ff !important; }
html body.pcm-invoice-page strong,
html body.pcm-invoice-page b { color: #ffffff !important; }
html body.pcm-invoice-page hr { border-color: rgba(98,152,254,0.14) !important; margin: 18px 0 !important; }
html body.pcm-invoice-page a:not(.btn):not(.nav-link):not(.btn-primary):not(.btn-default) {
    color: #6298fe !important;
    text-decoration: none !important;
}
html body.pcm-invoice-page a:not(.btn):not(.nav-link):hover {
    color: #c4e3ff !important;
    text-decoration: underline !important;
}

/* =========================================================
   PCM — Fixes mobile : login/register stack + menu drawer
   ========================================================= */

@media (max-width: 880px) {
    /* REGISTER : passe en 1 colonne */
    body.register-page .login-wrapper,
    body.page-clientregister .login-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        min-height: auto !important;
    }
    body.register-page .pcm-login-aside,
    body.page-clientregister .pcm-login-aside,
    body.register-page .pcm-login-main,
    body.page-clientregister .pcm-login-main {
        padding: 28px 24px !important;
    }
}

@media (max-width: 768px) {
    /* LOGIN : header marketing visible, padding adapté */
    body.page-login .login-wrapper,
    body.register-page .login-wrapper,
    body.page-clientregister .login-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        min-height: auto !important;
        border-radius: 14px !important;
    }
    body.page-login .pcm-login-aside,
    body.register-page .pcm-login-aside,
    body.page-clientregister .pcm-login-aside,
    body.page-login .pcm-login-main,
    body.register-page .pcm-login-main,
    body.page-clientregister .pcm-login-main {
        padding: 24px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-login .main-body,
    body.register-page .main-body,
    body.page-clientregister .main-body {
        padding: 16px 0 !important;
    }
    /* Réduire taille titres mobile */
    body.page-login .pcm-login-aside h1,
    body.register-page .pcm-login-aside h1,
    body.page-clientregister .pcm-login-aside h1,
    body.page-login .pcm-login-aside h2,
    body.register-page .pcm-login-aside h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
}

/* =========================================================
   PCM — Masque aside marketing sur mobile login/register
   ========================================================= */
@media (max-width: 768px) {
    body.page-login .pcm-login-aside,
    body.register-page .pcm-login-aside,
    body.page-clientregister .pcm-login-aside,
    body.page-login .pcm-login-aside--illustration,
    body.register-page .pcm-login-aside--illustration,
    body.page-clientregister .pcm-login-aside--illustration {
        display: none !important;
    }
    body.page-login .login-wrapper,
    body.register-page .login-wrapper,
    body.page-clientregister .login-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 500px !important;
    }
    body.page-login .pcm-login-main,
    body.register-page .pcm-login-main,
    body.page-clientregister .pcm-login-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px 22px !important;
    }
}

/* Sur mobile très petit : ajustements supplémentaires */
@media (max-width: 480px) {
    body.page-login .pcm-login-main h2,
    body.page-login .pcm-login-main .title,
    body.register-page .pcm-login-main h2,
    body.register-page .pcm-login-main .title {
        font-size: 20px !important;
    }
    body.page-login .pcm-login-aside h1,
    body.register-page .pcm-login-aside h1 {
        font-size: 20px !important;
    }
    body.page-login .pcm-login-aside p,
    body.register-page .pcm-login-aside p {
        font-size: 13px !important;
    }
}

/* =========================================================
   PCM — Mobile menu drawer (body.menu-open) — Lagom natif
   ========================================================= */

@media (max-width: 991.98px) {
    /* Quand body.menu-open : #main-menu plein écran */
    html body.menu-open .app-nav-menu,
    html body.menu-open #main-menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100% !important;
        z-index: 99998 !important;
        background: linear-gradient(180deg, #08132e 0%, #050d24 100%) !important;
        overflow-y: auto !important;
        padding: 80px 20px 40px 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body.menu-open #main-menu .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Logo dans le drawer mobile */
    html body.menu-open #main-menu > .container > .logo {
        display: block !important;
        margin-bottom: 24px !important;
        padding: 0 4px !important;
    }
    html body.menu-open #main-menu > .container > .logo img {
        height: 32px !important;
        width: auto !important;
    }

    /* Liste principale en flex vertical */
    html body.menu-open #main-menu .menu.menu-primary,
    html body.menu-open #main-menu ul.menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        background: transparent !important;
    }

    /* Items niveau 1 */
    html body.menu-open #main-menu .menu.menu-primary > li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    html body.menu-open #main-menu .menu.menu-primary > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 14px 16px !important;
        color: #c4e3ff !important;
        background: rgba(15, 29, 63, 0.40) !important;
        border: 1px solid rgba(98, 152, 254, 0.10) !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        margin-bottom: 4px !important;
    }
    html body.menu-open #main-menu .menu.menu-primary > li > a:hover,
    html body.menu-open #main-menu .menu.menu-primary > li > a:focus,
    html body.menu-open #main-menu .menu.menu-primary > li.active > a {
        background: rgba(25, 102, 255, 0.18) !important;
        color: #ffffff !important;
        border-color: rgba(98, 152, 254, 0.35) !important;
    }
    html body.menu-open #main-menu .menu.menu-primary > li > a .item-text {
        flex: 1 !important;
        text-align: left !important;
        color: inherit !important;
    }
    html body.menu-open #main-menu .menu.menu-primary > li > a .ls-caret {
        font-size: 14px !important;
        opacity: 0.6 !important;
    }

    /* Bouton login spécial (Connexion) */
    html body.menu-open #main-menu .menu.menu-primary > li.nav-item-btn > a.btn-primary {
        background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        justify-content: center !important;
        margin-top: 16px !important;
        padding: 14px 22px !important;
        box-shadow: 0 6px 18px rgba(25, 102, 255, 0.30) !important;
        border: 0 !important;
    }

    /* Dropdowns dans le drawer mobile : items affichés en grille de cartes */
    html body.menu-open #main-menu .dropdown-menu {
        position: static !important;
        display: none !important;
        background: rgba(5, 13, 36, 0.50) !important;
        border: 0 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        padding: 6px !important;
        margin: 4px 0 8px 0 !important;
        max-height: none !important;
        overflow: visible !important;
        list-style: none !important;
        width: 100% !important;
    }
    /* Quand le parent dropdown est ouvert (.open ou .show) */
    html body.menu-open #main-menu .dropdown.open > .dropdown-menu,
    html body.menu-open #main-menu .dropdown.show > .dropdown-menu,
    html body.menu-open #main-menu .dropdown[aria-expanded="true"] > .dropdown-menu {
        display: block !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li {
        background: transparent !important;
        border: 0 !important;
        list-style: none !important;
        margin: 2px 0 !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        color: #c4e3ff !important;
        background: transparent !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        width: 100% !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li > a:hover {
        background: rgba(25, 102, 255, 0.14) !important;
        color: #ffffff !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li.nav-divider {
        border-top: 1px solid rgba(98, 152, 254, 0.10) !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        height: 1px !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    /* SVG icons des dropdown */
    html body.menu-open #main-menu .dropdown-menu > li > a > svg {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li > a .menu-item-content {
        flex: 1 !important;
    }
    html body.menu-open #main-menu .dropdown-menu > li > a .menu-item-title {
        color: inherit !important;
        font-weight: 600 !important;
    }

    /* Body verrouillé pendant que le menu est ouvert */
    html body.menu-open {
        overflow: hidden !important;
    }

    /* Le contenu principal de la page reste derrière (z-index plus bas) */
    html body.menu-open > .app-main,
    html body.menu-open > .app-content,
    html body.menu-open > .site,
    html body.menu-open > .main-footer {
        z-index: 1 !important;
    }
}

/* =========================================================
   PCM — Fix sticky header bug (glitch / flicker au scroll)
   ========================================================= */

/* Scope strict : UNIQUEMENT pages publiques (CMS / login / homepage), JAMAIS client area */
html body.page-lagompage .app-nav.sticky-navigation,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav.sticky-navigation,
html body.page-login .app-nav.sticky-navigation,
html body.register-page .app-nav.sticky-navigation,
html body.page-clientregister .app-nav.sticky-navigation {
    /* PCM : sticky (pas fixed) — réserve sa hauteur dans le flux, donc le
       contenu (hero / carte login) ne passe plus dessous. Breakpoint-proof.
       Flicker neutralisé par fond opaque + backdrop-filter:none ci-dessous. */
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    will-change: transform !important;
    background-color: #08132e !important;
    transition: none !important;
    -webkit-transition: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* PCM : le nav sticky réserve déjà sa hauteur dans le flux. Le JS Lagom pose
   un padding-top inline sur <body> (compensation de l'ancien nav fixed) qui
   fait désormais doublon => bande vide en haut. On l'annule (le !important
   bat le style inline du JS). Scope strict = mêmes pages publiques. */
html body.page-lagompage,
html body.page-lagom-cms:not(.lagom-client-area),
html body.page-login,
html body.register-page,
html body.page-clientregister {
    padding-top: 0 !important;
}

/* Désactive le backdrop-filter au scroll — public pages uniquement */
html body.page-lagompage.scrolling .app-nav.sticky-navigation,
html body.page-lagom-cms.scrolling .app-nav.sticky-navigation,
html body.page-login.scrolling .app-nav.sticky-navigation {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Header opaque — public pages uniquement */
html body.page-lagompage .app-nav.sticky-navigation,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav.sticky-navigation,
html body.page-lagompage .app-nav.sticky-navigation .app-nav-header,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav.sticky-navigation .app-nav-header {
    background: #0f1d3f !important;
    background-color: #0f1d3f !important;
}

/* Pseudo-elements anti-flicker — public pages uniquement */
html body.page-lagompage .app-nav.sticky-navigation::before,
html body.page-lagompage .app-nav.sticky-navigation::after,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav.sticky-navigation::before,
html body.page-lagom-cms:not(.lagom-client-area) .app-nav.sticky-navigation::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   PCM — Bouton X de fermeture du menu mobile
   ========================================================= */

@media (max-width: 991.98px) {
    /* Le toggle button reste cliquable AU-DESSUS du drawer ouvert */
    html body.menu-open .app-nav-toggle,
    html body.menu-open .navbar-toggle {
        position: fixed !important;
        top: 16px !important;
        right: 18px !important;
        left: auto !important;
        z-index: 100000 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        cursor: pointer !important;
        transition: background 0.18s !important;
    }
    html body.menu-open .app-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    /* Transforme les 4 barres en X quand le menu est ouvert */
    html body.menu-open .app-nav-toggle .icon-bar {
        background-color: #ffffff !important;
        position: absolute !important;
        width: 20px !important;
        height: 2px !important;
        border-radius: 2px !important;
        margin: 0 !important;
        transition: transform 0.22s ease, opacity 0.18s ease !important;
        transform-origin: center !important;
    }
    /* Barre 1 (haut) : rotation 45° */
    html body.menu-open .app-nav-toggle .icon-bar:nth-child(1) {
        transform: rotate(45deg) !important;
    }
    /* Barre 2 + 3 (milieu) : invisibles */
    html body.menu-open .app-nav-toggle .icon-bar:nth-child(2),
    html body.menu-open .app-nav-toggle .icon-bar:nth-child(3) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    /* Barre 4 (bas) : rotation -45° */
    html body.menu-open .app-nav-toggle .icon-bar:nth-child(4) {
        transform: rotate(-45deg) !important;
    }

    /* État normal (menu fermé) — barres bien visibles */
    html body:not(.menu-open) .app-nav-toggle .icon-bar {
        background-color: #ffffff !important;
        transition: transform 0.22s ease, opacity 0.18s ease !important;
    }
}

/* =========================================================
   PCM — Responsive mobile pour pages /order, /cart, /register
   ========================================================= */

@media (max-width: 991.98px) {
    /* Sticky bottom CTA "Passer la commande" : full-width fixed bottom */
    html body.app-main-order .order-summary-mobile,
    html body.app-main-order .cart-summary-mobile,
    html body.app-main-order [class*="summary-mobile"],
    html body.app-main-order [class*="checkout-bar"],
    html body.app-main-order [class*="order-cta-bar"],
    html body.app-main-order [class*="summary-toggle"],
    html body.app-main-order .order-summary-bar,
    html body.app-main-order .summary-bar,
    html body[class*="page-cart"] .order-summary-mobile,
    html body[class*="page-cart"] [class*="summary-mobile"],
    html body[class*="page-order"] .order-summary-mobile,
    html body[class*="page-order"] [class*="summary-mobile"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 9990 !important;
        background: linear-gradient(180deg, rgba(8, 19, 46, 0.96), rgba(5, 13, 36, 0.98)) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid rgba(98, 152, 254, 0.20) !important;
        padding: 14px 16px env(safe-area-inset-bottom, 14px) 14px !important;
        margin: 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35) !important;
    }

    /* Padding-bottom sur le contenu principal pour ne pas être caché par la barre */
    html body.app-main-order,
    html body[class*="page-cart"],
    html body[class*="page-order"] {
        padding-bottom: 120px !important;
    }
    html body.app-main-order .main-content,
    html body.app-main-order .app-main,
    html body[class*="page-cart"] .main-content,
    html body[class*="page-order"] .main-content {
        padding-bottom: 100px !important;
    }

    /* Bouton "Passer la commande" pleine largeur */
    html body.app-main-order .btn-primary.checkout-btn,
    html body.app-main-order [class*="summary-mobile"] .btn-primary,
    html body.app-main-order [class*="checkout-bar"] .btn-primary,
    html body.app-main-order .btn-place-order,
    html body.app-main-order button[type="submit"]:not(.btn-default):not(.btn-secondary):not(.btn-sm) {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        font-size: 15px !important;
    }

    /* Checkbox "J'ai lu et j'accepte" : positionne au-dessus de la barre */
    html body.app-main-order .accept-tos,
    html body.app-main-order .form-group:has(input[name="accepttos"]),
    html body.app-main-order [class*="terms-checkbox"],
    html body.app-main-order .checkbox:has(input[name*="tos"]),
    html body.app-main-order .checkbox:has(input[name*="accept"]) {
        margin: 14px 0 !important;
        padding: 12px 14px !important;
        background: rgba(15, 29, 63, 0.50) !important;
        border-radius: 10px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Header sticky : compense la hauteur sur les pages order */
    html body.app-main-order {
        padding-top: 74px !important;
    }

    /* Tabs / cards de produits : pleine largeur sur mobile */
    html body.app-main-order .product-tab,
    html body.app-main-order .order-tab,
    html body.app-main-order .product-card,
    html body.app-main-order [class*="product-item"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Forms : labels au-dessus des inputs */
    html body.app-main-order .form-group,
    html body[class*="page-cart"] .form-group,
    html body[class*="page-order"] .form-group {
        display: block !important;
        margin-bottom: 16px !important;
    }
    html body.app-main-order .form-group > label,
    html body.app-main-order .form-group > .control-label,
    html body[class*="page-order"] .form-group > label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        color: #c4e3ff !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
    html body.app-main-order .form-group > [class*="col-"],
    html body[class*="page-order"] .form-group > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Sections pleine largeur */
    html body.app-main-order .section,
    html body.app-main-order .panel,
    html body[class*="page-cart"] .section,
    html body[class*="page-cart"] .panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Container : padding latéral réduit */
    html body.app-main-order .container,
    html body[class*="page-cart"] .container,
    html body[class*="page-order"] .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* Inputs et selects pleine largeur, fonts plus grandes pour mobile */
    html body.app-main-order input,
    html body.app-main-order select,
    html body.app-main-order textarea,
    html body[class*="page-cart"] input,
    html body[class*="page-order"] input {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* iOS ne zoome pas si >= 16px */
        min-height: 46px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    /* Recherche domaine : full-width */
    html body.app-main-order .domain-search-input,
    html body.app-main-order .search-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
    html body.app-main-order .domain-search-input .form-control,
    html body.app-main-order .search-field input {
        width: 100% !important;
    }
    html body.app-main-order .search-group-btn,
    html body.app-main-order .search-group-btn button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* TLD chips : grille auto-fit */
    html body.app-main-order .section-tlds,
    html body.app-main-order .tld-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    html body.app-main-order .tld {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* Cards produits : empilées */
    html body.app-main-order .row > [class*="col-"]:not(.col-12) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Titres h1/h2 : tailles raisonnables mobile */
    html body.app-main-order h1,
    html body[class*="page-cart"] h1 {
        font-size: clamp(22px, 5vw, 28px) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        padding: 0 4px !important;
    }
    html body.app-main-order h2,
    html body[class*="page-cart"] h2 {
        font-size: clamp(18px, 4vw, 22px) !important;
        line-height: 1.25 !important;
        padding: 0 4px !important;
    }
}

@media (max-width: 480px) {
    html body.app-main-order .container,
    html body[class*="page-cart"] .container,
    html body[class*="page-order"] .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    html body.app-main-order .section,
    html body.app-main-order .panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   PCM — Responsive mobile pour pages client area (productdetails, etc.)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Layout principal : sidebar + content empilés verticalement */
    html body[class*="page-clientarea"] .main-sidebar,
    html body[class*="page-clientarea"] .sidebar-sticky,
    html body[class*="page-clientarea"] .sidebar-primary,
    html body[class*="page-clientarea"] .sidebar-secondary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        position: static !important;
        margin-bottom: 16px !important;
    }

    html body[class*="page-clientarea"] .main-sidebar ~ .main-content,
    html body[class*="page-clientarea"] .main-sidebar ~ div:not(.main-sidebar),
    html body[class*="page-clientarea"] .app-content > .main-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 12px !important;
    }

    /* Parent flex container : passe en colonne */
    html body[class*="page-clientarea"] .row:has(.main-sidebar),
    html body[class*="page-clientarea"] .app-content > .row,
    html body[class*="page-clientarea"] .app-content > div > .row,
    html body[class*="page-clientarea"] [class*="container"] > .row:has(.main-sidebar) {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    /* Panel sidebar : compact + headings serrés */
    html body[class*="page-clientarea"] .panel.panel-sidebar {
        margin-bottom: 12px !important;
    }
    html body[class*="page-clientarea"] .panel.panel-sidebar .panel-heading {
        padding: 12px 16px !important;
    }
    html body[class*="page-clientarea"] .panel.panel-sidebar .panel-title,
    html body[class*="page-clientarea"] .panel.panel-sidebar h5 {
        font-size: 13px !important;
    }
    html body[class*="page-clientarea"] .panel.panel-sidebar .list-group-item,
    html body[class*="page-clientarea"] .panel.panel-sidebar a.list-group-item {
        padding: 12px 14px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* Sections principales : padding réduit, marges propres */
    html body[class*="page-clientarea"] .section,
    html body[class*="page-clientarea"] .panel,
    html body[class*="page-clientarea"] .panel-default {
        margin-bottom: 14px !important;
    }
    html body[class*="page-clientarea"] .panel-heading {
        padding: 14px 18px !important;
    }
    html body[class*="page-clientarea"] .panel-body {
        padding: 16px 18px !important;
    }
    html body[class*="page-clientarea"] .panel-title,
    html body[class*="page-clientarea"] .panel-heading h3,
    html body[class*="page-clientarea"] .panel-heading h4,
    html body[class*="page-clientarea"] .panel-heading h5 {
        font-size: 14px !important;
    }

    /* Titres */
    html body[class*="page-clientarea"] .main-content h1,
    html body[class*="page-clientarea"] .content-title,
    html body[class*="page-clientarea"] .page-title {
        font-size: clamp(20px, 5vw, 26px) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        padding: 0 8px !important;
        margin-bottom: 16px !important;
    }
    html body[class*="page-clientarea"] h2,
    html body[class*="page-clientarea"] h3 {
        font-size: clamp(16px, 4vw, 20px) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    /* Stats / metrics tiles : 1 colonne ou 2 max */
    html body[class*="page-clientarea"] .stats-row,
    html body[class*="page-clientarea"] .product-stats,
    html body[class*="page-clientarea"] .row.stats-tiles,
    html body[class*="page-clientarea"] .row:has(.usage-stat) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    html body[class*="page-clientarea"] .stats-row > [class*="col-"],
    html body[class*="page-clientarea"] .product-stats > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Tableaux : scroll horizontal au lieu de wrap */
    html body[class*="page-clientarea"] table,
    html body[class*="page-clientarea"] .table {
        font-size: 13px !important;
    }
    html body[class*="page-clientarea"] table thead th,
    html body[class*="page-clientarea"] .table thead th {
        padding: 10px 12px !important;
        font-size: 10px !important;
    }
    html body[class*="page-clientarea"] table tbody td,
    html body[class*="page-clientarea"] .table tbody td {
        padding: 10px 12px !important;
    }
    html body[class*="page-clientarea"] .table-responsive,
    html body[class*="page-clientarea"] .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -8px !important;
    }

    /* Tabs / navigation onglets : scroll horizontal */
    html body[class*="page-clientarea"] .nav-tabs,
    html body[class*="page-clientarea"] .tab-nav,
    html body[class*="page-clientarea"] [data-nav-tabs-container] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        scrollbar-width: thin !important;
    }
    html body[class*="page-clientarea"] .nav-tabs::-webkit-scrollbar,
    html body[class*="page-clientarea"] .tab-nav::-webkit-scrollbar {
        height: 4px !important;
    }
    html body[class*="page-clientarea"] .nav-tabs > li,
    html body[class*="page-clientarea"] .tab-nav > * {
        flex-shrink: 0 !important;
    }

    /* Forms : labels en haut, inputs full-width */
    html body[class*="page-clientarea"] .form-group {
        display: block !important;
        margin-bottom: 14px !important;
    }
    html body[class*="page-clientarea"] .form-group > label,
    html body[class*="page-clientarea"] .form-group > .control-label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
    html body[class*="page-clientarea"] .form-group > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    html body[class*="page-clientarea"] .form-control,
    html body[class*="page-clientarea"] input[type="text"],
    html body[class*="page-clientarea"] input[type="email"],
    html body[class*="page-clientarea"] input[type="password"],
    html body[class*="page-clientarea"] select,
    html body[class*="page-clientarea"] textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Boutons : full-width sur mobile */
    html body[class*="page-clientarea"] .btn-primary,
    html body[class*="page-clientarea"] .btn-action,
    html body[class*="page-clientarea"] button[type="submit"]:not(.btn-default):not(.btn-secondary) {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
        margin-bottom: 8px !important;
    }
    html body[class*="page-clientarea"] .btn-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
    }
    html body[class*="page-clientarea"] .btn-group > .btn {
        width: 100% !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    /* Container & rows : padding réduit */
    html body[class*="page-clientarea"] .container,
    html body[class*="page-clientarea"] .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
    html body[class*="page-clientarea"] .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
    html body[class*="page-clientarea"] .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Lists / info-list : items en colonne propre */
    html body[class*="page-clientarea"] .list-info,
    html body[class*="page-clientarea"] .list-info-bordered {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    html body[class*="page-clientarea"] .list-info > li,
    html body[class*="page-clientarea"] .list-info-bordered > li {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Stats cards (RAM, CPU, Disk) compact */
    html body[class*="page-clientarea"] .usage-stat,
    html body[class*="page-clientarea"] .stat-card,
    html body[class*="page-clientarea"] [class*="stat-tile"] {
        padding: 14px 16px !important;
    }
    html body[class*="page-clientarea"] .stat-value,
    html body[class*="page-clientarea"] .usage-value,
    html body[class*="page-clientarea"] .info-value {
        font-size: 20px !important;
    }
    html body[class*="page-clientarea"] .stat-label,
    html body[class*="page-clientarea"] .info-label {
        font-size: 10px !important;
    }

    /* Hero / product info bloc : padding compact */
    html body[class*="page-clientarea"] .product-info,
    html body[class*="page-clientarea"] .product-header,
    html body[class*="page-clientarea"] .service-header {
        padding: 16px 18px !important;
    }
}

@media (max-width: 480px) {
    /* Très petit écran : 1 colonne pour les stats */
    html body[class*="page-clientarea"] .stats-row,
    html body[class*="page-clientarea"] .product-stats,
    html body[class*="page-clientarea"] .row.stats-tiles {
        grid-template-columns: 1fr !important;
    }
    html body[class*="page-clientarea"] .container,
    html body[class*="page-clientarea"] .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* =========================================================
   PCM — Responsive mobile pour pages /order/* (Vue.js order)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Layout : contenu + panel summary empilés */
    html body.lagom-layout-left .main-body,
    html body.lagom-layout-left .main-body > .container,
    html body.lagom-layout-left .order-page,
    html body[class*="lagom-layout"] .main-body > .container > .row {
        display: block !important;
        flex-direction: column !important;
    }

    html body.lagom-layout-left .main-body > .container,
    html body[class*="lagom-layout"] .container {
        max-width: 100% !important;
        padding: 12px !important;
    }

    /* Cols : 100% full width */
    html body.lagom-layout-left [class*="col-md-"],
    html body.lagom-layout-left [class*="col-lg-"],
    html body.lagom-layout-left [class*="col-xl-"],
    html body[class*="lagom-layout"] .main-body [class*="col-md-"],
    html body[class*="lagom-layout"] .main-body [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 6px !important;
        margin-bottom: 12px !important;
    }

    /* Order summary panel : flux normal (PAS fixed bottom) */
    html body.lagom-layout-left .panel.panel-summary,
    html body.lagom-layout-left .order-summary,
    html body[class*="lagom-layout"] .panel-summary {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        z-index: auto !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 14px !important;
        margin: 14px 0 !important;
        padding: 0 !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
        overflow: hidden !important;
    }
    html body.lagom-layout-left .panel.panel-summary .panel-heading,
    html body.lagom-layout-left .order-summary .panel-heading,
    html body[class*="lagom-layout"] .panel-summary .panel-heading {
        position: static !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.14) !important;
        background: transparent !important;
    }
    html body.lagom-layout-left .panel.panel-summary .panel-body,
    html body.lagom-layout-left .order-summary .panel-body,
    html body[class*="lagom-layout"] .panel-summary .panel-body {
        padding: 14px 18px !important;
    }

    /* Padding-bottom body : aucun besoin (summary dans le flux) */
    html body.lagom-layout-left,
    html body[class*="lagom-layout"] {
        padding-bottom: 24px !important;
    }

    /* Sections : pleine largeur, padding propre */
    html body.lagom-layout-left .section,
    html body.lagom-layout-left .panel:not(.panel-summary):not(.order-summary),
    html body[class*="lagom-layout"] .section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Billing cycles : grid responsive */
    html body.lagom-layout-left .billing-cycles,
    html body.lagom-layout-left .section-packages,
    html body[class*="lagom-layout"] .billing-cycles {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    html body.lagom-layout-left .billing-cycles > *,
    html body.lagom-layout-left .billing-cycle-item,
    html body.lagom-layout-left [class*="cycle-card"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Configurable options : pleine largeur */
    html body.lagom-layout-left .configurable-option,
    html body.lagom-layout-left .config-option,
    html body.lagom-layout-left .product-config-option {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Inputs full-width + font 16px (anti-zoom iOS) */
    html body.lagom-layout-left input,
    html body.lagom-layout-left select,
    html body.lagom-layout-left textarea,
    html body[class*="lagom-layout"] input,
    html body[class*="lagom-layout"] select {
        font-size: 16px !important;
        min-height: 46px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
    }

    /* Boutons CTA */
    html body.lagom-layout-left .btn-primary,
    html body.lagom-layout-left .btn-action,
    html body.lagom-layout-left button[type="submit"]:not(.btn-default):not(.btn-secondary):not(.btn-sm):not(.btn-xs) {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        font-size: 15px !important;
        margin: 6px 0 !important;
    }

    /* Titres */
    html body.lagom-layout-left h1,
    html body[class*="lagom-layout"] h1 {
        font-size: clamp(22px, 5vw, 28px) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        padding: 0 4px !important;
        margin-bottom: 14px !important;
    }
    html body.lagom-layout-left h2,
    html body[class*="lagom-layout"] h2 {
        font-size: clamp(18px, 4vw, 22px) !important;
    }
    html body.lagom-layout-left h3,
    html body[class*="lagom-layout"] h3 {
        font-size: clamp(15px, 3.5vw, 17px) !important;
    }

    /* Forms : labels au-dessus */
    html body.lagom-layout-left .form-group,
    html body[class*="lagom-layout"] .form-group {
        display: block !important;
        margin-bottom: 14px !important;
    }
    html body.lagom-layout-left .form-group > label,
    html body.lagom-layout-left .form-group > .control-label,
    html body[class*="lagom-layout"] .form-group > label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
    html body.lagom-layout-left .form-group > [class*="col-"],
    html body[class*="lagom-layout"] .form-group > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Sticky summary toggle (bouton "Voir le récap" sur mobile) */
    html body.lagom-layout-left .summary-toggle-mobile,
    html body.lagom-layout-left .order-summary-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 14px 18px !important;
        background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-weight: 700 !important;
    }
}

/* =========================================================
   PCM — Fix responsive ULTRA-AGRESSIF pour /order/* (OneStepOrder Vue.js)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Container OneStepOrder : reset complet en colonne */
    html body #lagom-one-step-order,
    html body [data-lagom-one-step-order],
    html body .lagom-one-step-order,
    html body .lagom-layout-left .main-body,
    html body .lagom-layout-left .main-body > .container,
    html body .lagom-layout-left .main-body > div,
    html body .lagom-layout-left .container > .row {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* TOUS les cols sur mobile order page → 100% width forcé */
    html body.lagom-layout-left [class*="col-md-"],
    html body.lagom-layout-left [class*="col-lg-"],
    html body.lagom-layout-left [class*="col-xl-"],
    html body.lagom-layout-left [class*="col-sm-"],
    html body[class*="lagom-layout"] [class*="col-md-"],
    html body[class*="lagom-layout"] [class*="col-lg-"],
    html body[class*="lagom-layout"] [class*="col-xl-"],
    html body[class*="lagom-layout"] .col-one-step-order-content,
    html body[class*="lagom-layout"] .col-one-step-order-summary,
    html body[class*="lagom-layout"] [class*="col-one-step"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 12px !important;
        margin-bottom: 14px !important;
        float: none !important;
    }

    /* Row reset */
    html body[class*="lagom-layout"] .row,
    html body[class*="lagom-layout"] .row-one-step-order {
        display: block !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Sections du Vue order : pleine largeur compactes */
    html body[class*="lagom-layout"] .section--full-width,
    html body[class*="lagom-layout"] .section-domain,
    html body[class*="lagom-layout"] .section-billing-cycles,
    html body[class*="lagom-layout"] .section-packages,
    html body[class*="lagom-layout"] .section-config-options,
    html body[class*="lagom-layout"] .section-cart-items,
    html body[class*="lagom-layout"] .section-checkout,
    html body[class*="lagom-layout"] .section[class*="section-"],
    html body[class*="lagom-layout"] [class*="section--"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
        flex: none !important;
    }

    /* Tabs / nav onglets : scroll horizontal */
    html body[class*="lagom-layout"] .tab-nav,
    html body[class*="lagom-layout"] [data-nav-tabs-container],
    html body[class*="lagom-layout"] .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        padding-bottom: 2px !important;
    }
    html body[class*="lagom-layout"] .tab-nav > *,
    html body[class*="lagom-layout"] [data-nav-tabs-container] > *,
    html body[class*="lagom-layout"] .nav-tabs > li {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Billing cycles cards : 1 colonne ou 2 max selon largeur */
    html body[class*="lagom-layout"] .billing-cycles,
    html body[class*="lagom-layout"] .billing-cycles-list,
    html body[class*="lagom-layout"] [class*="billing-cycle-container"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .billing-cycle-item,
    html body[class*="lagom-layout"] .billing-cycle,
    html body[class*="lagom-layout"] [class*="cycle-option"],
    html body[class*="lagom-layout"] .billing-cycles > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }

    /* Products cards (packages WordPress 1, 2, 3) : grille mobile */
    html body[class*="lagom-layout"] .products-list,
    html body[class*="lagom-layout"] .packages-list,
    html body[class*="lagom-layout"] .section-packages > .row,
    html body[class*="lagom-layout"] [class*="product-grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .product,
    html body[class*="lagom-layout"] .product-item,
    html body[class*="lagom-layout"] .package,
    html body[class*="lagom-layout"] [class*="product-card"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }

    /* Summary col : flux normal sur mobile */
    html body[class*="lagom-layout"] .col-one-step-order-summary,
    html body[class*="lagom-layout"] #summary-sticky {
        position: relative !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        z-index: auto !important;
    }

    /* Boutons CTA */
    html body[class*="lagom-layout"] .btn-primary,
    html body[class*="lagom-layout"] .btn-primary-faded,
    html body[class*="lagom-layout"] button[type="submit"]:not(.btn-default):not(.btn-secondary):not(.btn-sm):not(.btn-xs) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 15px !important;
        margin: 4px 0 !important;
        padding: 12px 18px !important;
    }

    /* Inputs anti-zoom iOS */
    html body[class*="lagom-layout"] input,
    html body[class*="lagom-layout"] select,
    html body[class*="lagom-layout"] textarea {
        font-size: 16px !important;
        min-height: 46px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Recherche domaine : champ + bouton empilés */
    html body[class*="lagom-layout"] .section-domain-search,
    html body[class*="lagom-layout"] .domain-search-input,
    html body[class*="lagom-layout"] .search-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .domain-search-input .form-control,
    html body[class*="lagom-layout"] .search-field,
    html body[class*="lagom-layout"] .search-field input,
    html body[class*="lagom-layout"] .search-group-btn,
    html body[class*="lagom-layout"] .search-group-btn button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* TLDs chips : grille */
    html body[class*="lagom-layout"] .section-tlds,
    html body[class*="lagom-layout"] .tlds {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    html body[class*="lagom-layout"] .tld {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Titres */
    html body[class*="lagom-layout"] h1,
    html body[class*="lagom-layout"] .main-header-title {
        font-size: clamp(20px, 5vw, 26px) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        padding: 0 4px !important;
        margin: 0 0 14px 0 !important;
    }
    html body[class*="lagom-layout"] h2,
    html body[class*="lagom-layout"] .section-title {
        font-size: clamp(17px, 4vw, 20px) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }
    html body[class*="lagom-layout"] h3 {
        font-size: clamp(14px, 3.5vw, 16px) !important;
    }

    /* Forms : labels en haut */
    html body[class*="lagom-layout"] .form-group {
        display: block !important;
        margin-bottom: 14px !important;
    }
    html body[class*="lagom-layout"] .form-group > label,
    html body[class*="lagom-layout"] .form-group > .control-label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
    html body[class*="lagom-layout"] .form-group > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Header sticky : reste haut */
    html body[class*="lagom-layout"] .app-nav.sticky-navigation {
        padding-top: env(safe-area-inset-top, 0) !important;
    }
}

@media (max-width: 480px) {
    /* Très petit : container plus serré */
    html body[class*="lagom-layout"] .section,
    html body[class*="lagom-layout"] [class*="section-"] {
        padding: 14px 12px !important;
    }
    html body[class*="lagom-layout"] [class*="col-"] {
        padding: 0 8px !important;
    }
    /* TLDs en 1 colonne très petit écran */
    html body[class*="lagom-layout"] .section-tlds,
    html body[class*="lagom-layout"] .tlds {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   PCM — Formulaire "Créer un compte" mobile order page
   ========================================================= */

@media (max-width: 991.98px) {
    /* Reset body padding */
    html body[class*="lagom-layout"] {
        padding-bottom: 24px !important;
    }

    /* Panels check (Créer un compte / Connexion / Domain) : cards propres */
    html body[class*="lagom-layout"] .panel.panel-check,
    html body[class*="lagom-layout"] .panel--billing,
    html body[class*="lagom-layout"] .panel.panel-default {
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        overflow: hidden !important;
    }

    /* Heading "Créer un compte" / "Se connecter" */
    html body[class*="lagom-layout"] .panel-check .panel-heading,
    html body[class*="lagom-layout"] .panel--billing .panel-heading {
        padding: 14px 16px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.14) !important;
    }
    html body[class*="lagom-layout"] .panel-check .panel-heading label {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        width: 100% !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .panel-check .check-content {
        flex: 1 !important;
    }
    html body[class*="lagom-layout"] .panel-check .check-content span {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    /* Body du panel */
    html body[class*="lagom-layout"] .panel-check .panel-body,
    html body[class*="lagom-layout"] .panel--billing .panel-body {
        padding: 18px 16px !important;
    }

    /* Row → block sur mobile (les col-sm-6 deviennent 100%) */
    html body[class*="lagom-layout"] .panel-check .row,
    html body[class*="lagom-layout"] .panel--billing .row,
    html body[class*="lagom-layout"] .row.row-sm {
        display: block !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .row.row-sm > [class*="col-"],
    html body[class*="lagom-layout"] .panel-check .col-sm-6,
    html body[class*="lagom-layout"] .panel--billing .col-sm-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Form-group : spacing propre */
    html body[class*="lagom-layout"] .form-group {
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    html body[class*="lagom-layout"] .form-group .control-label,
    html body[class*="lagom-layout"] .form-group > label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #c4e3ff !important;
        letter-spacing: 0.01em !important;
    }
    html body[class*="lagom-layout"] .form-group .control-label-info {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #8fadc9 !important;
        margin-left: 6px !important;
    }

    /* Inputs / selects : pleine largeur, beau navy */
    html body[class*="lagom-layout"] .form-control,
    html body[class*="lagom-layout"] input[type="text"],
    html body[class*="lagom-layout"] input[type="email"],
    html body[class*="lagom-layout"] input[type="password"],
    html body[class*="lagom-layout"] input[type="tel"],
    html body[class*="lagom-layout"] select.form-control {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* anti-zoom iOS */
        min-height: 48px !important;
        padding: 12px 14px !important;
        background: rgba(5, 13, 36, 0.65) !important;
        border: 1px solid rgba(98, 152, 254, 0.22) !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        transition: border-color 0.18s, box-shadow 0.18s !important;
    }
    html body[class*="lagom-layout"] .form-control:focus,
    html body[class*="lagom-layout"] input:focus,
    html body[class*="lagom-layout"] select:focus {
        border-color: rgba(98, 152, 254, 0.60) !important;
        box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.18) !important;
        outline: none !important;
    }

    /* Titres section h6 ("Informations personnelles", "Adresse de facturation", "Sécurité du compte") */
    html body[class*="lagom-layout"] .panel-body h6,
    html body[class*="lagom-layout"] .panel-body .h6 {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: #6298fe !important;
        margin: 22px 0 14px 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    html body[class*="lagom-layout"] .panel-body h6:first-child,
    html body[class*="lagom-layout"] .panel-body .h6:first-child {
        margin-top: 0 !important;
    }

    /* Bouton Google "Se connecter avec Google" */
    html body[class*="lagom-layout"] .social-login,
    html body[class*="lagom-layout"] .social-wide {
        margin: 0 0 16px 0 !important;
    }
    html body[class*="lagom-layout"] .social-description {
        font-size: 12px !important;
        color: #8fadc9 !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }
    html body[class*="lagom-layout"] .google-button-login,
    html body[class*="lagom-layout"] .social-signin-btns {
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .social-signin-btns > div,
    html body[class*="lagom-layout"] .google-button-login > div {
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .google-button-login iframe {
        width: 100% !important;
    }

    /* Login divider "ou" */
    html body[class*="lagom-layout"] .login-divider {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 16px 0 !important;
    }
    html body[class*="lagom-layout"] .login-divider span:nth-child(1),
    html body[class*="lagom-layout"] .login-divider span:nth-child(3) {
        flex: 1 !important;
        height: 1px !important;
        background: rgba(98, 152, 254, 0.18) !important;
    }
    html body[class*="lagom-layout"] .login-divider span:nth-child(2) {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        color: #8fadc9 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        font-weight: 700 !important;
    }

    /* Phone field avec drapeau pays */
    html body[class*="lagom-layout"] .intl-tel-input {
        width: 100% !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .intl-tel-input.allow-dropdown .flag-container {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }
    html body[class*="lagom-layout"] .intl-tel-input.allow-dropdown .selected-flag {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 10px 0 12px !important;
        background: rgba(15, 29, 63, 0.50) !important;
        border-right: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 10px 0 0 10px !important;
    }
    html body[class*="lagom-layout"] .intl-tel-input.separate-dial-code .selected-dial-code {
        color: #c4e3ff !important;
        font-size: 14px !important;
        margin-left: 6px !important;
    }
    html body[class*="lagom-layout"] .intl-tel-input.separate-dial-code input {
        padding-left: 90px !important;
    }

    /* Radio (Créer un compte / Connexion) : style propre */
    html body[class*="lagom-layout"] .radio-styled {
        flex-shrink: 0 !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(98, 152, 254, 0.40) !important;
        background: transparent !important;
        position: relative !important;
        transition: all 0.18s !important;
    }
    html body[class*="lagom-layout"] .radio-styled.checked,
    html body[class*="lagom-layout"] .radio-styled.hover.checked {
        border-color: #1966FF !important;
        background: #1966FF !important;
    }
    html body[class*="lagom-layout"] .radio-styled.checked::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 8px !important;
        height: 8px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
    }

    /* Password strength bar */
    html body[class*="lagom-layout"] .password-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 6px !important;
    }
    html body[class*="lagom-layout"] .password-content label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #c4e3ff !important;
    }
    html body[class*="lagom-layout"] .password-content-text {
        font-size: 11px !important;
        color: #8fadc9 !important;
        margin-left: auto !important;
    }
    html body[class*="lagom-layout"] .input-password-strenght form,
    html body[class*="lagom-layout"] .form-group form {
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .btn.generate-password {
        font-size: 11px !important;
        padding: 8px 12px !important;
        min-height: 36px !important;
        background: rgba(15, 29, 63, 0.50) !important;
        border: 1px solid rgba(98, 152, 254, 0.25) !important;
        color: #c4e3ff !important;
        border-radius: 8px !important;
        margin-top: 6px !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Checkbox "J'ai lu et j'accepte" */
    html body[class*="lagom-layout"] .checkbox.checkbox-custom {
        margin: 14px 0 !important;
        padding: 12px 14px !important;
        background: rgba(15, 29, 63, 0.45) !important;
        border-radius: 10px !important;
    }
    html body[class*="lagom-layout"] .checkbox.checkbox-custom label {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        cursor: pointer !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .checkbox-styled {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 5px !important;
        border: 2px solid rgba(98, 152, 254, 0.40) !important;
        background: transparent !important;
        margin-top: 1px !important;
        position: relative !important;
    }
    html body[class*="lagom-layout"] input[type="checkbox"]:checked + .checkbox-styled {
        border-color: #1966FF !important;
        background: #1966FF !important;
    }
    html body[class*="lagom-layout"] input[type="checkbox"]:checked + .checkbox-styled::after {
        content: '✓' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -55%) !important;
        color: white !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    html body[class*="lagom-layout"] .checkbox.checkbox-custom label > span {
        color: #c4e3ff !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    html body[class*="lagom-layout"] .checkbox.checkbox-custom label > span a {
        color: #6298fe !important;
        text-decoration: underline !important;
    }
}

/* =========================================================
   PCM — Fix radio inline + panel-check layout mobile
   ========================================================= */

@media (max-width: 991.98px) {
    /* Heading "Créer un compte" / "Connexion" : radio + titre en flex horizontal */
    html body[class*="lagom-layout"] .panel.panel-check > .panel-heading,
    html body[class*="lagom-layout"] .panel.panel-check > .panel-heading.check {
        padding: 14px 16px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.14) !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check > .panel-heading > label.hover,
    html body[class*="lagom-layout"] .panel.panel-check > .panel-heading.check > label {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        text-align: left !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check .radio-styled {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check .check-content {
        flex: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check .check-content span,
    html body[class*="lagom-layout"] .panel.panel-check .check-content > * {
        text-align: left !important;
        display: inline !important;
    }

    /* Body du panel : pleine largeur, padding propre */
    html body[class*="lagom-layout"] .panel.panel-check > .panel-collapse,
    html body[class*="lagom-layout"] .panel.panel-check > .panel-body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check .panel-collapse > .panel-body {
        padding: 18px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Force tous les contenus du form à text-align: left (pas centré) */
    html body[class*="lagom-layout"] .panel.panel-check .panel-body,
    html body[class*="lagom-layout"] .panel.panel-check .panel-body * {
        text-align: left !important;
    }
    /* Sauf les éléments qui doivent rester centrés */
    html body[class*="lagom-layout"] .panel.panel-check .social-description,
    html body[class*="lagom-layout"] .panel.panel-check .login-divider,
    html body[class*="lagom-layout"] .panel.panel-check .social-container {
        text-align: center !important;
    }
    html body[class*="lagom-layout"] .panel.panel-check .social-description,
    html body[class*="lagom-layout"] .panel.panel-check .social-description * {
        text-align: center !important;
    }

    /* Réinitialise les marges intérieures */
    html body[class*="lagom-layout"] .panel.panel-check .panel-body > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Layout flex Lagom : tue le grid sur mobile */
    html body[class*="lagom-layout"] .panel.panel-check[class*="panel--"] {
        display: block !important;
    }
}

/* =========================================================
   PCM — Mobile : Tabs domain + box recherche jolie
   ========================================================= */

@media (max-width: 991.98px) {
    /* Tabs "Enregistrer / Transférer / Utiliser un domaine existant" */
    html body[class*="lagom-layout"] .tab-nav--domain,
    html body[class*="lagom-layout"] .tab-nav--section {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain ul.nav-tabs,
    html body[class*="lagom-layout"] .tab-nav--section ul.nav-tabs {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item,
    html body[class*="lagom-layout"] .tab-nav--section .nav-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item .nav-link,
    html body[class*="lagom-layout"] .tab-nav--section .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 14px 18px !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 12px !important;
        color: #c4e3ff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.18s !important;
        min-height: 56px !important;
        box-sizing: border-box !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item.active .nav-link,
    html body[class*="lagom-layout"] .tab-nav--section .nav-item.active .nav-link {
        background: linear-gradient(135deg, rgba(25,102,255,0.22), rgba(0,154,255,0.10)) !important;
        border-color: rgba(98, 152, 254, 0.55) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 20px rgba(25, 102, 255, 0.18) !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link:hover,
    html body[class*="lagom-layout"] .tab-nav--section .nav-link:hover {
        border-color: rgba(98, 152, 254, 0.40) !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.70), rgba(10,22,49,0.75)) !important;
    }

    /* Cache le radio natif (visuellement, garde fonction) */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link > input[type="radio"],
    html body[class*="lagom-layout"] .tab-nav--section .nav-link > input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
    }

    /* Icône SVG injectée */
    html body[class*="lagom-layout"] .tab-nav--domain .pcm-icon-wrap,
    html body[class*="lagom-layout"] .tab-nav--section .pcm-icon-wrap {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        background: rgba(25, 102, 255, 0.18) !important;
        border: 1px solid rgba(98, 152, 254, 0.35) !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item.active .pcm-icon-wrap,
    html body[class*="lagom-layout"] .tab-nav--section .nav-item.active .pcm-icon-wrap {
        background: linear-gradient(135deg, #1966FF, #009AFF) !important;
        border-color: transparent !important;
    }

    /* Texte du tab */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link > span:not(.pcm-icon-wrap),
    html body[class*="lagom-layout"] .tab-nav--section .nav-link > span:not(.pcm-icon-wrap) {
        flex: 1 !important;
        color: inherit !important;
    }

    /* =====================================================
       Box recherche domaine "Trouvez un nom de domaine"
       ===================================================== */
    html body[class*="lagom-layout"] .box.box-search-domain,
    html body[class*="lagom-layout"] .search-box-primary {
        background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
        border: 1px solid rgba(98, 152, 254, 0.20) !important;
        border-radius: 16px !important;
        padding: 18px 16px !important;
        margin: 0 0 16px 0 !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .box-body {
        padding: 0 !important;
    }

    /* Search group : passe en colonne (champ + bouton empilés) */
    html body[class*="lagom-layout"] .box-search-domain .search-group,
    html body[class*="lagom-layout"] .box-search-domain .panel-choose-domain {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        background: transparent !important;
    }

    /* Champ de recherche */
    html body[class*="lagom-layout"] .box-search-domain .search-field {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-field-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #6298fe !important;
        font-size: 18px !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-field form {
        margin: 0 !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-field input,
    html body[class*="lagom-layout"] .box-search-domain #domainName {
        width: 100% !important;
        padding: 14px 14px 14px 42px !important;
        background: rgba(5, 13, 36, 0.70) !important;
        border: 1px solid rgba(98, 152, 254, 0.25) !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        min-height: 50px !important;
        box-sizing: border-box !important;
        transition: border-color 0.18s, box-shadow 0.18s !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-field input::placeholder,
    html body[class*="lagom-layout"] .box-search-domain #domainName::placeholder {
        color: #8fadc9 !important;
        font-weight: 400 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-field input:focus {
        border-color: rgba(98, 152, 254, 0.65) !important;
        box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.18) !important;
        outline: none !important;
    }

    /* Bouton "Chercher" */
    html body[class*="lagom-layout"] .box-search-domain .search-group-btn,
    html body[class*="lagom-layout"] .box-search-domain .search-group-btn button {
        width: 100% !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-group-btn .btn {
        width: 100% !important;
        background: linear-gradient(135deg, #1966FF, #009AFF) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 12px !important;
        padding: 14px 22px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        min-height: 50px !important;
        box-shadow: 0 8px 22px rgba(25, 102, 255, 0.32) !important;
        text-transform: none !important;
        letter-spacing: 0.01em !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .search-group-btn .btn:active {
        transform: scale(0.98) !important;
    }

    /* Spotlight TLDs (.com, .fr, .eu, etc.) en grille 3 colonnes */
    html body[class*="lagom-layout"] .box-search-domain .spotlight-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 14px 0 0 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        background: rgba(5, 13, 36, 0.50) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 10px !important;
        padding: 10px 6px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.18s !important;
        text-align: center !important;
        min-height: 56px !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight:hover {
        border-color: rgba(98, 152, 254, 0.50) !important;
        background: rgba(15, 29, 63, 0.70) !important;
        transform: translateY(-1px) !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-label {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #ffffff, #c4e3ff) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-value {
        font-size: 11px !important;
        color: #8fadc9 !important;
        font-weight: 500 !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-more {
        background: linear-gradient(135deg, rgba(25,102,255,0.18), rgba(0,154,255,0.10)) !important;
        border-color: rgba(98, 152, 254, 0.40) !important;
        color: #6298fe !important;
        font-weight: 700 !important;
        font-size: 12px !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-more:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, #1966FF, #009AFF) !important;
        border-color: transparent !important;
    }
}

@media (max-width: 380px) {
    /* TLDs en 2 colonnes sur très petit écran */
    html body[class*="lagom-layout"] .box-search-domain .spotlight-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================
   PCM — Fix tabs domain : visible + spotlight TLDs sans overflow
   ========================================================= */

@media (max-width: 991.98px) {
    /* Container tabs : box-sizing strict + overflow hidden */
    html body[class*="lagom-layout"] .tab-nav--domain,
    html body[class*="lagom-layout"] .tab-nav--section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Force visibilité du contenu des tabs */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link,
    html body[class*="lagom-layout"] .tab-nav--section .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 56px !important;
        position: relative !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link > span:not(.pcm-icon-wrap),
    html body[class*="lagom-layout"] .tab-nav--section .nav-link > span:not(.pcm-icon-wrap) {
        flex: 1 !important;
        color: #c4e3ff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        line-height: 1.3 !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item.active .nav-link > span:not(.pcm-icon-wrap),
    html body[class*="lagom-layout"] .tab-nav--section .nav-item.active .nav-link > span:not(.pcm-icon-wrap) {
        color: #ffffff !important;
    }

    /* Si Lagom cache les LIs non-actives, les forcer visibles */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item,
    html body[class*="lagom-layout"] .tab-nav--section .nav-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Box search domain : box-sizing strict pour pas overflow */
    html body[class*="lagom-layout"] .box.box-search-domain,
    html body[class*="lagom-layout"] .search-box-primary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Spotlight list : 2 colonnes max pour éviter overflow */
    html body[class*="lagom-layout"] .box-search-domain .spotlight-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 14px 0 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 8px !important;
        overflow: hidden !important;
    }

    /* "Tout afficher" / "Montrer moins" : prend toute la largeur en grille */
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col:has(.spotlight-more),
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col:last-child {
        grid-column: span 2 !important;
    }
}

/* Sur très petit (< 360px) : 1 colonne pour les TLDs */
@media (max-width: 360px) {
    html body[class*="lagom-layout"] .box-search-domain .spotlight-list {
        grid-template-columns: 1fr !important;
    }
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col:has(.spotlight-more),
    html body[class*="lagom-layout"] .box-search-domain .spotlight-col:last-child {
        grid-column: span 1 !important;
    }
}

/* =========================================================
   PCM — ANNULER mes règles tab-nav--section qui cassent
   les cartes de cycle de facturation (BI-ANNUEL etc.)
   On garde uniquement les règles sur .tab-nav--domain
   ========================================================= */

@media (max-width: 991.98px) {
    /* Reset complet pour .tab-nav--section SANS .tab-nav--domain */
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) ul.nav-tabs {
        flex-direction: row !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) .nav-item {
        display: block !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) .nav-item .nav-link {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) .nav-item.active .nav-link {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* Et masquer le pcm-icon-wrap injecté qui n'a rien à faire sur les cartes de prix */
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) .pcm-icon-wrap {
        display: none !important;
    }
    /* Les inputs radio restent visibles ici (les cartes de prix les utilisent) */
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) .nav-link > input[type="radio"] {
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }

    /* Margin claire entre la section de prix et "Configuration du domaine" */
    html body[class*="lagom-layout"] .tab-nav--section:not(.tab-nav--domain) {
        margin-bottom: 32px !important;
    }
}

/* =========================================================
   PCM — REVERT FINAL : tabs domaine comme pills inline simples
   Annule toutes mes règles cards empilées qui cassent le layout
   ========================================================= */

@media (max-width: 991.98px) {
    /* Le container : strict box, pas de styling card */
    html body[class*="lagom-layout"] .tab-nav.tab-nav--domain,
    html body[class*="lagom-layout"] .tab-nav--section.tab-nav--domain {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 0 18px 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* UL : flex row wrap, gap 6px */
    html body[class*="lagom-layout"] .tab-nav--domain ul.nav-tabs,
    html body[class*="lagom-layout"] .tab-nav--domain .nav.nav-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 0 14px 0 !important;
        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* LI : flex 1, AUTOWIDTH, PAS de card */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* nav-link : SEUL niveau qui porte le visuel (pill compacte) */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item .nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        background: rgba(15,29,63,0.55) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 10px !important;
        min-height: 44px !important;
        height: auto !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #c4e3ff !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item.active .nav-link {
        background: linear-gradient(135deg, rgba(25,102,255,0.28), rgba(0,154,255,0.14)) !important;
        border-color: rgba(98, 152, 254, 0.55) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(25,102,255,0.20) !important;
    }

    /* Icône : petite, 22px */
    html body[class*="lagom-layout"] .tab-nav--domain .pcm-icon-wrap {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .pcm-icon-wrap svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Cacher radio */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link > input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* Texte du tab : visible, ellipsis */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-link > span:not(.pcm-icon-wrap) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        color: inherit !important;
    }
}

/* Sous 500px : les tabs passent à 2 lignes (chacun pleine largeur) */
@media (max-width: 500px) {
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item {
        flex: 1 1 100% !important;
    }
}

/* =========================================================
   PCM — Espace clair entre tabs domaine et search box
   ========================================================= */

@media (max-width: 991.98px) {
    /* Marge sous le tab-nav et au-dessus du .box-search-domain */
    html body[class*="lagom-layout"] .tab-nav--domain {
        margin-bottom: 24px !important;
    }
    html body[class*="lagom-layout"] .box.box-search-domain {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain ul.nav-tabs,
    html body[class*="lagom-layout"] .tab-nav--domain .nav.nav-tabs {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   PCM — FIX FINAL : flow correct tabs + search box
   ========================================================= */

@media (max-width: 991.98px) {
    /* Container tabs : block, hauteur auto, clear+space sous */
    html body[class*="lagom-layout"] .tab-nav.tab-nav--domain,
    html body[class*="lagom-layout"] .tab-nav--section.tab-nav--domain {
        display: block !important;
        position: relative !important;
        clear: both !important;
        float: none !important;
        margin: 0 0 28px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* UL : block stack (PAS de flex row qui peut déborder) */
    html body[class*="lagom-layout"] .tab-nav--domain ul.nav-tabs,
    html body[class*="lagom-layout"] .tab-nav--domain .nav.nav-tabs {
        display: block !important;
        position: relative !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* LI : block 100% strict avec margin entre */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        float: none !important;
        clear: both !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item:last-child {
        margin-bottom: 0 !important;
    }

    /* nav-link : box-sizing border + width 100% strict */
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item .nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(15,29,63,0.55) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        height: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #c4e3ff !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    html body[class*="lagom-layout"] .tab-nav--domain .nav-item.active .nav-link {
        background: linear-gradient(135deg, #1966FF, #009AFF) !important;
        border-color: rgba(98, 152, 254, 0.55) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    /* Search box : FORCE clear + position relative top auto */
    html body[class*="lagom-layout"] .box.box-search-domain {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        clear: both !important;
        float: none !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   PCM — Ajouts disponibles : illustration ne doit pas
   recouvrir le titre du produit (mobile)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Cards d'addons : padding-top généreux pour laisser place à l'illu */
    html body[class*="lagom-layout"] .product-addons .product-addon,
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item,
    html body[class*="lagom-layout"] .addons-list > div,
    html body[class*="lagom-layout"] .panel-addon,
    html body[class*="lagom-layout"] [data-product-addons] > div,
    html body[class*="lagom-layout"] .row-addon,
    html body[class*="lagom-layout"] .order-summary-addon,
    html body[class*="lagom-layout"] .featured-addon-item,
    html body[class*="lagom-layout"] .product-card-addon,
    html body[class*="lagom-layout"] .panel--addon {
        position: relative !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        margin-bottom: 24px !important;
    }

    /* Illustration / image décorative : prend toute la largeur en haut, 160px de haut */
    html body[class*="lagom-layout"] .product-addons .product-addon img,
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item img,
    html body[class*="lagom-layout"] .addons-list img,
    html body[class*="lagom-layout"] [data-product-addons] img,
    html body[class*="lagom-layout"] .row-addon img,
    html body[class*="lagom-layout"] .panel-addon img,
    html body[class*="lagom-layout"] .featured-addon-item img,
    html body[class*="lagom-layout"] .panel--addon img,
    html body[class*="lagom-layout"] .product-card-addon img,
    html body[class*="lagom-layout"] .addon-illustration,
    html body[class*="lagom-layout"] .addon-image,
    html body[class*="lagom-layout"] .upgrade-illustration,
    html body[class*="lagom-layout"] .upgrade-image {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 140px !important;
        max-height: 140px !important;
        object-fit: contain !important;
        object-position: center !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 0 16px 0 !important;
        padding: 12px !important;
        background: rgba(8,19,46,0.40) !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.12) !important;
    }

    /* Contenu (titre + description + bouton) : padding latéral */
    html body[class*="lagom-layout"] .product-addons .product-addon > *:not(img):not(.addon-illustration):not(.addon-image),
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item > *:not(img),
    html body[class*="lagom-layout"] .panel-addon .panel-body,
    html body[class*="lagom-layout"] .panel--addon .panel-body,
    html body[class*="lagom-layout"] .featured-addon-item > *:not(img),
    html body[class*="lagom-layout"] .product-card-addon > *:not(img) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Dernier élément (button) : padding-bottom propre */
    html body[class*="lagom-layout"] .product-addons .product-addon > *:last-child:not(img),
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item > *:last-child:not(img),
    html body[class*="lagom-layout"] .featured-addon-item > *:last-child:not(img),
    html body[class*="lagom-layout"] .product-card-addon > *:last-child:not(img) {
        padding-bottom: 18px !important;
        margin-bottom: 0 !important;
    }

    /* Titre du addon : marge top claire entre image et titre */
    html body[class*="lagom-layout"] .product-addons h3,
    html body[class*="lagom-layout"] .product-addons h4,
    html body[class*="lagom-layout"] .upgrade-list h3,
    html body[class*="lagom-layout"] .upgrade-list h4,
    html body[class*="lagom-layout"] .panel-addon h3,
    html body[class*="lagom-layout"] .panel-addon h4,
    html body[class*="lagom-layout"] .featured-addon-item h3,
    html body[class*="lagom-layout"] .featured-addon-item h4,
    html body[class*="lagom-layout"] .product-card-addon h3,
    html body[class*="lagom-layout"] .product-card-addon h4 {
        position: relative !important;
        z-index: 2 !important;
        margin: 0 0 12px 0 !important;
        padding: 8px 0 0 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: transparent !important;
    }

    /* Description : espacement clair */
    html body[class*="lagom-layout"] .product-addons p,
    html body[class*="lagom-layout"] .upgrade-list p,
    html body[class*="lagom-layout"] .panel-addon p,
    html body[class*="lagom-layout"] .featured-addon-item p,
    html body[class*="lagom-layout"] .product-card-addon p {
        margin: 0 0 16px 0 !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   PCM — Ajouts disponibles : polish v2 (mobile + desktop)
   ========================================================= */

/* Cards globalement plus belles */
html body[class*="lagom-layout"] .product-addons,
html body[class*="lagom-layout"] [data-product-addons] {
    display: grid !important;
    gap: 18px !important;
}

/* Card addon : design unifié et plus moderne */
html body[class*="lagom-layout"] .product-addons .product-addon,
html body[class*="lagom-layout"] .upgrade-list .upgrade-item,
html body[class*="lagom-layout"] .addons-list > div,
html body[class*="lagom-layout"] .panel-addon,
html body[class*="lagom-layout"] [data-product-addons] > div,
html body[class*="lagom-layout"] .row-addon,
html body[class*="lagom-layout"] .featured-addon-item,
html body[class*="lagom-layout"] .product-card-addon,
html body[class*="lagom-layout"] .panel--addon {
    background: linear-gradient(180deg, rgba(15,29,63,0.65), rgba(10,22,49,0.75)) !important;
    border: 1px solid rgba(98, 152, 254, 0.18) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(5, 13, 36, 0.35) !important;
}
html body[class*="lagom-layout"] .product-addons .product-addon:hover,
html body[class*="lagom-layout"] .upgrade-list .upgrade-item:hover,
html body[class*="lagom-layout"] .featured-addon-item:hover,
html body[class*="lagom-layout"] .product-card-addon:hover,
html body[class*="lagom-layout"] .panel-addon:hover {
    border-color: rgba(98, 152, 254, 0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(25, 102, 255, 0.18) !important;
}

/* Card SÉLECTIONNÉE (a un badge ✓ ou bouton GRATUIT actif) */
html body[class*="lagom-layout"] .product-addon.selected,
html body[class*="lagom-layout"] .product-addon.is-selected,
html body[class*="lagom-layout"] .upgrade-item.selected,
html body[class*="lagom-layout"] .featured-addon-item.selected,
html body[class*="lagom-layout"] .product-card-addon.selected {
    border-color: #1966FF !important;
    box-shadow: 0 8px 24px rgba(25, 102, 255, 0.30), inset 0 0 0 1px rgba(25, 102, 255, 0.40) !important;
}

/* Zone illustration : plus compacte (115px) + gradient subtil */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .product-addons .product-addon img,
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item img,
    html body[class*="lagom-layout"] .addons-list img,
    html body[class*="lagom-layout"] [data-product-addons] img,
    html body[class*="lagom-layout"] .row-addon img,
    html body[class*="lagom-layout"] .panel-addon img,
    html body[class*="lagom-layout"] .featured-addon-item img,
    html body[class*="lagom-layout"] .panel--addon img,
    html body[class*="lagom-layout"] .product-card-addon img,
    html body[class*="lagom-layout"] .addon-illustration,
    html body[class*="lagom-layout"] .addon-image,
    html body[class*="lagom-layout"] .upgrade-illustration,
    html body[class*="lagom-layout"] .upgrade-image {
        height: 115px !important;
        max-height: 115px !important;
        padding: 14px !important;
        background: linear-gradient(180deg,
            rgba(25, 102, 255, 0.10) 0%,
            rgba(8, 19, 46, 0.50) 100%) !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.15) !important;
        margin: 0 0 18px 0 !important;
        object-fit: contain !important;
    }
}

/* Titre : taille hiérarchique + couleur claire */
html body[class*="lagom-layout"] .product-addons h3,
html body[class*="lagom-layout"] .product-addons h4,
html body[class*="lagom-layout"] .upgrade-list h3,
html body[class*="lagom-layout"] .upgrade-list h4,
html body[class*="lagom-layout"] .panel-addon h3,
html body[class*="lagom-layout"] .panel-addon h4,
html body[class*="lagom-layout"] .featured-addon-item h3,
html body[class*="lagom-layout"] .featured-addon-item h4,
html body[class*="lagom-layout"] .product-card-addon h3,
html body[class*="lagom-layout"] .product-card-addon h4 {
    margin: 0 0 8px 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

/* Description : couleur typographique douce */
html body[class*="lagom-layout"] .product-addons p,
html body[class*="lagom-layout"] .upgrade-list p,
html body[class*="lagom-layout"] .panel-addon p,
html body[class*="lagom-layout"] .featured-addon-item p,
html body[class*="lagom-layout"] .product-card-addon p,
html body[class*="lagom-layout"] .product-addons .addon-description,
html body[class*="lagom-layout"] .product-addons .description {
    margin: 0 0 18px 0 !important;
    color: #8fadc9 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Bouton split (label + dropdown) : pleine largeur, gradient PCM, hauteur 48px */
html body[class*="lagom-layout"] .product-addons .btn,
html body[class*="lagom-layout"] .upgrade-list .btn,
html body[class*="lagom-layout"] .panel-addon .btn,
html body[class*="lagom-layout"] .featured-addon-item .btn,
html body[class*="lagom-layout"] .product-card-addon .btn,
html body[class*="lagom-layout"] .product-addons button,
html body[class*="lagom-layout"] .upgrade-list button {
    border-radius: 10px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

/* Bouton primaire (GRATUIT! / Sélectionné) : gradient bleu plein */
html body[class*="lagom-layout"] .product-addons .btn-primary,
html body[class*="lagom-layout"] .upgrade-list .btn-primary,
html body[class*="lagom-layout"] .featured-addon-item .btn-primary,
html body[class*="lagom-layout"] .product-card-addon .btn-primary,
html body[class*="lagom-layout"] .product-addons .btn.active,
html body[class*="lagom-layout"] .product-addons .btn-success {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(25, 102, 255, 0.30) !important;
    letter-spacing: 0.05em !important;
}
html body[class*="lagom-layout"] .product-addons .btn-primary:hover,
html body[class*="lagom-layout"] .featured-addon-item .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(25, 102, 255, 0.45) !important;
}

/* Bouton secondaire (Choisir une option) : navy + bordure */
html body[class*="lagom-layout"] .product-addons .btn-default,
html body[class*="lagom-layout"] .upgrade-list .btn-default,
html body[class*="lagom-layout"] .featured-addon-item .btn-default,
html body[class*="lagom-layout"] .product-card-addon .btn-default,
html body[class*="lagom-layout"] .product-addons .btn-outline {
    background: rgba(15,29,63,0.65) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    color: #ffffff !important;
}
html body[class*="lagom-layout"] .product-addons .btn-default:hover,
html body[class*="lagom-layout"] .featured-addon-item .btn-default:hover {
    background: rgba(25, 102, 255, 0.18) !important;
    border-color: rgba(98, 152, 254, 0.55) !important;
}

/* Bouton X (déselectionner) : split avec bordure gauche subtile */
html body[class*="lagom-layout"] .product-addons .btn-group .btn:last-child,
html body[class*="lagom-layout"] .featured-addon-item .btn-group .btn:last-child {
    border-left: 1px solid rgba(255,255,255,0.20) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Pastille ✓ en haut à droite : bleu PCM */
html body[class*="lagom-layout"] .product-addons .badge-check,
html body[class*="lagom-layout"] .featured-addon-item .badge-check,
html body[class*="lagom-layout"] .product-card-addon .badge-check {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
    box-shadow: 0 4px 12px rgba(25, 102, 255, 0.45) !important;
    border: 2px solid #050d24 !important;
}

/* Padding intérieur contenu textuel : 18px lateral, 0 top (l'illu gère), 18px bottom */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .product-addons .product-addon > *:not(img):not(.addon-illustration):not(.addon-image),
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item > *:not(img),
    html body[class*="lagom-layout"] .featured-addon-item > *:not(img),
    html body[class*="lagom-layout"] .product-card-addon > *:not(img) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    html body[class*="lagom-layout"] .product-addons .product-addon > *:last-child:not(img),
    html body[class*="lagom-layout"] .upgrade-list .upgrade-item > *:last-child:not(img),
    html body[class*="lagom-layout"] .featured-addon-item > *:last-child:not(img),
    html body[class*="lagom-layout"] .product-card-addon > *:last-child:not(img) {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   PCM — Ajouts : FORCER image + titre + texte EN STACK
   (titre n'overlap PLUS l'illustration)
   ========================================================= */

/* Détection ultra-large : tout container qui contient une image + h3/h4 visiblement liés aux addons */
html body[class*="lagom-layout"] [class*="addon"],
html body[class*="lagom-layout"] [class*="upgrade"],
html body[class*="lagom-layout"] [class*="product-card"],
html body[class*="lagom-layout"] [data-addon],
html body[class*="lagom-layout"] [class*="featured-addon"] {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Le HEADER de la card (souvent un wrapper avec image + titre superposés) : casser l'absolute */
html body[class*="lagom-layout"] [class*="addon"] > div,
html body[class*="lagom-layout"] [class*="addon"] > header,
html body[class*="lagom-layout"] [class*="addon"] > section,
html body[class*="lagom-layout"] [class*="addon"] .card-header,
html body[class*="lagom-layout"] [class*="addon"] .panel-heading,
html body[class*="lagom-layout"] [class*="addon"] .addon-header,
html body[class*="lagom-layout"] [class*="addon"] .addon-cover,
html body[class*="lagom-layout"] [class*="addon"] .product-header,
html body[class*="lagom-layout"] [class*="addon"] [class*="header"],
html body[class*="lagom-layout"] [class*="featured"] > div,
html body[class*="lagom-layout"] [class*="featured"] [class*="header"],
html body[class*="lagom-layout"] [class*="product-card"] > div,
html body[class*="lagom-layout"] [class*="product-card"] [class*="header"] {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* IMAGE : block, dans le flow, hauteur fixe — JAMAIS absolute */
html body[class*="lagom-layout"] [class*="addon"] img,
html body[class*="lagom-layout"] [class*="upgrade"] img,
html body[class*="lagom-layout"] [class*="featured"] img,
html body[class*="lagom-layout"] [class*="product-card"] img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 130px !important;
    max-height: 130px !important;
    margin: 0 !important;
    padding: 20px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: linear-gradient(180deg,
        rgba(25, 102, 255, 0.10) 0%,
        rgba(8, 19, 46, 0.55) 100%) !important;
    border-bottom: 1px solid rgba(98, 152, 254, 0.15) !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1 !important;
    order: 1 !important;
}

/* TITRE : forcé en flow normal, APRÈS l'image, padding latéral */
html body[class*="lagom-layout"] [class*="addon"] h1,
html body[class*="lagom-layout"] [class*="addon"] h2,
html body[class*="lagom-layout"] [class*="addon"] h3,
html body[class*="lagom-layout"] [class*="addon"] h4,
html body[class*="lagom-layout"] [class*="addon"] h5,
html body[class*="lagom-layout"] [class*="addon"] .addon-title,
html body[class*="lagom-layout"] [class*="addon"] .product-title,
html body[class*="lagom-layout"] [class*="upgrade"] h3,
html body[class*="lagom-layout"] [class*="upgrade"] h4,
html body[class*="lagom-layout"] [class*="featured"] h3,
html body[class*="lagom-layout"] [class*="featured"] h4,
html body[class*="lagom-layout"] [class*="product-card"] h3,
html body[class*="lagom-layout"] [class*="product-card"] h4 {
    position: static !important;
    display: block !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 18px 20px 8px 20px !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-shadow: none !important;
    z-index: 2 !important;
    order: 2 !important;
}

/* PARAGRAPHE description : padding latéral */
html body[class*="lagom-layout"] [class*="addon"] p,
html body[class*="lagom-layout"] [class*="upgrade"] p,
html body[class*="lagom-layout"] [class*="featured"] p,
html body[class*="lagom-layout"] [class*="product-card"] p {
    margin: 0 20px 16px 20px !important;
    padding: 0 !important;
    color: #8fadc9 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    order: 3 !important;
}

/* Zone bouton : padding latéral + bottom */
html body[class*="lagom-layout"] [class*="addon"] .btn-group,
html body[class*="lagom-layout"] [class*="addon"] .btn,
html body[class*="lagom-layout"] [class*="addon"] .actions,
html body[class*="lagom-layout"] [class*="addon"] [class*="footer"],
html body[class*="lagom-layout"] [class*="featured"] .btn-group,
html body[class*="lagom-layout"] [class*="featured"] [class*="footer"],
html body[class*="lagom-layout"] [class*="product-card"] .btn-group,
html body[class*="lagom-layout"] [class*="product-card"] [class*="footer"] {
    margin: 0 20px 20px 20px !important;
    order: 4 !important;
}

/* Cacher tout label/badge "Domain extension" ou similaire qui pourrait s'incruster */
html body[class*="lagom-layout"] [class*="addon"] [class*="ribbon"],
html body[class*="lagom-layout"] [class*="addon"] [class*="overlay"] {
    display: none !important;
}

/* Le ✓ ou X badge en haut à droite : peut RESTER en position absolute */
html body[class*="lagom-layout"] [class*="addon"] .badge,
html body[class*="lagom-layout"] [class*="addon"] [class*="check"]:not(p):not(h3):not(h4) {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    order: 0 !important;
}

/* =========================================================
   PCM — Cards addons : image PLUS GRANDE + bouton EN BAS
   ========================================================= */

@media (max-width: 991.98px) {
    /* Image PLUS GRANDE (180px) avec padding interne réduit pour montrer tout */
    html body[class*="lagom-layout"] [class*="addon"] img,
    html body[class*="lagom-layout"] [class*="upgrade"] img,
    html body[class*="lagom-layout"] [class*="featured"] img,
    html body[class*="lagom-layout"] [class*="product-card"] img {
        height: 180px !important;
        max-height: 180px !important;
        padding: 16px !important;
        object-fit: contain !important;
    }
}

/* TITRE : order 2 (sous image) */
html body[class*="lagom-layout"] [class*="addon"] h1,
html body[class*="lagom-layout"] [class*="addon"] h2,
html body[class*="lagom-layout"] [class*="addon"] h3,
html body[class*="lagom-layout"] [class*="addon"] h4,
html body[class*="lagom-layout"] [class*="addon"] h5,
html body[class*="lagom-layout"] [class*="upgrade"] h3,
html body[class*="lagom-layout"] [class*="upgrade"] h4,
html body[class*="lagom-layout"] [class*="featured"] h3,
html body[class*="lagom-layout"] [class*="featured"] h4,
html body[class*="lagom-layout"] [class*="product-card"] h3,
html body[class*="lagom-layout"] [class*="product-card"] h4 {
    order: 2 !important;
}

/* DESCRIPTION : order 3, JAMAIS coupée (max-height auto + overflow visible) */
html body[class*="lagom-layout"] [class*="addon"] p,
html body[class*="lagom-layout"] [class*="upgrade"] p,
html body[class*="lagom-layout"] [class*="featured"] p,
html body[class*="lagom-layout"] [class*="product-card"] p {
    order: 3 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    text-overflow: clip !important;
}

/* BOUTONS : order 99 = TOUJOURS EN BAS de la card */
html body[class*="lagom-layout"] [class*="addon"] .btn-group,
html body[class*="lagom-layout"] [class*="addon"] .btn,
html body[class*="lagom-layout"] [class*="addon"] [class*="footer"],
html body[class*="lagom-layout"] [class*="addon"] [class*="action"],
html body[class*="lagom-layout"] [class*="upgrade"] .btn-group,
html body[class*="lagom-layout"] [class*="upgrade"] .btn,
html body[class*="lagom-layout"] [class*="featured"] .btn-group,
html body[class*="lagom-layout"] [class*="featured"] .btn,
html body[class*="lagom-layout"] [class*="featured"] [class*="footer"],
html body[class*="lagom-layout"] [class*="product-card"] .btn-group,
html body[class*="lagom-layout"] [class*="product-card"] .btn,
html body[class*="lagom-layout"] [class*="product-card"] [class*="footer"] {
    order: 99 !important;
    margin-top: auto !important;
}

/* Pastille ✓ (badge sélection) en position absolue top-right, JAMAIS dans le flow */
html body[class*="lagom-layout"] [class*="addon"] .badge-check,
html body[class*="lagom-layout"] [class*="addon"] .check-badge,
html body[class*="lagom-layout"] [class*="addon"] [class*="selected-icon"],
html body[class*="lagom-layout"] [class*="featured"] .badge-check,
html body[class*="lagom-layout"] [class*="product-card"] .badge-check {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    order: 0 !important;
}

/* Cacher tout radio/checkbox NATIF dans les cards addons (sale rendu) */
html body[class*="lagom-layout"] [class*="addon"] input[type="radio"],
html body[class*="lagom-layout"] [class*="addon"] input[type="checkbox"],
html body[class*="lagom-layout"] [class*="featured"] input[type="radio"],
html body[class*="lagom-layout"] [class*="featured"] input[type="checkbox"],
html body[class*="lagom-layout"] [class*="product-card"] input[type="radio"],
html body[class*="lagom-layout"] [class*="product-card"] input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    left: -9999px !important;
}

/* =========================================================
   PCM — Détails facturation : radios alignés INLINE proprement
   ========================================================= */

/* Container radio : flex inline, gap visible */
html body[class*="lagom-layout"] .billing-details label.radio,
html body[class*="lagom-layout"] .checkout-form label.radio,
html body[class*="lagom-layout"] [class*="billing"] label.radio,
html body[class*="lagom-layout"] [class*="billing"] .form-check,
html body[class*="lagom-layout"] [class*="checkout"] .form-check,
html body[class*="lagom-layout"] .panel-billing label.radio,
html body[class*="lagom-layout"] .panel-billing .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Le faux radio (input visuel) : 18px circle blue PCM si checked */
html body[class*="lagom-layout"] [class*="billing"] input[type="radio"],
html body[class*="lagom-layout"] [class*="checkout"] input[type="radio"],
html body[class*="lagom-layout"] .panel-billing input[type="radio"] {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid rgba(98, 152, 254, 0.40) !important;
    border-radius: 50% !important;
    background: rgba(15, 29, 63, 0.65) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    left: auto !important;
    top: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}
html body[class*="lagom-layout"] [class*="billing"] input[type="radio"]:checked,
html body[class*="lagom-layout"] [class*="checkout"] input[type="radio"]:checked,
html body[class*="lagom-layout"] .panel-billing input[type="radio"]:checked {
    background: radial-gradient(circle, #1966FF 0%, #1966FF 40%, transparent 50%) !important;
    border-color: #1966FF !important;
    box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.15) !important;
}

/* "Pierre Leuthner" / "Créer un compte" : titre inline avec radio */
html body[class*="lagom-layout"] [class*="billing"] label.radio strong,
html body[class*="lagom-layout"] [class*="billing"] .form-check label,
html body[class*="lagom-layout"] [class*="checkout"] .form-check label,
html body[class*="lagom-layout"] .panel-billing label.radio strong {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    vertical-align: middle !important;
}

/* =========================================================
   PCM — LAGOM ORDER FORM : Cards addons (vrais sélecteurs)
   Structure : .panel-addon > .panel-body + .panel-icon + .panel-options + .check-sign
   ========================================================= */

@media (max-width: 991.98px) {
    /* Container : flex column, order explicite */
    html body.app-main-order .panel.panel-addon,
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body[class*="lagom-layout"] .panel.panel--addonBox {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.65), rgba(10,22,49,0.75)) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 18px !important;
        padding: 0 !important;
        box-shadow: 0 4px 16px rgba(5, 13, 36, 0.35) !important;
        position: relative !important;
    }

    /* IMAGE en 1er (order 1) — pleine largeur, hauteur 180px */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-icon,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-icon {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 180px !important;
        max-height: 180px !important;
        margin: 0 !important;
        padding: 16px !important;
        background: linear-gradient(180deg,
            rgba(25, 102, 255, 0.10) 0%,
            rgba(8, 19, 46, 0.55) 100%) !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.15) !important;
        border-radius: 0 !important;
        position: relative !important;
        flex: 0 0 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-icon img,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-icon img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    /* TITRE + DESCRIPTION en 2ème (order 2) */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-body,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-body {
        order: 2 !important;
        display: block !important;
        flex: 0 0 auto !important;
        padding: 18px 20px 0 20px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-title,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-title {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1.3 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-desc,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-desc {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #8fadc9 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }

    /* OPTIONS / BOUTON en 3ème (order 3 — au bas) */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-options,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-options,
    html body[class*="lagom-layout"] .panel.panel-addon .panel-actions,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-actions {
        order: 3 !important;
        padding: 18px 20px 20px 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-options .panel-actions {
        padding: 0 !important;
    }

    /* Radio input natif : caché */
    html body[class*="lagom-layout"] .panel.panel-addon input[type="radio"],
    html body[class*="lagom-layout"] .panel.panel--addonBox input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        pointer-events: none !important;
        left: -9999px !important;
    }

    /* .radio-styled : cercle visuel à côté du label */
    html body[class*="lagom-layout"] .panel.panel-addon .radio-styled,
    html body[class*="lagom-layout"] .panel.panel--addonBox .radio-styled {
        position: relative !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        border: 2px solid rgba(98, 152, 254, 0.40) !important;
        border-radius: 50% !important;
        background: rgba(15, 29, 63, 0.65) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
        transition: all 0.2s ease !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .radio-styled.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox .radio-styled.checked,
    html body[class*="lagom-layout"] .panel.panel-addon input[type="radio"]:checked ~ .radio-styled,
    html body[class*="lagom-layout"] .panel.panel--addonBox input[type="radio"]:checked + .radio-styled {
        background: radial-gradient(circle, #1966FF 0%, #1966FF 40%, rgba(15, 29, 63, 0.65) 50%) !important;
        border-color: #1966FF !important;
        box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.15) !important;
    }

    /* .check-sign (✓ quand sélectionné) : badge top-right en absolute */
    html body[class*="lagom-layout"] .panel.panel-addon .check-sign,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check-sign {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 5 !important;
        width: 32px !important;
        height: 32px !important;
        background: linear-gradient(135deg, #1966FF, #009AFF) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 14px !important;
        box-shadow: 0 4px 12px rgba(25, 102, 255, 0.45) !important;
        border: 2px solid #050d24 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .check-sign i,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check-sign i {
        color: #ffffff !important;
        font-size: 14px !important;
    }

    /* Card sélectionnée : bordure et glow bleu PCM */
    html body[class*="lagom-layout"] .panel.panel-addon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked {
        border-color: #1966FF !important;
        box-shadow: 0 8px 24px rgba(25, 102, 255, 0.30) !important;
    }

    /* Label radio (.radio-label) : flex inline avec gap, padding interne */
    html body[class*="lagom-layout"] .panel.panel-addon .radio-label,
    html body[class*="lagom-layout"] .panel.panel--addonBox .radio-label,
    html body[class*="lagom-layout"] .panel.panel-addon label,
    html body[class*="lagom-layout"] .panel.panel--addonBox label {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        background: rgba(15, 29, 63, 0.65) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .radio-label:hover,
    html body[class*="lagom-layout"] .panel.panel--addonBox .radio-label:hover {
        border-color: rgba(98, 152, 254, 0.45) !important;
    }

    /* check-content (titre + sous-titre) à droite du radio */
    html body[class*="lagom-layout"] .panel.panel-addon .check-content,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check-content {
        flex: 1 !important;
        min-width: 0 !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .check-title,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        display: block !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .check-subtitle,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check-subtitle {
        font-size: 12px !important;
        color: #8fadc9 !important;
        margin: 2px 0 0 0 !important;
    }

    /* Espace entre les check (options multiples) */
    html body[class*="lagom-layout"] .panel.panel-addon .check.check-custom,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check.check-custom {
        margin-bottom: 8px !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .check.check-custom:last-child,
    html body[class*="lagom-layout"] .panel.panel--addonBox .check.check-custom:last-child {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   PCM — RESTORE DESKTOP : annule mes règles mobiles globales
   pour le panel-addon (qui s'étaient échappées du @media)
   ========================================================= */

@media (min-width: 992px) {
    /* Container : revert flex-row (Lagom natif) */
    html body[class*="lagom-layout"] [class*="addon"]:not(.section--addons),
    html body[class*="lagom-layout"] [class*="upgrade"],
    html body[class*="lagom-layout"] [class*="product-card"],
    html body[class*="lagom-layout"] [data-addon],
    html body[class*="lagom-layout"] [class*="featured-addon"] {
        display: flex !important;
        flex-direction: row !important;
    }

    /* Image : revert taille libre, pas de gradient bg desktop */
    html body[class*="lagom-layout"] [class*="addon"] img,
    html body[class*="lagom-layout"] [class*="upgrade"] img,
    html body[class*="lagom-layout"] [class*="featured"] img,
    html body[class*="lagom-layout"] [class*="product-card"] img,
    html body[class*="lagom-layout"] .panel-addon .panel-icon img,
    html body[class*="lagom-layout"] .panel--addonBox .panel-icon img {
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        border-bottom: 0 !important;
        order: unset !important;
        margin: 0 !important;
        position: relative !important;
        object-fit: initial !important;
    }

    /* panel-icon : revert taille Lagom natif (250px à droite) */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-icon,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-icon {
        order: unset !important;
        flex: unset !important;
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-left: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border-bottom: 0 !important;
        border-radius: 0 6px 6px 0 !important;
        display: block !important;
    }

    /* panel-body : revert flex 1, padding lagom */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-body,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-body {
        order: unset !important;
        flex: 1 !important;
        padding: var(--panel-body-padding, 24px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* panel-options : revert padding lagom */
    html body[class*="lagom-layout"] .panel.panel-addon .panel-options,
    html body[class*="lagom-layout"] .panel.panel--addonBox .panel-options {
        order: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* h1-h5 : revert margin/padding/order */
    html body[class*="lagom-layout"] [class*="addon"] h1,
    html body[class*="lagom-layout"] [class*="addon"] h2,
    html body[class*="lagom-layout"] [class*="addon"] h3,
    html body[class*="lagom-layout"] [class*="addon"] h4,
    html body[class*="lagom-layout"] [class*="addon"] h5,
    html body[class*="lagom-layout"] [class*="addon"] .panel-title,
    html body[class*="lagom-layout"] [class*="upgrade"] h3,
    html body[class*="lagom-layout"] [class*="upgrade"] h4,
    html body[class*="lagom-layout"] [class*="featured"] h3,
    html body[class*="lagom-layout"] [class*="featured"] h4,
    html body[class*="lagom-layout"] [class*="product-card"] h3,
    html body[class*="lagom-layout"] [class*="product-card"] h4 {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        order: unset !important;
    }

    /* p : revert margin */
    html body[class*="lagom-layout"] [class*="addon"] p,
    html body[class*="lagom-layout"] [class*="upgrade"] p,
    html body[class*="lagom-layout"] [class*="featured"] p,
    html body[class*="lagom-layout"] [class*="product-card"] p,
    html body[class*="lagom-layout"] .panel-addon .panel-desc,
    html body[class*="lagom-layout"] .panel--addonBox .panel-desc {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        order: unset !important;
    }

    /* Boutons : revert */
    html body[class*="lagom-layout"] [class*="addon"] .btn-group,
    html body[class*="lagom-layout"] [class*="addon"] .btn,
    html body[class*="lagom-layout"] [class*="featured"] .btn-group,
    html body[class*="lagom-layout"] [class*="product-card"] .btn-group {
        margin: 0 !important;
        order: unset !important;
    }

    /* row--addons : restore col system Bootstrap */
    html body[class*="lagom-layout"] .row--addons {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }
    html body[class*="lagom-layout"] .row--addons > [class*="col-"] {
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   PCM — Card addon SÉLECTIONNÉE : pas de décalage visuel
   ========================================================= */

@media (min-width: 992px) {
    /* Annuler le pseudo ::before Lagom qui crée un outline -1px */
    html body[class*="lagom-layout"] .panel.panel-addon.checked::before,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked::before,
    html body[class*="lagom-layout"] .panel.panel-addon::before,
    html body[class*="lagom-layout"] .panel.panel--addonBox::before {
        display: none !important;
        content: none !important;
    }

    /* Card non-cochée et cochée : MÊMES border/padding/margin pour zéro décalage */
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body[class*="lagom-layout"] .panel.panel--addonBox,
    html body[class*="lagom-layout"] .panel.panel-addon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked {
        border-width: 1px !important;
        border-style: solid !important;
        padding: 0 !important;
        margin: 0 0 14px 0 !important;
        outline: 0 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    /* Non-cochée : bordure subtle */
    html body[class*="lagom-layout"] .panel.panel-addon:not(.checked),
    html body[class*="lagom-layout"] .panel.panel--addonBox:not(.checked) {
        border-color: rgba(98, 152, 254, 0.18) !important;
    }

    /* Cochée : bordure bleu PCM SANS changer padding/margin/box-sizing */
    html body[class*="lagom-layout"] .panel.panel-addon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked {
        border-color: #1966FF !important;
        box-shadow: 0 0 0 1px #1966FF, 0 8px 24px rgba(25, 102, 255, 0.25) !important;
    }

    /* row--addons : container avec margin/padding cohérent */
    html body[class*="lagom-layout"] .row--addons {
        align-items: stretch !important;
    }
    html body[class*="lagom-layout"] .row--addons > [class*="col-"] {
        display: flex !important;
        align-items: stretch !important;
    }
    html body[class*="lagom-layout"] .row--addons > [class*="col-"] > .panel.panel-addon,
    html body[class*="lagom-layout"] .row--addons > [class*="col-"] > .panel.panel--addonBox {
        width: 100% !important;
        flex: 1 !important;
    }
}

/* =========================================================
   PCM — Card addon : ZÉRO décalage entre checked/unchecked
   Suppression totale des effets qui modifient la zone visible
   ========================================================= */

@media (min-width: 992px) {
    /* TOUTES les cards (cochées ou non) : DIMENSIONS STRICTEMENT IDENTIQUES */
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body[class*="lagom-layout"] .panel.panel--addonBox,
    html body[class*="lagom-layout"] .panel.panel-addon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked,
    html body[class*="lagom-layout"] .panel.panel-addon.has-icon,
    html body[class*="lagom-layout"] .panel.panel--addonBox.has-icon,
    html body[class*="lagom-layout"] .panel.panel-addon.has-icon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.has-icon.checked {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        border-width: 1px !important;
        border-style: solid !important;
        outline: 0 !important;
        outline-offset: 0 !important;
        transform: none !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        overflow: hidden !important;
    }

    /* Non-cochée : bordure subtile */
    html body[class*="lagom-layout"] .panel.panel-addon:not(.checked),
    html body[class*="lagom-layout"] .panel.panel--addonBox:not(.checked),
    html body[class*="lagom-layout"] .panel.panel-addon.has-icon:not(.checked),
    html body[class*="lagom-layout"] .panel.panel--addonBox.has-icon:not(.checked) {
        border-color: rgba(98, 152, 254, 0.18) !important;
        box-shadow: 0 4px 16px rgba(5, 13, 36, 0.35) !important;
    }

    /* Cochée : SEULE différence = couleur bordure + glow MÊME OFFSET (pas d'inset/outline) */
    html body[class*="lagom-layout"] .panel.panel-addon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked,
    html body[class*="lagom-layout"] .panel.panel-addon.has-icon.checked,
    html body[class*="lagom-layout"] .panel.panel--addonBox.has-icon.checked {
        border-color: #1966FF !important;
        /* glow SOFT seulement, pas d'outline 0 0 0 Xpx qui élargit la card */
        box-shadow: 0 4px 16px rgba(5, 13, 36, 0.35), 0 0 0 0 transparent !important;
    }

    /* Tuer DÉFINITIVEMENT le pseudo ::before Lagom qui crée un -1px outline */
    html body[class*="lagom-layout"] .panel.panel-addon::before,
    html body[class*="lagom-layout"] .panel.panel--addonBox::before,
    html body[class*="lagom-layout"] .panel.panel-addon.checked::before,
    html body[class*="lagom-layout"] .panel.panel--addonBox.checked::before,
    html body[class*="lagom-layout"] .panel.panel-addon.has-icon.checked::before,
    html body[class*="lagom-layout"] .panel.panel--addonBox.has-icon.checked::before {
        content: none !important;
        display: none !important;
        position: static !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        box-shadow: none !important;
        background: none !important;
        border: 0 !important;
    }
}

/* =========================================================
   PCM — Tabs paiement + cartes bancaires : design premium
   ========================================================= */

/* --- TABS "Utiliser la carte existante / nouvelle carte" --- */
html body[class*="lagom-layout"] .nav.nav-tabs.nav-payment {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-item .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    background: rgba(15, 29, 63, 0.55) !important;
    border: 1px solid rgba(98, 152, 254, 0.20) !important;
    border-radius: 10px !important;
    color: #c4e3ff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-height: 44px !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-item .nav-link:hover {
    border-color: rgba(98, 152, 254, 0.45) !important;
    color: #ffffff !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-item.active .nav-link,
html body[class*="lagom-layout"] .nav-payment .nav-item .nav-link.active {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border-color: rgba(98, 152, 254, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(25, 102, 255, 0.30) !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-link > input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* --- LISTE de cartes : grid 2 colonnes desktop, 1 colonne mobile --- */
html body[class*="lagom-layout"] .cc-input-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-top: 16px !important;
}
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .cc-input-container {
        grid-template-columns: 1fr !important;
    }
}
html body[class*="lagom-layout"] .cc-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- LA CARTE : design type CB physique --- */
html body[class*="lagom-layout"] .cc-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
        "brand    logo"
        "chip     contactless"
        "info     status" !important;
    width: 100% !important;
    aspect-ratio: 1.586 / 1 !important;
    min-height: 200px !important;
    padding: 22px 24px !important;
    border-radius: 16px !important;
    border: 2px solid rgba(98, 152, 254, 0.18) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    background: linear-gradient(135deg, #0a1631 0%, #1966FF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(5, 13, 36, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    margin: 0 !important;
}
html body[class*="lagom-layout"] .cc-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px rgba(5, 13, 36, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Effet brillant en haut (shine) */
html body[class*="lagom-layout"] .cc-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: radial-gradient(ellipse at top right,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 60%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Patterns décoratifs en bas (cercles) */
html body[class*="lagom-layout"] .cc-item::after {
    content: "" !important;
    position: absolute !important;
    bottom: -60px !important;
    left: -40px !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* CHIP (puce dorée simulée) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
    grid-area: chip !important;
    align-self: center !important;
    justify-self: start !important;
    position: relative !important;
    width: 44px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #d4af37 0%, #f5d76e 50%, #c89a2c 100%) !important;
    border-radius: 6px !important;
    margin: 0 0 0 0 !important;
    z-index: 3 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15),
                0 2px 4px rgba(0,0,0,0.3) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: rgba(0,0,0,0.25) !important;
    transform: translateY(-50%) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 1px !important;
    background: rgba(0,0,0,0.25) !important;
    transform: translateX(-50%) !important;
}

/* Le radio natif + .radio-styled : tout petit en haut-gauche (sélection) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox input[type="radio"] {
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox .radio-styled {
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 4 !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .cc-item.active .cc-item-checkbox .radio-styled,
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #ffffff 0%, #ffffff 40%, transparent 50%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.20) !important;
}

/* NOM de la carte (MASTERCARD-4334) → brand label + numéro masqué */
html body[class*="lagom-layout"] .cc-item .cc-item-name {
    grid-area: brand !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    color: rgba(255, 255, 255, 0.70) !important;
    text-transform: uppercase !important;
    z-index: 3 !important;
    align-self: start !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-name span {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* Nom du titulaire (PCM AGENCY) + Expiration : zone info en bas-gauche */
html body[class*="lagom-layout"] .cc-item .cc-item-desc {
    grid-area: info !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    z-index: 3 !important;
    align-self: end !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
    grid-area: info !important;
    align-self: end !important;
    justify-self: end !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase !important;
    z-index: 3 !important;
    margin-bottom: 16px !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-expiry::before {
    content: "VALID THRU " !important;
    display: block !important;
    font-size: 8px !important;
    opacity: 0.7 !important;
    letter-spacing: 0.20em !important;
    margin-bottom: 2px !important;
}

/* Status badge "ACTIF" : pastille subtile en haut */
html body[class*="lagom-layout"] .cc-item .cc-item-status {
    grid-area: status !important;
    align-self: end !important;
    justify-self: end !important;
    z-index: 3 !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 9px !important;
    border-radius: 100px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status-active {
    color: #5af09a !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status-active::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background: #5af09a !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #5af09a !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status-expired {
    color: #ff7a7a !important;
}

/* LOGO de la carte (SVG MasterCard / Visa / Amex) en haut-droite */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    grid-area: logo !important;
    align-self: start !important;
    justify-self: end !important;
    z-index: 3 !important;
    background: rgba(255,255,255,0.10) !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-icon svg,
html body[class*="lagom-layout"] .cc-item .cc-item-icon img {
    width: 38px !important;
    height: 24px !important;
    display: block !important;
}

/* --- BRAND COLORS appliquées via classes injectées par JS --- */
html body[class*="lagom-layout"] .cc-item.cc-item--mastercard {
    background: linear-gradient(135deg, #1a1a1a 0%, #cf4500 60%, #f79e1b 100%) !important;
    border-color: rgba(247, 158, 27, 0.35) !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--visa {
    background: linear-gradient(135deg, #0a0e3a 0%, #1a1f71 50%, #3b4cae 100%) !important;
    border-color: rgba(59, 76, 174, 0.45) !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--amex {
    background: linear-gradient(135deg, #006fcf 0%, #00a3e0 100%) !important;
    border-color: rgba(0, 163, 224, 0.45) !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--discover {
    background: linear-gradient(135deg, #f76b1c 0%, #fad961 100%) !important;
    border-color: rgba(247, 107, 28, 0.45) !important;
}

/* État ACTIVE : bordure dorée + glow */
html body[class*="lagom-layout"] .cc-item.active {
    border-color: rgba(255, 255, 255, 0.50) !important;
    box-shadow: 0 8px 24px rgba(25, 102, 255, 0.35),
                0 0 0 3px rgba(255, 255, 255, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* État DISABLED (carte expirée) */
html body[class*="lagom-layout"] .cc-item.disabled {
    opacity: 0.50 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.6) !important;
}

/* =========================================================
   PCM — CB v2 : design réaliste avec numéro, chip, logo brand
   ========================================================= */

/* RESET et override mes anciennes règles grid (qui causaient le wrap) */
html body[class*="lagom-layout"] .cc-item {
    display: block !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    position: relative !important;
    aspect-ratio: 1.586 / 1 !important;
    min-height: 200px !important;
    max-width: 420px !important;
    padding: 22px 26px !important;
    border-radius: 16px !important;
    border: 2px solid rgba(98, 152, 254, 0.18) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 12px 32px rgba(5, 13, 36, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

/* Brand-specific MasterCard authentic gradient (rouge → orange) */
html body[class*="lagom-layout"] .cc-item.cc-item--mastercard {
    background: linear-gradient(135deg, #2c0a0a 0%, #b8252a 35%, #eb001b 65%, #f79e1b 100%) !important;
    border-color: rgba(247, 158, 27, 0.40) !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--visa {
    background: linear-gradient(135deg, #0a0e3a 0%, #1a1f71 50%, #3b4cae 100%) !important;
    border-color: rgba(59, 76, 174, 0.50) !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--amex {
    background: linear-gradient(135deg, #006fcf 0%, #00a3e0 100%) !important;
    border-color: rgba(0, 163, 224, 0.50) !important;
}

/* CHIP doré ultra-réaliste : 50×40 avec 8 segments */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
    position: absolute !important;
    top: 60px !important;
    left: 26px !important;
    width: 48px !important;
    height: 38px !important;
    background: linear-gradient(135deg, #c89a2c 0%, #f5d76e 40%, #d4af37 70%, #a88420 100%) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20),
                inset 0 1px 1px rgba(255,255,255,0.40),
                0 2px 4px rgba(0,0,0,0.40) !important;
    z-index: 3 !important;
    margin: 0 !important;
}
/* Pattern de la puce : croix + ligne médiane */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 6px !important;
    background:
        linear-gradient(to right, transparent 31%, rgba(0,0,0,0.20) 32%, rgba(0,0,0,0.20) 34%, transparent 35%, transparent 64%, rgba(0,0,0,0.20) 65%, rgba(0,0,0,0.20) 67%, transparent 68%),
        linear-gradient(to bottom, transparent 48%, rgba(0,0,0,0.25) 49%, rgba(0,0,0,0.25) 51%, transparent 52%) !important;
    pointer-events: none !important;
}

/* Radio sélection : pastille top-LEFT au-dessus de la chip */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox input[type="radio"] {
    position: absolute !important;
    top: -36px !important;
    left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox .radio-styled {
    position: absolute !important;
    top: -36px !important;
    left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.50) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 4 !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .cc-item.active .cc-item-checkbox .radio-styled {
    background: radial-gradient(circle, #ffffff 30%, transparent 50%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}

/* Brand label en HAUT GAUCHE (uppercase, tracked, full-width = pas de wrap) */
html body[class*="lagom-layout"] .cc-item .cc-item-name {
    position: absolute !important;
    top: 22px !important;
    left: 26px !important;
    right: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase !important;
    z-index: 3 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body[class*="lagom-layout"] .cc-item .pcm-cc-brand {
    color: rgba(255, 255, 255, 0.90) !important;
    font-weight: 700 !important;
}

/* NUMÉRO de carte (•••• •••• •••• 4334) au CENTRE */
html body[class*="lagom-layout"] .cc-item .pcm-cc-number {
    position: absolute !important;
    bottom: 78px !important;
    left: 26px !important;
    right: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    font-family: "OCR A Std", "Courier New", monospace !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
    z-index: 3 !important;
}
html body[class*="lagom-layout"] .cc-item .pcm-cc-number > span {
    line-height: 1 !important;
    display: inline-block !important;
}
html body[class*="lagom-layout"] .cc-item .pcm-cc-last4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* HOLDER (PCM AGENCY) en BAS-GAUCHE */
html body[class*="lagom-layout"] .cc-item .cc-item-desc {
    position: absolute !important;
    bottom: 22px !important;
    left: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
    z-index: 3 !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-desc::before {
    content: "TITULAIRE" !important;
    display: block !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    opacity: 0.65 !important;
    margin-bottom: 3px !important;
}

/* EXPIRATION en BAS-CENTRE */
html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
    position: absolute !important;
    bottom: 22px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
html body[class*="lagom-layout"] .cc-item .pcm-cc-thru {
    display: block !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    opacity: 0.65 !important;
    margin-bottom: 3px !important;
}
html body[class*="lagom-layout"] .cc-item .pcm-cc-date {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-expiry::before {
    content: none !important;
    display: none !important;
}

/* STATUS "ACTIF" : pastille TOP-RIGHT au-dessus du logo */
html body[class*="lagom-layout"] .cc-item .cc-item-status {
    position: absolute !important;
    top: 22px !important;
    right: 26px !important;
    z-index: 4 !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    border-radius: 100px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    background: rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status-active {
    color: #5af09a !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-status .status-active::before {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    background: #5af09a !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #5af09a !important;
}

/* LOGO MasterCard / Visa : BAS DROITE plus GROS et visible */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    position: absolute !important;
    bottom: 22px !important;
    right: 26px !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-icon svg {
    width: 60px !important;
    height: 38px !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30)) !important;
}

/* Pattern décoratif (lignes ondulées style hologramme) */
html body[class*="lagom-layout"] .cc-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60% !important;
    height: 60% !important;
    background:
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 8px,
            rgba(255, 255, 255, 0.03) 8px,
            rgba(255, 255, 255, 0.03) 9px
        ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
html body[class*="lagom-layout"] .cc-item::after {
    content: "" !important;
    position: absolute !important;
    bottom: -80px !important;
    left: -60px !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ACTIVE state */
html body[class*="lagom-layout"] .cc-item.active {
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 16px 40px rgba(25, 102, 255, 0.40),
                0 0 0 3px rgba(255, 255, 255, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    transform: translateY(-2px) !important;
}
html body[class*="lagom-layout"] .cc-item:hover:not(.active) {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 44px rgba(5, 13, 36, 0.65),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Container 2 colonnes desktop, full width mobile */
html body[class*="lagom-layout"] .cc-input-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
    margin-top: 18px !important;
    max-width: 900px !important;
}
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .cc-input-container {
        grid-template-columns: 1fr !important;
    }
    html body[class*="lagom-layout"] .cc-item {
        max-width: 100% !important;
    }
}

/* =========================================================
   PCM — Paiement v3 : pas de ligne bleue sous tabs +
   PayPal/gateway cards plus design
   ========================================================= */

/* --- 1) Annule la ligne bleue sous .nav-tabs (Bootstrap border-bottom) --- */
html body[class*="lagom-layout"] .nav.nav-tabs.nav-payment,
html body[class*="lagom-layout"] .nav-payment {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html body[class*="lagom-layout"] .nav.nav-tabs.nav-payment .nav-link {
    border-bottom: 0 !important;
}
html body[class*="lagom-layout"] .nav.nav-tabs.nav-payment .nav-link::after,
html body[class*="lagom-layout"] .nav.nav-tabs.nav-payment .nav-item.active .nav-link::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

/* --- 2) Logo dans la carte : plus grand + fond blanc bordure-radius --- */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    background: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-icon svg {
    width: 56px !important;
    height: 36px !important;
    filter: none !important;
}

/* MasterCard : laisser les cercles colorés visibles sur fond blanc */
html body[class*="lagom-layout"] .cc-item.cc-item--mastercard .cc-item-icon {
    background: #ffffff !important;
}
/* Visa : le SVG VISA est blanc → il faut un fond bleu Visa pour qu'il soit visible */
html body[class*="lagom-layout"] .cc-item.cc-item--visa .cc-item-icon {
    background: #1A1F71 !important;
}
/* Amex : déjà inclut son propre rectangle bleu, donc juste padding 0 */
html body[class*="lagom-layout"] .cc-item.cc-item--amex .cc-item-icon {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
html body[class*="lagom-layout"] .cc-item.cc-item--amex .cc-item-icon svg {
    width: 56px !important;
    height: 36px !important;
}

/* --- 3) PayPal / Stripe etc. : card paiement design --- */
html body[class*="lagom-layout"] .panel-group #payment-gateway-component,
html body[class*="lagom-layout"] #payment-gateway-component {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments {
    position: relative !important;
    background: linear-gradient(180deg, rgba(15,29,63,0.65), rgba(10,22,49,0.75)) !important;
    border: 1px solid rgba(98, 152, 254, 0.20) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(5, 13, 36, 0.30) !important;
}
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments:hover {
    border-color: rgba(98, 152, 254, 0.45) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(25, 102, 255, 0.18) !important;
}
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments.checked,
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments.active {
    border-color: #1966FF !important;
    background: linear-gradient(180deg, rgba(25,102,255,0.15), rgba(10,22,49,0.75)) !important;
    box-shadow: 0 8px 24px rgba(25, 102, 255, 0.25) !important;
}

/* Heading interne */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .panel-heading label {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Radio + radio-styled */
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
    margin: 0 !important;
    left: 22px !important;
}
html body[class*="lagom-layout"] .panel-check--payments .radio-styled {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 2px solid rgba(98, 152, 254, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(15, 29, 63, 0.65) !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments.checked .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments.active .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #1966FF 0%, #1966FF 42%, transparent 50%) !important;
    border-color: #1966FF !important;
    box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.18) !important;
}

/* Contenu (nom du gateway) */
html body[class*="lagom-layout"] .panel-check--payments .check-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-content > span:first-child,
html body[class*="lagom-layout"] .panel-check--payments .check-content > span[v-html] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .pcg-label {
    font-size: 12px !important;
    color: #8fadc9 !important;
    margin: 0 !important;
}

/* Icon (logo de la gateway) : plus gros et clean */
html body[class*="lagom-layout"] .panel-check--payments .check-icon {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    min-height: 40px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-icon img {
    max-width: 60px !important;
    max-height: 28px !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Quand le gateway est PayPal, hover effect blue/teal subtle */
html body[class*="lagom-layout"] .panel-check--payments:hover .check-icon {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Body collapse (le formulaire CB) : padding propre */
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse.in {
    padding: 0 22px 22px 22px !important;
    background: rgba(8, 19, 46, 0.40) !important;
    border-top: 1px solid rgba(98, 152, 254, 0.12) !important;
}
html body[class*="lagom-layout"] .panel-check--payments .panel-body {
    padding: 22px 0 0 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Annule la ligne bleue sous le tab actif (Bootstrap nav-tabs) */
html body[class*="lagom-layout"] .panel-check--payments .nav-tabs,
html body[class*="lagom-layout"] .panel-check--payments .nav-payment {
    border-bottom: 0 !important;
    background: transparent !important;
}
html body[class*="lagom-layout"] .panel-check--payments .nav-tabs::after,
html body[class*="lagom-layout"] .panel-check--payments .nav-payment::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   PCM — Paiement v4 : REVERT layout natif Lagom
   On ne touche QUE bordure/fond/couleurs, jamais flex/position
   ========================================================= */

/* RESET total de mes anciennes règles cassées */
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments {
    position: relative !important;
    background: linear-gradient(180deg, rgba(15,29,63,0.65), rgba(10,22,49,0.75)) !important;
    border: 1px solid rgba(98, 152, 254, 0.20) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 0 0 12px 0 !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    /* RESET : on laisse Lagom gérer padding, flex, height */
    padding: revert !important;
    display: revert !important;
    flex-direction: revert !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: 0 4px 16px rgba(5, 13, 36, 0.30) !important;
}
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments:hover {
    border-color: rgba(98, 152, 254, 0.45) !important;
}
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments.checked,
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments.active {
    border-color: #1966FF !important;
    box-shadow: 0 8px 24px rgba(25, 102, 255, 0.22) !important;
}

/* Heading : RESET — on laisse Lagom gérer */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading {
    background: transparent !important;
    border: 0 !important;
    padding: revert !important;
    margin: revert !important;
    display: revert !important;
    flex-direction: revert !important;
    align-items: revert !important;
    height: auto !important;
    min-height: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .panel-heading label {
    /* RESET total — laisse Lagom gérer le flex */
    display: revert !important;
    flex-direction: revert !important;
    align-items: revert !important;
    gap: revert !important;
    padding: revert !important;
    margin: revert !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: pointer !important;
}

/* Radio input : RESET position absolute */
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"] {
    position: revert !important;
    opacity: 0 !important;
    left: revert !important;
    top: revert !important;
    width: revert !important;
    height: revert !important;
    pointer-events: revert !important;
    margin: revert !important;
}

/* Radio-styled : RESET position */
html body[class*="lagom-layout"] .panel-check--payments .radio-styled {
    position: revert !important;
    width: revert !important;
    height: revert !important;
    min-width: revert !important;
    flex-shrink: revert !important;
    margin: revert !important;
    /* SEULES propriétés visuelles conservées */
    border: 2px solid rgba(98, 152, 254, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(15, 29, 63, 0.65) !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .panel-check--payments.checked .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments.active .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked + .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #1966FF 0%, #1966FF 42%, transparent 50%) !important;
    border-color: #1966FF !important;
    box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.18) !important;
}

/* Check-content : RESET flex column */
html body[class*="lagom-layout"] .panel-check--payments .check-content {
    flex: revert !important;
    display: revert !important;
    flex-direction: revert !important;
    align-items: revert !important;
    gap: revert !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-content > span:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Check-icon : RESET dimensions */
html body[class*="lagom-layout"] .panel-check--payments .check-icon {
    margin-left: revert !important;
    flex-shrink: revert !important;
    background: #ffffff !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-icon img {
    max-width: 80px !important;
    max-height: 22px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Panel collapse (le formulaire CB) : conserve un fond subtil */
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse {
    background: transparent !important;
    border-top: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse.in {
    border-top: 1px solid rgba(98, 152, 254, 0.12) !important;
}
html body[class*="lagom-layout"] .panel-check--payments .panel-body {
    background: transparent !important;
    border: 0 !important;
}

/* =========================================================
   PCM — FIX BLUE OVALS : radio-styled dimensions explicites
   ========================================================= */

html body[class*="lagom-layout"] .panel-check--payments .radio-styled,
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments label .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments .check-custom .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments .panel-heading .radio-styled {
    position: relative !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(98, 152, 254, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(15, 29, 63, 0.65) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
html body[class*="lagom-layout"] .panel-check--payments.checked .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments.active .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked + .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #1966FF 0%, #1966FF 42%, transparent 50%) !important;
    border-color: #1966FF !important;
    box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.18) !important;
}

/* Et tuer toute pseudo-element parasite sur le panel-heading */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading::before,
html body[class*="lagom-layout"] .panel-check--payments .panel-heading::after,
html body[class*="lagom-layout"] .panel-check--payments::before,
html body[class*="lagom-layout"] .panel-check--payments::after,
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse::before,
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* =========================================================
   PCM — Paiement v5 : layout flex row EXPLICITE (pas revert)
   ========================================================= */

/* Panel : box-sizing strict */
html body[class*="lagom-layout"] .panel.panel-check.panel-check--payments {
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Panel heading : container du label */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
}

/* LABEL : flex row horizontal — radio | titre | logo */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading label,
html body[class*="lagom-layout"] .panel-check--payments > label,
html body[class*="lagom-layout"] .panel-check--payments .check-custom > label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Input radio natif : caché mais positionné dans le label */
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    left: 0 !important;
}

/* Radio-styled : SEUL cercle visible, dimensions strictes */
html body[class*="lagom-layout"] .panel-check--payments .radio-styled {
    display: inline-block !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(98, 152, 254, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(15, 29, 63, 0.65) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .panel-check--payments.checked .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments.active .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked + .radio-styled,
html body[class*="lagom-layout"] .panel-check--payments input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #1966FF 0%, #1966FF 42%, transparent 50%) !important;
    border-color: #1966FF !important;
    box-shadow: 0 0 0 4px rgba(25, 102, 255, 0.18) !important;
}

/* Check-content : titre + sous-label, prend toute la largeur dispo */
html body[class*="lagom-layout"] .panel-check--payments .check-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-content > span:first-child,
html body[class*="lagom-layout"] .panel-check--payments .check-content > span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Check-icon : logo à DROITE, taille fixe compacte */
html body[class*="lagom-layout"] .panel-check--payments .check-icon {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background: #ffffff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-icon img {
    max-width: 90px !important;
    max-height: 22px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* =========================================================
   PCM — Paiement v6 : texte à gauche, chip CB supprimée, PayPal blanc
   ========================================================= */

/* 1) TEXTE "Carte bancaire" / "PayPal" À GAUCHE (next to radio) */
html body[class*="lagom-layout"] .panel-check--payments .panel-heading label,
html body[class*="lagom-layout"] .panel-check--payments > label,
html body[class*="lagom-layout"] .panel-check--payments .check-custom > label {
    justify-content: flex-start !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-content {
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-right: auto !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-content > span:first-child,
html body[class*="lagom-layout"] .panel-check--payments .check-content > span {
    text-align: left !important;
    margin: 0 !important;
}

/* 2) SUPPRIME LA CHIP doré sur les cartes bancaires (.cc-item-checkbox) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
/* La pseudo-cross qu'on avait sur la chip */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::before,
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Remplacer par un radio classique en HAUT GAUCHE de la carte */
html body[class*="lagom-layout"] .cc-item {
    padding-top: 22px !important;
}
html body[class*="lagom-layout"] .cc-item input[type="radio"] {
    position: absolute !important;
    top: 22px !important;
    left: 22px !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
    display: block !important;
}

/* Déplacer la zone radio-styled au TOP-LEFT de la carte */
html body[class*="lagom-layout"] .cc-item .radio-styled {
    position: absolute !important;
    top: 22px !important;
    left: 22px !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.50) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 4 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    display: block !important;
}
html body[class*="lagom-layout"] .cc-item.active .radio-styled,
html body[class*="lagom-layout"] .cc-item input[type="radio"]:checked ~ .radio-styled,
html body[class*="lagom-layout"] .cc-item input[type="radio"]:checked + .radio-styled {
    background: radial-gradient(circle, #ffffff 30%, transparent 50%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}

/* Décaler le brand label pour laisser place au radio (top-left) */
html body[class*="lagom-layout"] .cc-item .cc-item-name {
    top: 24px !important;
    left: 60px !important;
}

/* 3) LOGO PAYPAL BLANC : fond transparent, plus de cadre blanc */
html body[class*="lagom-layout"] .panel-check--payments .check-icon.pcm-paypal-logo {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-icon.pcm-paypal-logo svg {
    width: 90px !important;
    height: 24px !important;
    display: block !important;
    fill: #ffffff !important;
}
html body[class*="lagom-layout"] .panel-check--payments .check-icon.pcm-paypal-logo svg path,
html body[class*="lagom-layout"] .panel-check--payments .check-icon.pcm-paypal-logo svg g {
    fill: #ffffff !important;
}

/* =========================================================
   PCM — Cartes bancaires : TOUJOURS gradient navy
   Annule les gradients brand-specific (rouge MasterCard etc.)
   ========================================================= */

html body[class*="lagom-layout"] .cc-item,
html body[class*="lagom-layout"] .cc-item.cc-item--mastercard,
html body[class*="lagom-layout"] .cc-item.cc-item--visa,
html body[class*="lagom-layout"] .cc-item.cc-item--amex,
html body[class*="lagom-layout"] .cc-item.cc-item--discover,
html body[class*="lagom-layout"] .cc-item.cc-item--generic {
    background: linear-gradient(135deg, #0a1631 0%, #08132e 50%, #1966FF 130%) !important;
    border-color: rgba(98, 152, 254, 0.18) !important;
}

/* Active : bordure blanche + glow bleu PCM */
html body[class*="lagom-layout"] .cc-item.active,
html body[class*="lagom-layout"] .cc-item.cc-item--mastercard.active,
html body[class*="lagom-layout"] .cc-item.cc-item--visa.active,
html body[class*="lagom-layout"] .cc-item.cc-item--amex.active {
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 12px 32px rgba(25, 102, 255, 0.35),
                0 0 0 3px rgba(255, 255, 255, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* =========================================================
   PCM — Cards CB v3 : chip restaurée, expiration CSS-only,
   preview live nouvelle carte
   ========================================================= */

/* 1) CHIP RESTAURÉE (annule le display:none) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 60px !important;
    left: 26px !important;
    width: 48px !important;
    height: 38px !important;
    background: linear-gradient(135deg, #c89a2c 0%, #f5d76e 40%, #d4af37 70%, #a88420 100%) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20),
                inset 0 1px 1px rgba(255,255,255,0.40),
                0 2px 4px rgba(0,0,0,0.40) !important;
    z-index: 3 !important;
    margin: 0 !important;
    border: 0 !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 6px !important;
    display: block !important;
    background:
        linear-gradient(to right, transparent 31%, rgba(0,0,0,0.20) 32%, rgba(0,0,0,0.20) 34%, transparent 35%, transparent 64%, rgba(0,0,0,0.20) 65%, rgba(0,0,0,0.20) 67%, transparent 68%),
        linear-gradient(to bottom, transparent 48%, rgba(0,0,0,0.25) 49%, rgba(0,0,0,0.25) 51%, transparent 52%) !important;
    pointer-events: none !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::after {
    display: none !important;
    content: none !important;
}

/* Le radio devient bouton SÉPARÉ en haut-droite */
html body[class*="lagom-layout"] .cc-item input[type="radio"] {
    position: absolute !important;
    top: 22px !important;
    right: 100px !important;
    left: auto !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    cursor: pointer !important;
}
html body[class*="lagom-layout"] .cc-item .radio-styled {
    position: absolute !important;
    top: 22px !important;
    right: 100px !important;
    left: auto !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.30) !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
}
html body[class*="lagom-layout"] .cc-item.active .radio-styled,
html body[class*="lagom-layout"] .cc-item input[type="radio"]:checked + .radio-styled,
html body[class*="lagom-layout"] .cc-item input[type="radio"]:checked ~ .radio-styled {
    background: radial-gradient(circle, #ffffff 30%, transparent 50%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}

/* Remettre brand name top-left (la puce est dessous) */
html body[class*="lagom-layout"] .cc-item .cc-item-name {
    top: 22px !important;
    left: 26px !important;
    right: 220px !important;
}

/* 2) EXPIRATION : fix CSS-only (cache texte "Expiration :", re-style le span) */
html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
    position: absolute !important;
    bottom: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
    /* Cache le texte static "Expiration :" via font-size 0 */
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    white-space: nowrap !important;
}
/* Préfix "VALID THRU" via pseudo-element */
html body[class*="lagom-layout"] .cc-item .cc-item-expiry::before {
    content: "VALID THRU" !important;
    display: block !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    color: rgba(255,255,255,0.65) !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
}
/* Le span avec la date : re-shown avec font-size */
html body[class*="lagom-layout"] .cc-item .cc-item-expiry span,
html body[class*="lagom-layout"] .cc-item .cc-item-expiry .pcm-cc-date {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.30) !important;
}
/* Cache mon ancien .pcm-cc-thru (remplacé par le ::before) */
html body[class*="lagom-layout"] .cc-item .cc-item-expiry .pcm-cc-thru {
    display: none !important;
}

/* 3) PREVIEW LIVE pour "Utiliser une nouvelle carte" */
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[v-if],
html body[class*="lagom-layout"] .panel-check--payments .panel-body {
    position: relative !important;
}

/* La preview card côté droit */
html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
    position: sticky !important;
    top: 20px !important;
    margin: 0 auto !important;
    perspective: 1200px !important;
    width: 100% !important;
    max-width: 380px !important;
}
html body[class*="lagom-layout"] .pcm-cc-preview {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1.586 / 1 !important;
    transform-style: preserve-3d !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 auto !important;
}
html body[class*="lagom-layout"] .pcm-cc-preview.flipped {
    transform: rotateY(180deg) !important;
}
html body[class*="lagom-layout"] .pcm-cc-preview-front,
html body[class*="lagom-layout"] .pcm-cc-preview-back {
    position: absolute !important;
    inset: 0 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 22px 26px !important;
    box-shadow: 0 12px 32px rgba(5, 13, 36, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, #0a1631 0%, #08132e 50%, #1966FF 130%) !important;
    color: #ffffff !important;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}
html body[class*="lagom-layout"] .pcm-cc-preview-back {
    transform: rotateY(180deg) !important;
}

/* PREVIEW FRONT contenu */
.pcm-cc-preview-front .pcm-pv-brand {
    position: absolute;
    top: 22px; left: 26px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.pcm-cc-preview-front .pcm-pv-chip {
    position: absolute;
    top: 60px; left: 26px;
    width: 48px; height: 38px;
    background: linear-gradient(135deg, #c89a2c 0%, #f5d76e 40%, #d4af37 70%, #a88420 100%);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 1px 1px rgba(255,255,255,0.40), 0 2px 4px rgba(0,0,0,0.40);
}
.pcm-cc-preview-front .pcm-pv-chip::before {
    content: ""; position: absolute;
    top: 6px; left: 4px; right: 4px; bottom: 6px;
    background:
        linear-gradient(to right, transparent 31%, rgba(0,0,0,0.20) 32%, rgba(0,0,0,0.20) 34%, transparent 35%, transparent 64%, rgba(0,0,0,0.20) 65%, rgba(0,0,0,0.20) 67%, transparent 68%),
        linear-gradient(to bottom, transparent 48%, rgba(0,0,0,0.25) 49%, rgba(0,0,0,0.25) 51%, transparent 52%);
}
.pcm-cc-preview-front .pcm-pv-number {
    position: absolute;
    bottom: 78px; left: 26px; right: 26px;
    font-family: "OCR A Std", "Courier New", monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.30);
    display: flex;
    gap: 16px;
}
.pcm-cc-preview-front .pcm-pv-holder {
    position: absolute;
    bottom: 22px; left: 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    text-transform: uppercase;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcm-cc-preview-front .pcm-pv-holder::before {
    content: "TITULAIRE";
    display: block;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.20em;
    opacity: 0.65;
    margin-bottom: 3px;
}
.pcm-cc-preview-front .pcm-pv-expiry {
    position: absolute;
    bottom: 22px; right: 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-align: right;
}
.pcm-cc-preview-front .pcm-pv-expiry::before {
    content: "VALID THRU";
    display: block;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.20em;
    opacity: 0.65;
    margin-bottom: 3px;
}

/* PREVIEW BACK : bande magnétique + CVC */
.pcm-cc-preview-back .pcm-pv-stripe {
    position: absolute;
    top: 24px; left: 0; right: 0;
    height: 46px;
    background: #000000;
}
.pcm-cc-preview-back .pcm-pv-cvc-row {
    position: absolute;
    top: 96px; right: 26px; left: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pcm-cc-preview-back .pcm-pv-cvc-strip {
    flex: 1;
    height: 32px;
    background: linear-gradient(to right, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 80%, rgba(255,255,255,0.65) 100%);
    border-radius: 3px;
}
.pcm-cc-preview-back .pcm-pv-cvc {
    width: 90px;
    text-align: center;
    color: #1a1a1a;
    font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: 700;
    padding: 8px;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    letter-spacing: 0.15em;
}
.pcm-cc-preview-back .pcm-pv-cvc-label {
    position: absolute;
    bottom: 24px; right: 26px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.20em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

/* Layout : form à gauche, preview à droite */
@media (min-width: 992px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) {
        display: grid !important;
        grid-template-columns: 1fr 380px !important;
        gap: 32px !important;
        align-items: start !important;
    }
}
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        margin: 0 auto 20px auto !important;
        max-width: 320px !important;
    }
}

/* =========================================================
   PCM — CB v4 : design unifié preview pour toutes cartes,
   supprime radio, garde chip, layout côte-à-côte
   ========================================================= */

/* 1) Cartes existantes : design CLEAN comme la preview */
html body[class*="lagom-layout"] .cc-item {
    /* Remove radio-styled outside circle */
}

/* Cacher le RADIO CHECK rond (le label .cc-item fait le clic) */
html body[class*="lagom-layout"] .cc-item .radio-styled,
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox .radio-styled {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Cacher le logo MasterCard/Visa en box blanc dans la carte (plus clean sans) */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    display: none !important;
}

/* Cacher le badge ACTIF dans la carte (plus clean sans, l'état actif = bordure) */
html body[class*="lagom-layout"] .cc-item .cc-item-status {
    display: none !important;
}

/* Le radio input natif : caché */
html body[class*="lagom-layout"] .cc-item input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* Brand label top-left (MASTERCARD/VISA/etc.) */
html body[class*="lagom-layout"] .cc-item .cc-item-name {
    position: absolute !important;
    top: 22px !important;
    left: 26px !important;
    right: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase !important;
    z-index: 3 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* CHIP : reste à top: 60px (sous le brand label) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 60px !important;
    left: 26px !important;
    width: 48px !important;
    height: 38px !important;
    z-index: 3 !important;
}

/* État ACTIF : bordure blanche + glow (sans logo/badge/radio) */
html body[class*="lagom-layout"] .cc-item.active {
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 12px 32px rgba(25, 102, 255, 0.40),
                0 0 0 3px rgba(255, 255, 255, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* 2) PREVIEW LIVE : positionner à DROITE du formulaire (grid) */
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse.in,
html body[class*="lagom-layout"] .panel-check--payments .panel-body {
    overflow: visible !important;
}

/* Quand "Utiliser une nouvelle carte" est actif, layout grid avec preview à droite */
@media (min-width: 992px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body div[v-if="cardInfo == 'new'"][hidden="false"],
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[v-if]:not([hidden="true"]):has(input[name="ccnumber"]),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) {
        display: grid !important;
        grid-template-columns: 1fr 380px !important;
        gap: 32px !important;
        align-items: start !important;
    }
    /* Tous les form-group sont dans la colonne 1 */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) > .m-w-400,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) > .form-group,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) > .row {
        grid-column: 1 !important;
    }
    /* La preview-wrap dans la colonne 2, row-span de tous les form fields */
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        grid-column: 2 !important;
        grid-row: 1 / span 99 !important;
        max-width: 380px !important;
        margin: 0 !important;
        align-self: start !important;
    }
}

/* =========================================================
   PCM — CB v5 : chip réaliste + logo top-right partout
   ========================================================= */

/* RE-AFFICHER le logo brand sur les cartes existantes, en TOP-RIGHT */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    display: flex !important;
    position: absolute !important;
    top: 22px !important;
    right: 26px !important;
    bottom: auto !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-icon svg {
    width: 56px !important;
    height: 36px !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30)) !important;
}

/* CHIP RÉALISTE : remplace ::before pattern par un VRAI rendu */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox,
html body[class*="lagom-layout"] .pcm-cc-preview-front .pcm-pv-chip {
    background: linear-gradient(135deg, #a88420 0%, #d4af37 30%, #f5d76e 50%, #d4af37 75%, #a88420 100%) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.30),
        inset 0 1px 1px rgba(255,255,255,0.50),
        inset 0 -1px 1px rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.50) !important;
    position: absolute !important;
    overflow: hidden !important;
}

/* Pattern de contacts EMV (8 pads en 2 colonnes x 4 lignes) via SVG inline en background */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::before,
html body[class*="lagom-layout"] .pcm-cc-preview-front .pcm-pv-chip::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 38' preserveAspectRatio='none'><g fill='none' stroke='%23000000' stroke-opacity='0.30' stroke-width='1' stroke-linecap='round'><line x1='0' y1='19' x2='48' y2='19'/><line x1='18' y1='4' x2='18' y2='34'/><line x1='30' y1='4' x2='30' y2='34'/><line x1='5' y1='8' x2='13' y2='8'/><line x1='5' y1='14' x2='13' y2='14'/><line x1='35' y1='8' x2='43' y2='8'/><line x1='35' y1='14' x2='43' y2='14'/><line x1='5' y1='24' x2='13' y2='24'/><line x1='5' y1='30' x2='13' y2='30'/><line x1='35' y1='24' x2='43' y2='24'/><line x1='35' y1='30' x2='43' y2='30'/></g></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    display: block !important;
}

/* Le ::after de la chip (si présent) on l'annule, on utilise juste ::before */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox::after,
html body[class*="lagom-layout"] .pcm-cc-preview-front .pcm-pv-chip::after {
    display: none !important;
    content: none !important;
}

/* Logo top-right sur la preview card */
.pcm-cc-preview-front .pcm-pv-logo {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 3;
}
.pcm-cc-preview-front .pcm-pv-logo svg {
    width: 56px;
    height: 36px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
}

/* Ajuster brand label pour pas être derrière le logo */
html body[class*="lagom-layout"] .cc-item .cc-item-name,
.pcm-cc-preview-front .pcm-pv-brand {
    right: 100px !important;  /* place pour le logo */
}

/* =========================================================
   PCM — Fix tabs paiement horizontal + descend preview + supprime gros espace
   ========================================================= */

/* TABS "Utiliser carte existante / nouvelle" : HORIZONTAUX (pas stack) */
html body[class*="lagom-layout"] .panel-check--payments ul.nav.nav-tabs.nav-payment,
html body[class*="lagom-layout"] .panel-check--payments .nav-payment,
html body[class*="lagom-layout"] .panel-body ul.nav-payment {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body[class*="lagom-layout"] .nav-payment > li.nav-item,
html body[class*="lagom-layout"] .nav-payment .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
html body[class*="lagom-layout"] .nav-payment .nav-item .nav-link {
    width: auto !important;
}

/* Descendre la preview card un peu (offset top) */
html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
    position: relative !important;
    top: auto !important;
    margin-top: 80px !important;
    align-self: start !important;
}

/* Supprimer le gros espace en bas : panel-body height auto strict */
html body[class*="lagom-layout"] .panel-check--payments .panel-collapse.in,
html body[class*="lagom-layout"] .panel-check--payments .panel-body {
    min-height: 0 !important;
    height: auto !important;
}

/* La preview-wrap NE doit PAS span 99 rows (créait le grand espace) */
@media (min-width: 992px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) {
        grid-template-rows: auto !important;
        align-items: start !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        max-width: 380px !important;
        margin: 80px 0 0 0 !important;
        align-self: start !important;
    }
}

/* =========================================================
   PCM — CB v6 : preview ABSOLUTE (zéro empty space)
   ========================================================= */

@media (min-width: 992px) {
    /* Annule le grid sur panel-body — retour à block flow normal */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        display: block !important;
        position: relative !important;
        padding-right: 420px !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    html body[class*="lagom-layout"] .panel-check--payments .panel-body:has(.pcm-cc-preview-wrap) > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Preview en POSITION ABSOLUTE droite */
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: absolute !important;
        top: 60px !important;
        right: 22px !important;
        left: auto !important;
        bottom: auto !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Form fields en flow normal côté gauche */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .m-w-400,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .form-group,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .row,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[v-if] > *,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[hidden] > * {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Tabs nav-payment : pas de padding-right (au-dessus de la zone absolute) */
    html body[class*="lagom-layout"] .panel-check--payments ul.nav-payment {
        max-width: calc(100% - 0px) !important;
    }
}

/* Mobile : preview au-dessus du form (column block) */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        display: block !important;
        padding-right: 0 !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 auto 24px auto !important;
        max-width: 340px !important;
    }
}

/* =========================================================
   PCM — CB v7 : tabs FULL WIDTH, form max-width, preview right
   ========================================================= */

@media (min-width: 992px) {
    /* Panel-body : zéro padding-right, position relative */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        display: block !important;
        position: relative !important;
        padding-right: 0 !important;
    }

    /* Tabs nav-payment : FULL WIDTH, jamais constrainés */
    html body[class*="lagom-layout"] .panel-check--payments ul.nav-payment {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    /* Le WRAPPER du form "nouvelle carte" : max-width pour laisser place à la preview */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[id*="card-container"]:has(input[name="ccnumber"]),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(> input[name="ccnumber"]),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(.m-w-400 input[name="ccnumber"]) {
        max-width: calc(100% - 420px) !important;
        width: calc(100% - 420px) !important;
        padding-right: 0 !important;
    }

    /* Form-fields : full-width DANS leur wrapper (qui est déjà constraint) */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body .m-w-400,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body .form-group,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body .row {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Preview : absolute droite, top: 90px (sous les tabs) */
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: absolute !important;
        top: 80px !important;
        right: 22px !important;
        left: auto !important;
        bottom: auto !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
    }
}

/* Force visibility de la chip sur TOUTES les cartes (existantes + preview) */
html body[class*="lagom-layout"] .cc-item .cc-item-checkbox,
html body[class*="lagom-layout"] .pcm-cc-preview-front .pcm-pv-chip {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important;
    height: 38px !important;
}

/* =========================================================
   PCM — Tabs paiement FORCE FULL WIDTH (jamais tronqués)
   ========================================================= */

@media (min-width: 992px) {
    /* Panel body : zéro padding-right, et son premier wrapper (celui des tabs) NE doit JAMAIS être réduit */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:first-child,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(> ul.nav-payment),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(.nav-payment) {
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 0 !important;
    }
    /* Seul le wrapper du form "new card" doit être réduit */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[id*="card-container"],
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(> input[name="ccnumber"]),
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(.m-w-400 > input[name="ccnumber"]) {
        max-width: calc(100% - 420px) !important;
        width: calc(100% - 420px) !important;
    }
}

/* =========================================================
   PCM — CB v8 : flexbox dynamique (annule calc 420px qui cassait)
   ========================================================= */

/* ANNULE mes anciennes rules width/max-width sur le wrapper form */
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[id*="card-container"],
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(input[name="ccnumber"]),
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(> input[name="ccnumber"]),
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(.m-w-400 > input[name="ccnumber"]),
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(.m-w-400 input[name="ccnumber"]) {
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
}

/* JS wrap container : flexbox form + preview */
html body[class*="lagom-layout"] .pcm-new-card-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html body[class*="lagom-layout"] .pcm-new-card-flex > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}
html body[class*="lagom-layout"] .pcm-new-card-flex > .pcm-cc-preview-wrap {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    margin: 0 !important;
}

/* Mobile/narrow : stack vertical */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .pcm-new-card-flex {
        flex-direction: column !important;
    }
    html body[class*="lagom-layout"] .pcm-new-card-flex > .pcm-cc-preview-wrap {
        flex: none !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 16px auto 0 auto !important;
        align-self: center !important;
    }
}

/* Annule l'absolute positioning de la preview (on est en flex maintenant) */
@media (min-width: 992px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        padding-right: 0 !important;
    }
    html body[class*="lagom-layout"] .pcm-new-card-flex .pcm-cc-preview-wrap {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
    }
}

/* =========================================================
   PCM — CB v9 : layout par viewport, ZÉRO DOM manipulation
   ========================================================= */

/* ÉCRANS LARGES (≥ 1400px) : preview ABSOLUTE à droite, form prend l'espace restant */
@media (min-width: 1400px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        position: relative !important;
        padding-right: 420px !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: absolute !important;
        top: 70px !important;
        right: 22px !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
    }
    /* Les wrappers form n'ont AUCUN width forcé — le padding-right fait le job */
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Tabs nav : étendent dans la zone réservée (visible au-dessus du padding-right) */
    html body[class*="lagom-layout"] .panel-check--payments ul.nav-payment {
        margin-right: -420px !important;  /* compensate panel-body padding pour les tabs */
    }
}

/* ÉCRANS MOYENS (992-1399px) : preview SOUS le form */
@media (min-width: 992px) and (max-width: 1399.98px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        position: relative !important;
        padding-right: 0 !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 24px auto 0 auto !important;
        max-width: 380px !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* MOBILE (< 992px) : preview SOUS le form */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body {
        position: relative !important;
        padding-right: 0 !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 20px auto 0 auto !important;
        max-width: 340px !important;
        width: 100% !important;
    }
}

/* Annule les anciennes rules problématiques */
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div[id*="card-container"],
html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:has(input[name="ccnumber"]) {
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
}

/* =========================================================
   PCM — CB v10 : preview NE PRENDS PAS toute la largeur
   ========================================================= */

/* Exclusion stricte de .pcm-cc-preview-wrap dans les rules panel-body > div */
@media (min-width: 1400px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:not(.pcm-cc-preview-wrap) {
        width: 100% !important;
        max-width: 100% !important;
    }
    html body.lagom-layout-left .panel-check--payments .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: absolute !important;
        top: 70px !important;
        right: 22px !important;
        left: auto !important;
        bottom: auto !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > div:not(.pcm-cc-preview-wrap) {
        width: 100% !important;
        max-width: 100% !important;
    }
    html body.lagom-layout-left .panel-check--payments .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 24px auto 0 auto !important;
        width: 100% !important;
        max-width: 380px !important;
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    html body.lagom-layout-left .panel-check--payments .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .panel-check--payments .panel-body > .pcm-cc-preview-wrap,
    html body[class*="lagom-layout"] .pcm-cc-preview-wrap {
        position: relative !important;
        margin: 20px auto 0 auto !important;
        width: 100% !important;
        max-width: 340px !important;
    }
}

/* Le .pcm-cc-preview lui-même : strict max-width */
html body[class*="lagom-layout"] .pcm-cc-preview {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   PCM — Détails facturation : polish visuel seul (zero layout)
   ========================================================= */

/* EUR badge polish */
html body[class*="lagom-layout"] .panel--billing .label.label-info {
    background: linear-gradient(135deg, rgba(25, 102, 255, 0.30), rgba(0, 154, 255, 0.18)) !important;
    border: 1px solid rgba(98, 152, 254, 0.45) !important;
    color: #c4e3ff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* (Préfixe "+" supprimé sur demande user) */

/* Email (premier address-item) : couleur accent */
html body[class*="lagom-layout"] .panel--billing address .address-item:first-child {
    color: #c4e3ff !important;
    font-weight: 600 !important;
}

/* =========================================================
   PCM — Form Créer un compte : fixes phone + password modal
   ========================================================= */

/* Phone input intl-tel : aligner correctement le flag + placeholder propre */
html body[class*="lagom-layout"] .iti.iti--container,
html body[class*="lagom-layout"] .iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}
html body[class*="lagom-layout"] .iti input[type="tel"] {
    padding-left: 56px !important;
    width: 100% !important;
}
html body[class*="lagom-layout"] .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
}
html body[class*="lagom-layout"] .iti__selected-flag {
    padding: 0 8px 0 12px !important;
    background: transparent !important;
}

/* Dropdown des pays : style PCM dark */
html body[class*="lagom-layout"] .iti__country-list {
    background: rgba(8, 19, 46, 0.98) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    border-radius: 8px !important;
    color: #c4e3ff !important;
    max-height: 260px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50) !important;
}
html body[class*="lagom-layout"] .iti__country {
    padding: 8px 12px !important;
    color: #c4e3ff !important;
}
html body[class*="lagom-layout"] .iti__country:hover,
html body[class*="lagom-layout"] .iti__country.iti__highlight {
    background: rgba(25, 102, 255, 0.20) !important;
    color: #ffffff !important;
}
html body[class*="lagom-layout"] .iti__divider {
    border-bottom-color: rgba(98, 152, 254, 0.20) !important;
}

/* Modal "Générer un mot de passe" : style PCM dark + z-index correct */
html body[class*="lagom-layout"] #modalGeneratePassword.modal,
html body[class*="lagom-layout"] .modal#modalGeneratePassword {
    z-index: 10500 !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-dialog {
    max-width: 540px !important;
    margin: 80px auto !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-content {
    background: linear-gradient(180deg, rgba(15,29,63,0.98), rgba(10,22,49,0.99)) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    border-radius: 16px !important;
    color: #c4e3ff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60) !important;
    overflow: hidden !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(98, 152, 254, 0.15) !important;
    padding: 18px 22px !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-body {
    padding: 22px !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .modal-footer {
    border-top: 1px solid rgba(98, 152, 254, 0.15) !important;
    padding: 16px 22px !important;
    background: rgba(8, 19, 46, 0.50) !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .form-control {
    background: rgba(8, 19, 46, 0.65) !important;
    border: 1px solid rgba(98, 152, 254, 0.25) !important;
    color: #ffffff !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .close {
    color: #c4e3ff !important;
    opacity: 0.7 !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .close:hover {
    opacity: 1 !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .control-label {
    color: #c4e3ff !important;
    font-weight: 600 !important;
}
html body[class*="lagom-layout"] #modalGeneratePassword .btn-primary {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Bouton "Générer un mot de passe" : style PCM */
html body[class*="lagom-layout"] .generate-password,
html body[class*="lagom-layout"] button.btn.generate-password {
    background: rgba(25, 102, 255, 0.15) !important;
    border: 1px solid rgba(98, 152, 254, 0.40) !important;
    color: #c4e3ff !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .generate-password:hover {
    background: rgba(25, 102, 255, 0.28) !important;
    border-color: rgba(98, 152, 254, 0.65) !important;
    color: #ffffff !important;
}

/* Backdrop modal : assombri PCM */
html body[class*="lagom-layout"] .modal-backdrop {
    background: rgba(5, 13, 36, 0.85) !important;
    z-index: 10499 !important;
}
/* FIX z-index (2026-06-08) : le backdrop forcé à 10499 passait AU-DESSUS de
   la modale Bootstrap (z-index ~1050 par défaut) → popup "Définir mot de passe"
   / "Gérer le compte" rendu derrière le flou. On remonte la modale au-dessus. */
html body[class*="lagom-layout"] .modal {
    z-index: 10500 !important;
}
html body[class*="lagom-layout"] .modal .modal-dialog,
html body[class*="lagom-layout"] .modal .modal-content {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   PCM — Phone v15 (jQuery) + Password modal click backup
   ========================================================= */

/* intl-tel-input v15 (jQuery) — classes différentes de v17 */
html body[class*="lagom-layout"] .intl-tel-input {
    width: 100% !important;
    position: relative !important;
    display: block !important;
}
html body[class*="lagom-layout"] .intl-tel-input input[type="tel"],
html body[class*="lagom-layout"] .intl-tel-input input[name*="phone"] {
    padding-left: 80px !important;
    width: 100% !important;
}
html body[class*="lagom-layout"] .intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 5 !important;
    background: transparent !important;
}
html body[class*="lagom-layout"] .intl-tel-input .selected-flag {
    padding: 0 8px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    height: 100% !important;
}
html body[class*="lagom-layout"] .intl-tel-input .selected-dial-code {
    margin-left: 6px !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
}
html body[class*="lagom-layout"] .intl-tel-input .country-list {
    background: rgba(8, 19, 46, 0.98) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    border-radius: 8px !important;
    max-height: 260px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50) !important;
    z-index: 10000 !important;
}
html body[class*="lagom-layout"] .intl-tel-input .country-list .country {
    padding: 8px 12px !important;
    color: #c4e3ff !important;
}
html body[class*="lagom-layout"] .intl-tel-input .country-list .country:hover,
html body[class*="lagom-layout"] .intl-tel-input .country-list .country.highlight {
    background: rgba(25, 102, 255, 0.20) !important;
    color: #ffffff !important;
}
html body[class*="lagom-layout"] .intl-tel-input .country-list .country .dial-code {
    color: #8fadc9 !important;
}

/* =========================================================
   PCM — Fix overlap arrow phone + button generate clickable
   ========================================================= */

/* Phone : assez de padding pour flag + "+33" + arrow */
html body[class*="lagom-layout"] .intl-tel-input input[type="tel"],
html body[class*="lagom-layout"] .intl-tel-input input[name*="phone"] {
    padding-left: 105px !important;
}

/* Selected-flag : container assez large pour tout afficher */
html body[class*="lagom-layout"] .intl-tel-input .selected-flag {
    width: 95px !important;
    padding: 0 8px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
html body[class*="lagom-layout"] .intl-tel-input .iti-arrow,
html body[class*="lagom-layout"] .intl-tel-input .selected-flag .iti-arrow {
    position: static !important;
    margin: 0 0 0 4px !important;
    right: auto !important;
    top: auto !important;
}

/* Bouton "Générer un mot de passe" : pointer-events auto + z-index */
html body[class*="lagom-layout"] .generate-password,
html body[class*="lagom-layout"] button.generate-password,
html body[class*="lagom-layout"] .btn.generate-password,
html body[class*="lagom-layout"] [class*="generate-password"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    user-select: none !important;
}

/* Et le wrapper .password-content : pas de blocage de clic */
html body[class*="lagom-layout"] .password-content,
html body[class*="lagom-layout"] .password-content * {
    pointer-events: auto !important;
}
html body[class*="lagom-layout"] .password-content button {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Force visibility intl-tel-input wrapper on all pages */
html body .intl-tel-input,
html body .iti {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}
html body .intl-tel-input .flag-container,
html body .iti__flag-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body .intl-tel-input .selected-flag,
html body .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body .intl-tel-input .iti-flag,
html body .iti__flag {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   PCM — Phone : padding-left FORCE 105px (override lib JS-injected)
   ========================================================= */

/* Sélecteurs multiples pour battre tous les cas */
html body input[name="phonenumber"][type="tel"],
html body input[name="phonenumber"],
html body .intl-tel-input.separate-dial-code input[type="tel"],
html body .intl-tel-input.separate-dial-code input,
html body .intl-tel-input input[type="tel"],
html body .iti input[type="tel"],
html body .iti--separate-dial-code input[type="tel"],
html body #inputPhone,
html body #domaincontactphonenumber {
    padding-left: 105px !important;
}

/* selected-flag : width fixe pour caser flag + dial code */
html body .intl-tel-input.separate-dial-code .selected-flag,
html body .intl-tel-input .selected-flag,
html body .iti--separate-dial-code .iti__selected-flag {
    width: 95px !important;
    padding: 0 8px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
}

/* selected-dial-code visible et propre */
html body .intl-tel-input .selected-dial-code,
html body .iti__selected-dial-code {
    color: #c4e3ff !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* =========================================================
   PCM — Flag size constraint + modal aggressive show
   ========================================================= */

/* (Ancienne règle iti-flag avec background-position: center SUPPRIMÉE) */

/* Selected-flag : flex strict, gap propre */
html body .intl-tel-input .selected-flag,
html body .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 88px !important;
    padding: 0 8px 0 12px !important;
    background: transparent !important;
    height: 100% !important;
}

/* Dial code propre */
html body .intl-tel-input .selected-dial-code,
html body .iti__selected-dial-code {
    margin: 0 !important;
    padding: 0 !important;
    color: #c4e3ff !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Arrow ▾ taille fixe */
html body .intl-tel-input .iti-arrow,
html body .iti__arrow {
    margin: 0 0 0 4px !important;
    flex-shrink: 0 !important;
}

/* Modal : force visibility extrême */
html body #modalGeneratePassword.in,
html body #modalGeneratePassword[style*="display: block"] {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
html body #modalGeneratePassword .modal-dialog {
    position: relative !important;
    margin: 80px auto !important;
    max-width: 540px !important;
    z-index: 1000000 !important;
}
html body .modal-backdrop.pcm-pwd {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999998 !important;
    background: rgba(5, 13, 36, 0.85) !important;
}

/* =========================================================
   PCM — Fix critique : ne JAMAIS override background-position
   du .iti-flag (le sprite a une position par pays)
   ========================================================= */

/* RESET : annule mon background-position center qui écrasait le drapeau */
/* (Ancien override background-position: unset SUPPRIMÉ) */

/* Force display propre dans le separate-dial-code : flex avec gap, mais children inline */
html body .intl-tel-input.separate-dial-code .selected-flag,
html body .intl-tel-input .selected-flag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 8px 0 12px !important;
    background: transparent !important;
    height: 100% !important;
    table-layout: auto !important;
}
/* Children : inline-block (override lib's display:table-cell) */
html body .intl-tel-input .selected-flag .iti-flag,
html body .intl-tel-input .selected-flag .selected-dial-code,
html body .intl-tel-input .selected-flag .iti-arrow {
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Force display:block sur le iti-flag pour conserver les dimensions exactes du sprite */
html body .intl-tel-input .iti-flag {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* =========================================================
   PCM — FIX FINAL : NE JAMAIS toucher background-position du iti-flag
   ========================================================= */

/* RESET de mon précédent unset qui cassait tout */
html body .iti-flag,
html body .intl-tel-input .iti-flag,
html body .iti__flag {
    /* PAS de background-position ici - laisser la CSS CDN gérer */
    background-repeat: no-repeat !important;
    display: inline-block !important;
}

/* (Ancien override background-position: revert SUPPRIMÉ) */

/* =========================================================
   PCM — FORCE padding-left 105px sur register-page (override shorthand)
   ========================================================= */

/* Specificity max pour battre body.register-page .form-control { padding: 12px 14px !important } */
html body.page-clientregister #inputPhone[name="phonenumber"][type="tel"],
html body.register-page #inputPhone[name="phonenumber"][type="tel"],
html body.page-clientregister #inputPhone.form-control,
html body.register-page #inputPhone.form-control,
html body.page-clientregister .intl-tel-input #inputPhone,
html body.register-page .intl-tel-input #inputPhone,
html body.page-clientregister input.form-control[name="phonenumber"],
html body.register-page input.form-control[name="phonenumber"] {
    padding-left: 105px !important;
    padding-right: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Idem pour toutes les pages avec intl-tel-input séparé */
html body input.form-control[name="phonenumber"][type="tel"],
html body .intl-tel-input.separate-dial-code input.form-control,
html body .intl-tel-input.separate-dial-code input[type="tel"].form-control {
    padding-left: 105px !important;
}

/* =========================================================
   PCM — Force taille EXACTE du iti-flag (20x15 = standard lib)
   ========================================================= */

html body .iti-flag,
html body .intl-tel-input .iti-flag,
html body .intl-tel-input .selected-flag .iti-flag,
html body .intl-tel-input .country-list .iti-flag,
html body .iti__flag {
    width: 20px !important;
    height: 15px !important;
    min-width: 20px !important;
    min-height: 15px !important;
    max-width: 20px !important;
    max-height: 15px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    /* PAS de background-position ici - laisser la CSS CDN ! */
}
/* =========================================================
   PCM — intl-tel-input v15 CSS inlined (CDN backup)
   ========================================================= */
.intl-tel-input{position:relative;display:inline-block}.intl-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.intl-tel-input .hide{display:none}.intl-tel-input .v-hide{visibility:hidden}.intl-tel-input input,.intl-tel-input input[type=tel],.intl-tel-input input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.intl-tel-input .flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.intl-tel-input .selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.intl-tel-input .selected-flag .iti-arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.intl-tel-input .selected-flag .iti-arrow.up{border-top:none;border-bottom:4px solid #555}.intl-tel-input .country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.intl-tel-input .country-list.dropup{bottom:100%;margin-bottom:-1px}.intl-tel-input .country-list .flag-box{display:inline-block;width:20px}@media (max-width:500px){.intl-tel-input .country-list{white-space:normal}}.intl-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.intl-tel-input .country-list .country{padding:5px 10px;outline:0}.intl-tel-input .country-list .country .dial-code{color:#999}.intl-tel-input .country-list .country.highlight{background-color:rgba(0,0,0,.05)}.intl-tel-input .country-list .country-name,.intl-tel-input .country-list .dial-code,.intl-tel-input .country-list .flag-box{vertical-align:middle}.intl-tel-input .country-list .country-name,.intl-tel-input .country-list .flag-box{margin-right:6px}.intl-tel-input.allow-dropdown input,.intl-tel-input.allow-dropdown input[type=tel],.intl-tel-input.allow-dropdown input[type=text],.intl-tel-input.separate-dial-code input,.intl-tel-input.separate-dial-code input[type=tel],.intl-tel-input.separate-dial-code input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}.intl-tel-input.allow-dropdown .flag-container,.intl-tel-input.separate-dial-code .flag-container{right:auto;left:0}.intl-tel-input.allow-dropdown .flag-container:hover{cursor:pointer}.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag{background-color:rgba(0,0,0,.05)}.intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover,.intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover{cursor:default}.intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover .selected-flag,.intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover .selected-flag{background-color:transparent}.intl-tel-input.separate-dial-code .selected-flag{background-color:rgba(0,0,0,.05)}.intl-tel-input.separate-dial-code .selected-dial-code{margin-left:6px}.intl-tel-input.iti-container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.intl-tel-input.iti-container:hover{cursor:pointer}.iti-mobile .intl-tel-input.iti-container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .intl-tel-input .country-list{max-height:100%;width:100%}.iti-mobile .intl-tel-input .country-list .country{padding:10px 10px;line-height:1.5em}.iti-flag{width:20px}.iti-flag.be{width:18px}.iti-flag.ch{width:15px}.iti-flag.mc{width:19px}.iti-flag.ne{width:18px}.iti-flag.np{width:13px}.iti-flag.va{width:15px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti-flag{background-size:5652px 15px}}.iti-flag.ac{height:10px;background-position:0 0}.iti-flag.ad{height:14px;background-position:-22px 0}.iti-flag.ae{height:10px;background-position:-44px 0}.iti-flag.af{height:14px;background-position:-66px 0}.iti-flag.ag{height:14px;background-position:-88px 0}.iti-flag.ai{height:10px;background-position:-110px 0}.iti-flag.al{height:15px;background-position:-132px 0}.iti-flag.am{height:10px;background-position:-154px 0}.iti-flag.ao{height:14px;background-position:-176px 0}.iti-flag.aq{height:14px;background-position:-198px 0}.iti-flag.ar{height:13px;background-position:-220px 0}.iti-flag.as{height:10px;background-position:-242px 0}.iti-flag.at{height:14px;background-position:-264px 0}.iti-flag.au{height:10px;background-position:-286px 0}.iti-flag.aw{height:14px;background-position:-308px 0}.iti-flag.ax{height:13px;background-position:-330px 0}.iti-flag.az{height:10px;background-position:-352px 0}.iti-flag.ba{height:10px;background-position:-374px 0}.iti-flag.bb{height:14px;background-position:-396px 0}.iti-flag.bd{height:12px;background-position:-418px 0}.iti-flag.be{height:15px;background-position:-440px 0}.iti-flag.bf{height:14px;background-position:-460px 0}.iti-flag.bg{height:12px;background-position:-482px 0}.iti-flag.bh{height:12px;background-position:-504px 0}.iti-flag.bi{height:12px;background-position:-526px 0}.iti-flag.bj{height:14px;background-position:-548px 0}.iti-flag.bl{height:14px;background-position:-570px 0}.iti-flag.bm{height:10px;background-position:-592px 0}.iti-flag.bn{height:10px;background-position:-614px 0}.iti-flag.bo{height:14px;background-position:-636px 0}.iti-flag.bq{height:14px;background-position:-658px 0}.iti-flag.br{height:14px;background-position:-680px 0}.iti-flag.bs{height:10px;background-position:-702px 0}.iti-flag.bt{height:14px;background-position:-724px 0}.iti-flag.bv{height:15px;background-position:-746px 0}.iti-flag.bw{height:14px;background-position:-768px 0}.iti-flag.by{height:10px;background-position:-790px 0}.iti-flag.bz{height:14px;background-position:-812px 0}.iti-flag.ca{height:10px;background-position:-834px 0}.iti-flag.cc{height:10px;background-position:-856px 0}.iti-flag.cd{height:15px;background-position:-878px 0}.iti-flag.cf{height:14px;background-position:-900px 0}.iti-flag.cg{height:14px;background-position:-922px 0}.iti-flag.ch{height:15px;background-position:-944px 0}.iti-flag.ci{height:14px;background-position:-961px 0}.iti-flag.ck{height:10px;background-position:-983px 0}.iti-flag.cl{height:14px;background-position:-1005px 0}.iti-flag.cm{height:14px;background-position:-1027px 0}.iti-flag.cn{height:14px;background-position:-1049px 0}.iti-flag.co{height:14px;background-position:-1071px 0}.iti-flag.cp{height:14px;background-position:-1093px 0}.iti-flag.cr{height:12px;background-position:-1115px 0}.iti-flag.cu{height:10px;background-position:-1137px 0}.iti-flag.cv{height:12px;background-position:-1159px 0}.iti-flag.cw{height:14px;background-position:-1181px 0}.iti-flag.cx{height:10px;background-position:-1203px 0}.iti-flag.cy{height:14px;background-position:-1225px 0}.iti-flag.cz{height:14px;background-position:-1247px 0}.iti-flag.de{height:12px;background-position:-1269px 0}.iti-flag.dg{height:10px;background-position:-1291px 0}.iti-flag.dj{height:14px;background-position:-1313px 0}.iti-flag.dk{height:15px;background-position:-1335px 0}.iti-flag.dm{height:10px;background-position:-1357px 0}.iti-flag.do{height:14px;background-position:-1379px 0}.iti-flag.dz{height:14px;background-position:-1401px 0}.iti-flag.ea{height:14px;background-position:-1423px 0}.iti-flag.ec{height:14px;background-position:-1445px 0}.iti-flag.ee{height:13px;background-position:-1467px 0}.iti-flag.eg{height:14px;background-position:-1489px 0}.iti-flag.eh{height:10px;background-position:-1511px 0}.iti-flag.er{height:10px;background-position:-1533px 0}.iti-flag.es{height:14px;background-position:-1555px 0}.iti-flag.et{height:10px;background-position:-1577px 0}.iti-flag.eu{height:14px;background-position:-1599px 0}.iti-flag.fi{height:12px;background-position:-1621px 0}.iti-flag.fj{height:10px;background-position:-1643px 0}.iti-flag.fk{height:10px;background-position:-1665px 0}.iti-flag.fm{height:11px;background-position:-1687px 0}.iti-flag.fo{height:15px;background-position:-1709px 0}.iti-flag.fr{height:14px;background-position:-1731px 0}.iti-flag.ga{height:15px;background-position:-1753px 0}.iti-flag.gb{height:10px;background-position:-1775px 0}.iti-flag.gd{height:12px;background-position:-1797px 0}.iti-flag.ge{height:14px;background-position:-1819px 0}.iti-flag.gf{height:14px;background-position:-1841px 0}.iti-flag.gg{height:14px;background-position:-1863px 0}.iti-flag.gh{height:14px;background-position:-1885px 0}.iti-flag.gi{height:10px;background-position:-1907px 0}.iti-flag.gl{height:14px;background-position:-1929px 0}.iti-flag.gm{height:14px;background-position:-1951px 0}.iti-flag.gn{height:14px;background-position:-1973px 0}.iti-flag.gp{height:14px;background-position:-1995px 0}.iti-flag.gq{height:14px;background-position:-2017px 0}.iti-flag.gr{height:14px;background-position:-2039px 0}.iti-flag.gs{height:10px;background-position:-2061px 0}.iti-flag.gt{height:13px;background-position:-2083px 0}.iti-flag.gu{height:11px;background-position:-2105px 0}.iti-flag.gw{height:10px;background-position:-2127px 0}.iti-flag.gy{height:12px;background-position:-2149px 0}.iti-flag.hk{height:14px;background-position:-2171px 0}.iti-flag.hm{height:10px;background-position:-2193px 0}.iti-flag.hn{height:10px;background-position:-2215px 0}.iti-flag.hr{height:10px;background-position:-2237px 0}.iti-flag.ht{height:12px;background-position:-2259px 0}.iti-flag.hu{height:10px;background-position:-2281px 0}.iti-flag.ic{height:14px;background-position:-2303px 0}.iti-flag.id{height:14px;background-position:-2325px 0}.iti-flag.ie{height:10px;background-position:-2347px 0}.iti-flag.il{height:15px;background-position:-2369px 0}.iti-flag.im{height:10px;background-position:-2391px 0}.iti-flag.in{height:14px;background-position:-2413px 0}.iti-flag.io{height:10px;background-position:-2435px 0}.iti-flag.iq{height:14px;background-position:-2457px 0}.iti-flag.ir{height:12px;background-position:-2479px 0}.iti-flag.is{height:15px;background-position:-2501px 0}.iti-flag.it{height:14px;background-position:-2523px 0}.iti-flag.je{height:12px;background-position:-2545px 0}.iti-flag.jm{height:10px;background-position:-2567px 0}.iti-flag.jo{height:10px;background-position:-2589px 0}.iti-flag.jp{height:14px;background-position:-2611px 0}.iti-flag.ke{height:14px;background-position:-2633px 0}.iti-flag.kg{height:12px;background-position:-2655px 0}.iti-flag.kh{height:13px;background-position:-2677px 0}.iti-flag.ki{height:10px;background-position:-2699px 0}.iti-flag.km{height:12px;background-position:-2721px 0}.iti-flag.kn{height:14px;background-position:-2743px 0}.iti-flag.kp{height:10px;background-position:-2765px 0}.iti-flag.kr{height:14px;background-position:-2787px 0}.iti-flag.kw{height:10px;background-position:-2809px 0}.iti-flag.ky{height:10px;background-position:-2831px 0}.iti-flag.kz{height:10px;background-position:-2853px 0}.iti-flag.la{height:14px;background-position:-2875px 0}.iti-flag.lb{height:14px;background-position:-2897px 0}.iti-flag.lc{height:10px;background-position:-2919px 0}.iti-flag.li{height:12px;background-position:-2941px 0}.iti-flag.lk{height:10px;background-position:-2963px 0}.iti-flag.lr{height:11px;background-position:-2985px 0}.iti-flag.ls{height:14px;background-position:-3007px 0}.iti-flag.lt{height:12px;background-position:-3029px 0}.iti-flag.lu{height:12px;background-position:-3051px 0}.iti-flag.lv{height:10px;background-position:-3073px 0}.iti-flag.ly{height:10px;background-position:-3095px 0}.iti-flag.ma{height:14px;background-position:-3117px 0}.iti-flag.mc{height:15px;background-position:-3139px 0}.iti-flag.md{height:10px;background-position:-3160px 0}.iti-flag.me{height:10px;background-position:-3182px 0}.iti-flag.mf{height:14px;background-position:-3204px 0}.iti-flag.mg{height:14px;background-position:-3226px 0}.iti-flag.mh{height:11px;background-position:-3248px 0}.iti-flag.mk{height:10px;background-position:-3270px 0}.iti-flag.ml{height:14px;background-position:-3292px 0}.iti-flag.mm{height:14px;background-position:-3314px 0}.iti-flag.mn{height:10px;background-position:-3336px 0}.iti-flag.mo{height:14px;background-position:-3358px 0}.iti-flag.mp{height:10px;background-position:-3380px 0}.iti-flag.mq{height:14px;background-position:-3402px 0}.iti-flag.mr{height:14px;background-position:-3424px 0}.iti-flag.ms{height:10px;background-position:-3446px 0}.iti-flag.mt{height:14px;background-position:-3468px 0}.iti-flag.mu{height:14px;background-position:-3490px 0}.iti-flag.mv{height:14px;background-position:-3512px 0}.iti-flag.mw{height:14px;background-position:-3534px 0}.iti-flag.mx{height:12px;background-position:-3556px 0}.iti-flag.my{height:10px;background-position:-3578px 0}.iti-flag.mz{height:14px;background-position:-3600px 0}.iti-flag.na{height:14px;background-position:-3622px 0}.iti-flag.nc{height:10px;background-position:-3644px 0}.iti-flag.ne{height:15px;background-position:-3666px 0}.iti-flag.nf{height:10px;background-position:-3686px 0}.iti-flag.ng{height:10px;background-position:-3708px 0}.iti-flag.ni{height:12px;background-position:-3730px 0}.iti-flag.nl{height:14px;background-position:-3752px 0}.iti-flag.no{height:15px;background-position:-3774px 0}.iti-flag.np{height:15px;background-position:-3796px 0}.iti-flag.nr{height:10px;background-position:-3811px 0}.iti-flag.nu{height:10px;background-position:-3833px 0}.iti-flag.nz{height:10px;background-position:-3855px 0}.iti-flag.om{height:10px;background-position:-3877px 0}.iti-flag.pa{height:14px;background-position:-3899px 0}.iti-flag.pe{height:14px;background-position:-3921px 0}.iti-flag.pf{height:14px;background-position:-3943px 0}.iti-flag.pg{height:15px;background-position:-3965px 0}.iti-flag.ph{height:10px;background-position:-3987px 0}.iti-flag.pk{height:14px;background-position:-4009px 0}.iti-flag.pl{height:13px;background-position:-4031px 0}.iti-flag.pm{height:14px;background-position:-4053px 0}.iti-flag.pn{height:10px;background-position:-4075px 0}.iti-flag.pr{height:14px;background-position:-4097px 0}.iti-flag.ps{height:10px;background-position:-4119px 0}.iti-flag.pt{height:14px;background-position:-4141px 0}.iti-flag.pw{height:13px;background-position:-4163px 0}.iti-flag.py{height:11px;background-position:-4185px 0}.iti-flag.qa{height:8px;background-position:-4207px 0}.iti-flag.re{height:14px;background-position:-4229px 0}.iti-flag.ro{height:14px;background-position:-4251px 0}.iti-flag.rs{height:14px;background-position:-4273px 0}.iti-flag.ru{height:14px;background-position:-4295px 0}.iti-flag.rw{height:14px;background-position:-4317px 0}.iti-flag.sa{height:14px;background-position:-4339px 0}.iti-flag.sb{height:10px;background-position:-4361px 0}.iti-flag.sc{height:10px;background-position:-4383px 0}.iti-flag.sd{height:10px;background-position:-4405px 0}.iti-flag.se{height:13px;background-position:-4427px 0}.iti-flag.sg{height:14px;background-position:-4449px 0}.iti-flag.sh{height:10px;background-position:-4471px 0}.iti-flag.si{height:10px;background-position:-4493px 0}.iti-flag.sj{height:15px;background-position:-4515px 0}.iti-flag.sk{height:14px;background-position:-4537px 0}.iti-flag.sl{height:14px;background-position:-4559px 0}.iti-flag.sm{height:15px;background-position:-4581px 0}.iti-flag.sn{height:14px;background-position:-4603px 0}.iti-flag.so{height:14px;background-position:-4625px 0}.iti-flag.sr{height:14px;background-position:-4647px 0}.iti-flag.ss{height:10px;background-position:-4669px 0}.iti-flag.st{height:10px;background-position:-4691px 0}.iti-flag.sv{height:12px;background-position:-4713px 0}.iti-flag.sx{height:14px;background-position:-4735px 0}.iti-flag.sy{height:14px;background-position:-4757px 0}.iti-flag.sz{height:14px;background-position:-4779px 0}.iti-flag.ta{height:10px;background-position:-4801px 0}.iti-flag.tc{height:10px;background-position:-4823px 0}.iti-flag.td{height:14px;background-position:-4845px 0}.iti-flag.tf{height:14px;background-position:-4867px 0}.iti-flag.tg{height:13px;background-position:-4889px 0}.iti-flag.th{height:14px;background-position:-4911px 0}.iti-flag.tj{height:10px;background-position:-4933px 0}.iti-flag.tk{height:10px;background-position:-4955px 0}.iti-flag.tl{height:10px;background-position:-4977px 0}.iti-flag.tm{height:14px;background-position:-4999px 0}.iti-flag.tn{height:14px;background-position:-5021px 0}.iti-flag.to{height:10px;background-position:-5043px 0}.iti-flag.tr{height:14px;background-position:-5065px 0}.iti-flag.tt{height:12px;background-position:-5087px 0}.iti-flag.tv{height:10px;background-position:-5109px 0}.iti-flag.tw{height:14px;background-position:-5131px 0}.iti-flag.tz{height:14px;background-position:-5153px 0}.iti-flag.ua{height:14px;background-position:-5175px 0}.iti-flag.ug{height:14px;background-position:-5197px 0}.iti-flag.um{height:11px;background-position:-5219px 0}.iti-flag.un{height:14px;background-position:-5241px 0}.iti-flag.us{height:11px;background-position:-5263px 0}.iti-flag.uy{height:14px;background-position:-5285px 0}.iti-flag.uz{height:10px;background-position:-5307px 0}.iti-flag.va{height:15px;background-position:-5329px 0}.iti-flag.vc{height:14px;background-position:-5346px 0}.iti-flag.ve{height:14px;background-position:-5368px 0}.iti-flag.vg{height:10px;background-position:-5390px 0}.iti-flag.vi{height:14px;background-position:-5412px 0}.iti-flag.vn{height:14px;background-position:-5434px 0}.iti-flag.vu{height:12px;background-position:-5456px 0}.iti-flag.wf{height:14px;background-position:-5478px 0}.iti-flag.ws{height:10px;background-position:-5500px 0}.iti-flag.xk{height:15px;background-position:-5522px 0}.iti-flag.ye{height:14px;background-position:-5544px 0}.iti-flag.yt{height:14px;background-position:-5566px 0}.iti-flag.za{height:14px;background-position:-5588px 0}.iti-flag.zm{height:14px;background-position:-5610px 0}.iti-flag.zw{height:10px;background-position:-5632px 0}.iti-flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(https://cdn.jsdelivr.net/npm/intl-tel-input@15.1.0/build/img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti-flag{background-image:url(https://cdn.jsdelivr.net/npm/intl-tel-input@15.1.0/build/img/flags@2x.png)}}.iti-flag.np{background-color:transparent}
/* =========================================================
   PCM — Flag size HARD constraint (specificity max)
   ========================================================= */

/* Container parent : flex row strict */
html body div.intl-tel-input.iti-sdc-3 div.flag-container,
html body div.intl-tel-input.allow-dropdown div.flag-container,
html body div.intl-tel-input div.flag-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Selected-flag : flex row, contenu inline horizontal */
html body div.intl-tel-input.iti-sdc-3 div.selected-flag,
html body div.intl-tel-input div.flag-container div.selected-flag {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 90px !important;
    max-width: 95px !important;
    height: 100% !important;
    padding: 0 8px 0 12px !important;
}

/* Flag : taille STRICTE 20x15 */
html body div.intl-tel-input div.selected-flag div.iti-flag,
html body div.intl-tel-input.iti-sdc-3 div.iti-flag,
html body div.iti-flag.fr,
html body div.iti-flag.be,
html body div.iti-flag.ch,
html body div.iti-flag.lu,
html body div.iti-flag.mc,
html body div.iti-flag {
    width: 20px !important;
    height: 15px !important;
    min-width: 20px !important;
    min-height: 14px !important;
    max-width: 20px !important;
    max-height: 15px !important;
    flex: 0 0 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

/* Selected-dial-code : inline, taille texte normale */
html body div.intl-tel-input div.selected-flag div.selected-dial-code {
    display: inline-block !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
    margin-left: 4px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #c4e3ff !important;
    line-height: 1 !important;
}

/* Arrow : inline */
html body div.intl-tel-input div.selected-flag div.iti-arrow {
    display: inline-block !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 4px !important;
}

/* =========================================================
   PCM — Bootstrap 5 modal support (.show au lieu de .in)
   ========================================================= */

/* Force visibilité de la modal qu'elle soit en .in OR .show */
html body #modalGeneratePassword.modal.show,
html body #modalGeneratePassword.modal.in,
html body #modalGeneratePassword.modal[style*="display: block"],
html body #modalGeneratePassword.modal[style*="display:block"] {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Dialog au CENTRE de la fenêtre */
html body #modalGeneratePassword .modal-dialog {
    position: relative !important;
    margin: 80px auto !important;
    max-width: 540px !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Style PCM du modal-content (Bootstrap 5 + 3 compatible) */
html body #modalGeneratePassword .modal-content {
    background: linear-gradient(180deg, rgba(15,29,63,0.98), rgba(10,22,49,0.99)) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    border-radius: 16px !important;
    color: #c4e3ff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

/* Backdrop manuel (Bootstrap 5 utilise modal-backdrop.show) */
html body .modal-backdrop,
html body .modal-backdrop.show,
html body .modal-backdrop.in,
html body .modal-backdrop.pcm-pwd {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999998 !important;
    background: rgba(5, 13, 36, 0.85) !important;
    opacity: 1 !important;
}

/* Body avec modal-open : pas de scroll bloquant */
html body.modal-open {
    overflow: hidden !important;
}

/* =========================================================
   PCM — Supprime bouton "Générer un mot de passe" sur order page
   ========================================================= */
html body.app-main-order .password-content > button.generate-password,
html body[class*="lagom-layout"] .app-main-order button.generate-password,
html body.app-main-order .password-content:not(.password-content-top):not(.password-content-group),
html body[class*="lagom-layout"] .panel-check--payments button.generate-password {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* =========================================================
   PCM — Tab "Utiliser une nouvelle carte" : pas tronqué
   ========================================================= */
html body[class*="lagom-layout"] .panel-check--payments .nav-payment .nav-item,
html body[class*="lagom-layout"] .panel-check--payments .nav-payment .nav-item .nav-link,
html body[class*="lagom-layout"] ul.nav-payment li.nav-item,
html body[class*="lagom-layout"] ul.nav-payment li.nav-item .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Container UL : permet aux tabs de prendre leur taille naturelle */
html body[class*="lagom-layout"] ul.nav.nav-tabs.nav-payment,
html body[class*="lagom-layout"] ul.nav-payment {
    flex-wrap: wrap !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* =========================================================
   PCM — Logo MasterCard sur les cartes : pas de fond blanc moche
   ========================================================= */
html body[class*="lagom-layout"] .cc-item .cc-item-icon {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body[class*="lagom-layout"] .cc-item .cc-item-icon svg,
html body[class*="lagom-layout"] .cc-item .cc-item-icon img,
html body[class*="lagom-layout"] .cc-item .cc-item-icon inline-svg {
    background: transparent !important;
    width: 56px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40)) !important;
}

/* =========================================================
   PCM — Logo MasterCard : visible immédiatement, pas de flash blanc
   ========================================================= */

/* Avant que mon JS run, cacher le SVG original (qui a fond blanc moche) */
html body[class*="lagom-layout"] .cc-item:not([data-pcm-cc-built]) .cc-item-icon,
html body[class*="lagom-layout"] .cc-item:not([data-pcm-cc-built]) .cc-item-icon * {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* Une fois mon JS a injecté le bon SVG (data-pcm-cc-built="1"), montre */
html body[class*="lagom-layout"] .cc-item[data-pcm-cc-built="1"] .cc-item-icon,
html body[class*="lagom-layout"] .cc-item[data-pcm-cc-built="1"] .cc-item-icon * {
    opacity: 1 !important;
}

/* Réaffirme : pas de fond blanc */
html body[class*="lagom-layout"] .cc-item .cc-item-icon,
html body[class*="lagom-layout"] .cc-item[data-pcm-cc-built] .cc-item-icon {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   PCM — Mobile : compact la card filtre /domains (plus de gros vide)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Card de filtre/recherche : remove gros padding/min-height */
    html body[class*="lagom-layout"] .page-clientarea-domains .panel.panel-default,
    html body[class*="lagom-layout"] .page-clientarea-domains .table-list-search,
    html body[class*="lagom-layout"] .page-clientareadomains .panel-default,
    html body[class*="lagom-layout"] .table-list-search-form,
    html body[class*="lagom-layout"] .page-clientarea-domains .panel-body,
    html body[class*="lagom-layout"] body.page-clientarea-domains .panel-body {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
        margin-bottom: 14px !important;
    }
    html body[class*="lagom-layout"] .page-clientarea-domains .panel.panel-default .panel-body {
        padding: 14px 14px !important;
    }
    
    /* Le tablelist (qui peut être vide) compact */
    html body[class*="lagom-layout"] .page-clientarea-domains .tablelist-empty,
    html body[class*="lagom-layout"] .table-list-empty {
        padding: 18px !important;
        min-height: 0 !important;
    }
    
    /* Search input compact */
    html body[class*="lagom-layout"] .page-clientarea-domains .search-field,
    html body[class*="lagom-layout"] .page-clientarea-domains input.form-control[name*="search"],
    html body[class*="lagom-layout"] .page-clientarea-domains .input-group {
        margin: 0 0 14px 0 !important;
    }
    
    /* Button "Ajouter nouveau" : compact */
    html body[class*="lagom-layout"] .page-clientarea-domains .panel-body .btn-primary,
    html body[class*="lagom-layout"] .page-clientarea-domains .btn-primary {
        margin: 0 !important;
    }
}

/* =========================================================
   PCM — Mobile : domains page filtre/search COMPACT (v2)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Cible TOUS les body classes possibles pour /clientarea?action=domains */
    html body[class*="page-clientareadomains"] .section-body,
    html body[class*="page-domains"] .section-body,
    html body[class*="page-clientarea-domains"] .section-body,
    html body.lagom-client-area .section--domain .section-body,
    html body.lagom-client-area [class*="domain"] .panel-default,
    html body.lagom-client-area .table-list-search,
    html body.lagom-client-area .panel-default {
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* La card recherche+bouton elle-même : pas de hauteur fantôme */
    html body.lagom-client-area .panel.panel-default .panel-body,
    html body.lagom-client-area .panel-default .panel-body,
    html body.lagom-client-area .section-body > .panel,
    html body.lagom-client-area .section-body > .panel > .panel-body {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Search input toujours visible en haut */
    html body.lagom-client-area .table-list-search-form,
    html body.lagom-client-area input[name="search"],
    html body.lagom-client-area input[placeholder*="mot-cl"],
    html body.lagom-client-area .input-group {
        order: 1 !important;
        margin: 0 !important;
    }
    
    /* Bouton "Ajouter nouveau" juste après */
    html body.lagom-client-area .panel-body > .btn,
    html body.lagom-client-area .panel-body > a.btn,
    html body.lagom-client-area .panel-body .btn-primary,
    html body.lagom-client-area .panel-body button.btn {
        order: 2 !important;
        margin: 0 !important;
    }
}

/* =========================================================
   PCM — Mobile : compact .main-header-top sur /domains
   (height: 451px → auto)
   ========================================================= */

@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .main-header-top,
    html body.lagom-client-area .main-header-top {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
    }
    html body[class*="lagom-layout"] .main-header-top .search-group,
    html body.lagom-client-area .main-header .search-group {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .main-header-top .search-field,
    html body.lagom-client-area .main-header .search-field {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Si .search-group est aussi un parent dans .search-field, compact */
    html body.lagom-client-area .search-field > .search-group {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }
    html body.lagom-client-area .main-header,
    html body.lagom-client-area .main-header > .container {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
    }
    /* Input search itself : compact + visible */
    html body.lagom-client-area #table-search,
    html body.lagom-client-area input.form-control#table-search {
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* =========================================================
   PCM — Mobile : espacement search/bouton + bouton full-width
   ========================================================= */

@media (max-width: 991.98px) {
    /* Espace entre search-field et le bouton */
    html body[class*="lagom-layout"] .main-header .search-field,
    html body.lagom-client-area .main-header-top .search-field {
        margin-bottom: 16px !important;
    }
    
    /* Bouton "Ajouter nouveau" : full-width comme l'input */
    html body[class*="lagom-layout"] .main-header-top .btn,
    html body[class*="lagom-layout"] .main-header-top a.btn,
    html body[class*="lagom-layout"] .main-header-top button.btn,
    html body[class*="lagom-layout"] .main-header-top .btn-primary,
    html body.lagom-client-area .main-header-top .btn {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* =========================================================
   PCM — Mobile domains : espace VISIBLE entre input et bouton
   ========================================================= */

@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .main-header-top .search-field,
    html body[class*="lagom-layout"] .main-header-top .search-group,
    html body[class*="lagom-layout"] .main-header .search-field,
    html body.lagom-client-area .main-header-top .search-field,
    html body.lagom-client-area .main-header-top .search-group {
        margin: 0 0 24px 0 !important;
    }
    html body[class*="lagom-layout"] .main-header-top .btn,
    html body[class*="lagom-layout"] .main-header-top a.btn,
    html body[class*="lagom-layout"] .main-header-top button.btn,
    html body.lagom-client-area .main-header-top .btn {
        margin-top: 24px !important;
    }
}

/* =========================================================
   PCM — Mobile /order/domain : table TLD lisible
   ========================================================= */

@media (max-width: 991.98px) {
    /* Dropdown "Popular" ne doit pas chevaucher la search */
    html body[class*="lagom-layout"] .tld-filters,
    html body[class*="lagom-layout"] .tld-filters-label {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 12px 0 !important;
        flex-wrap: wrap !important;
    }
    html body[class*="lagom-layout"] .search-group--tld {
        margin: 0 0 16px 0 !important;
    }

    /* TLD pricing table : transform en cards verticales */
    html body[class*="lagom-layout"] .tld-pricing,
    html body[class*="lagom-layout"] .tld-pricing.table-container {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }
    html body[class*="lagom-layout"] .tld-pricing thead {
        display: none !important;
    }
    html body[class*="lagom-layout"] .tld-pricing tbody {
        display: block !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .tld-pricing tr.tld-row {
        display: block !important;
        width: 100% !important;
        background: linear-gradient(180deg, rgba(15,29,63,0.55), rgba(10,22,49,0.65)) !important;
        border: 1px solid rgba(98, 152, 254, 0.18) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin: 0 0 10px 0 !important;
    }
    html body[class*="lagom-layout"] .tld-pricing td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 14px !important;
    }
    /* Première td : nom du TLD (.com, .eu) - mis en avant */
    html body[class*="lagom-layout"] .tld-pricing td:first-child {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        padding: 0 0 10px 0 !important;
        border-bottom: 1px solid rgba(98, 152, 254, 0.15) !important;
        margin-bottom: 8px !important;
        justify-content: flex-start !important;
    }
    html body[class*="lagom-layout"] .tld-pricing td .tld-name {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }
    /* Label (Enregistrer/Transférer/Renouvellement) : à gauche */
    html body[class*="lagom-layout"] .tld-pricing td .tld-label {
        color: #8fadc9 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        display: inline-block !important;
    }
    /* Prix : à droite */
    html body[class*="lagom-layout"] .tld-pricing td .tld-price {
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 2px !important;
    }
    html body[class*="lagom-layout"] .tld-pricing td .tld-price small {
        color: #8fadc9 !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        margin-left: 2px !important;
    }
    
    /* Bouton actions dans la ligne TLD : pleine largeur */
    html body[class*="lagom-layout"] .tld-pricing td .btn,
    html body[class*="lagom-layout"] .tld-pricing tr.tld-row .btn {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* =========================================================
   PCM — Mobile : Détails facturation - radio inline avec titre
   ========================================================= */

@media (max-width: 991.98px) {
    /* Label de la card billing : flex horizontal */
    html body[class*="lagom-layout"] .panel--billing .panel-heading label,
    html body[class*="lagom-layout"] .panel--billing > label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Radio styled : taille fixe, à gauche, NE PAS prendre toute la ligne */
    html body[class*="lagom-layout"] .panel--billing .radio-styled,
    html body[class*="lagom-layout"] .panel--billing input[type="radio"] + .radio-styled,
    html body[class*="lagom-layout"] .panel--billing .icheck-control + .radio-styled {
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        display: inline-block !important;
        position: relative !important;
        margin: 0 !important;
        order: 1 !important;
    }
    /* Check-content : à droite du radio */
    html body[class*="lagom-layout"] .panel--billing .check-content {
        flex: 1 1 auto !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    html body[class*="lagom-layout"] .panel--billing .check-content > span,
    html body[class*="lagom-layout"] .panel--billing .check-content span {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    /* Check-icon (EUR badge) : à droite, ne pas wrap */
    html body[class*="lagom-layout"] .panel--billing .check-icon {
        flex: 0 0 auto !important;
        order: 3 !important;
        margin-left: auto !important;
    }
    /* Input radio caché */
    html body[class*="lagom-layout"] .panel--billing input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   PCM — Mobile : FORCE radio-styled inline (specificity max)
   ========================================================= */

@media (max-width: 991.98px) {
    html body div.panel.panel-check.panel-default.panel--billing div.panel-heading.check label,
    html body div.panel.panel--billing div.panel-heading label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    html body div.panel.panel--billing div.panel-heading label > div.radio-styled,
    html body div.panel.panel--billing label > div.radio-styled,
    html body div.panel--billing .radio-styled {
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        display: inline-block !important;
        margin: 0 !important;
        order: 1 !important;
    }
    html body div.panel--billing label > div.check-content {
        flex: 1 1 auto !important;
        order: 2 !important;
        min-width: 0 !important;
    }
    html body div.panel--billing label > span.check-icon {
        flex: 0 0 auto !important;
        order: 3 !important;
        margin-left: auto !important;
    }
}

/* =========================================================
   PCM — Mobile : FORCE align-self: center sur radio billing
   ========================================================= */

@media (max-width: 991.98px) {
    html body div.panel.panel--billing label > div.radio-styled,
    html body div.panel--billing .radio-styled {
        align-self: center !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        vertical-align: middle !important;
    }
}

/* =========================================================
   PCM — Mobile : espace radio ↔ texte
   ========================================================= */

@media (max-width: 991.98px) {
    html body div.panel--billing .panel-heading label,
    html body div.panel--billing > label {
        gap: 16px !important;
    }
    html body div.panel--billing .radio-styled {
        margin-right: 6px !important;
    }
}

/* Override toute règle margin: 0 sur radio-styled (gap fallback) */
@media (max-width: 991.98px) {
    html body div.panel--billing .panel-heading label > div.radio-styled,
    html body div.panel--billing .radio-styled {
        margin: 0 16px 0 0 !important;
    }
}

/* =========================================================
   PCM — Mobile : plus d'espace radio + champs Créer un compte plus larges
   ========================================================= */

@media (max-width: 991.98px) {
    /* Plus d'espace radio ↔ texte (24px) */
    html body div.panel--billing .panel-heading label > div.radio-styled,
    html body div.panel--billing .radio-styled {
        margin: 0 24px 0 0 !important;
    }
    
    /* Form Créer un compte : panel et champs full-width */
    html body div.panel--billing .panel-collapse,
    html body div.panel--billing .panel-collapse .panel-body {
        padding: 16px 0 !important;
        width: 100% !important;
    }
    /* Sections d'informations + champs : remove col-sm-6 constraint */
    html body div.panel--billing .panel-collapse .col-sm-6,
    html body div.panel--billing .panel-collapse .col-md-6,
    html body div.panel--billing .panel-collapse [class*="col-"],
    html body div.panel--billing .panel-collapse .form-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 0 14px 0 !important;
    }
    /* Inputs full-width */
    html body div.panel--billing .panel-collapse input.form-control,
    html body div.panel--billing .panel-collapse select.form-control,
    html body div.panel--billing .panel-collapse textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Row : remove negative margins */
    html body div.panel--billing .panel-collapse .row {
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   PCM — Mobile : tout col-sm-6 dans panel--billing = 100%
   ========================================================= */

@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel--billing .col-sm-6,
    html body[class*="lagom-layout"] .panel--billing .col-md-6,
    html body[class*="lagom-layout"] .panel--billing [class*="col-sm-"],
    html body[class*="lagom-layout"] .panel--billing [class*="col-md-"],
    html body[class*="lagom-layout"] .panel--billing [class*="col-lg-"],
    html body[class*="lagom-layout"] .panel--billing .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 0 14px 0 !important;
    }
    html body[class*="lagom-layout"] .panel--billing .row {
        margin: 0 !important;
        display: block !important;
    }
}

/* =========================================================
   PCM — Mobile : /order/domain payment - fix overflow + CC cards
   ========================================================= */

@media (max-width: 991.98px) {
    /* Tabs payment : wrap au lieu d'overflow */
    html body[class*="lagom-layout"] ul.nav-payment {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
    }
    html body[class*="lagom-layout"] ul.nav-payment .nav-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] ul.nav-payment .nav-item .nav-link {
        width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding: 14px 12px !important;
        font-size: 14px !important;
    }

    /* CC card : layout vertical compact - éviter overlap titulaire/expiration */
    html body[class*="lagom-layout"] .cc-input-container {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .cc-list {
        margin: 0 0 14px 0 !important;
        width: 100% !important;
    }
    html body[class*="lagom-layout"] .cc-item {
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: 1.586 / 1 !important;
        padding: 18px 22px !important;
    }
    
    /* Titulaire en bas-gauche */
    html body[class*="lagom-layout"] .cc-item .cc-item-desc {
        bottom: 22px !important;
        left: 22px !important;
        right: auto !important;
        font-size: 11px !important;
        max-width: 50% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    html body[class*="lagom-layout"] .cc-item .cc-item-desc::before {
        font-size: 7px !important;
        margin-bottom: 2px !important;
    }
    
    /* Expiration en bas-droite (PAS centré qui chevauche) */
    html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
        bottom: 22px !important;
        right: 22px !important;
        left: auto !important;
        transform: none !important;
        font-size: 11px !important;
        text-align: right !important;
    }
    html body[class*="lagom-layout"] .cc-item .cc-item-expiry::before {
        font-size: 7px !important;
        margin-bottom: 2px !important;
    }
    
    /* Card number : font-size réduit pour tenir */
    html body[class*="lagom-layout"] .cc-item .pcm-cc-number {
        bottom: 78px !important;
        left: 22px !important;
        right: 22px !important;
        font-size: 15px !important;
        gap: 10px !important;
    }
    
    /* Brand top-left + Logo top-right : compact */
    html body[class*="lagom-layout"] .cc-item .cc-item-name,
    html body[class*="lagom-layout"] .cc-item .pcm-cc-brand {
        top: 18px !important;
        left: 22px !important;
        right: 80px !important;
        font-size: 10px !important;
    }
    html body[class*="lagom-layout"] .cc-item .cc-item-icon {
        top: 18px !important;
        right: 22px !important;
    }
    html body[class*="lagom-layout"] .cc-item .cc-item-icon svg {
        width: 48px !important;
        height: 30px !important;
    }
    
    /* Chip : taille adaptée */
    html body[class*="lagom-layout"] .cc-item .cc-item-checkbox {
        top: 50px !important;
        left: 22px !important;
        width: 42px !important;
        height: 32px !important;
    }
}

/* =========================================================
   PCM — Mobile order : SPECIFICITY MAX (override desktop)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Tabs : VERTICAL forcé + specificity max */
    html body[class*="lagom-layout"] .app-main-order ul.nav.nav-tabs.nav-payment,
    html body[class*="lagom-layout"] body.app-main-order ul.nav-payment,
    html body[class*="lagom-layout"] .panel-check--payments ul.nav-payment {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    html body[class*="lagom-layout"] .nav-payment > li,
    html body[class*="lagom-layout"] .nav-payment .nav-item {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    html body[class*="lagom-layout"] .nav-payment .nav-item .nav-link {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* CC card : positions ABSOLUES strictes (specificity max) */
    html body[class*="lagom-layout"] div.cc-list label.cc-item div.cc-item-desc,
    html body[class*="lagom-layout"] .cc-item .cc-item-desc {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        font-size: 11px !important;
        max-width: 45% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    html body[class*="lagom-layout"] div.cc-list label.cc-item div.cc-item-expiry,
    html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        font-size: 11px !important;
        max-width: 45% !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }
    
    /* "VALID THRU" et "TITULAIRE" labels micro */
    html body[class*="lagom-layout"] .cc-item .cc-item-desc::before,
    html body[class*="lagom-layout"] .cc-item .cc-item-expiry::before,
    html body[class*="lagom-layout"] .cc-item .pcm-cc-thru {
        font-size: 7px !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    
    /* Padding-right de la carte pour ne pas tronquer expiration */
    html body[class*="lagom-layout"] .cc-item {
        padding-bottom: 70px !important;
    }
}
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .cc-item .cc-item-desc {
        width: 45% !important;
    }
    html body[class*="lagom-layout"] .cc-item .cc-item-expiry {
        width: 45% !important;
    }
}

/* =========================================================
   PCM — Mobile order/domain : sections full-width (PCM)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Container Bootstrap : full width */
    html body[class*="lagom-layout"] .app-main-order .container,
    html body[class*="lagom-layout"] .app-main-order .container-fluid,
    html body[class*="lagom-layout"] body.app-main-order .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Sections : full width + padding compact */
    html body[class*="lagom-layout"] .app-main-order .section,
    html body[class*="lagom-layout"] .app-main-order .section-body,
    html body[class*="lagom-layout"] .app-main-order .section--config-options,
    html body[class*="lagom-layout"] .app-main-order .section--domain,
    html body[class*="lagom-layout"] .app-main-order .section--billing-details,
    html body[class*="lagom-layout"] .app-main-order .section--payment-details,
    html body[class*="lagom-layout"] .app-main-order .section--addons {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
    }
    
    /* Main content area : élargie */
    html body[class*="lagom-layout"] .app-main-order .main-content,
    html body[class*="lagom-layout"] .app-main-order .main-body,
    html body[class*="lagom-layout"] .app-main-order .app-main {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Panel-group + panel : pleine largeur */
    html body[class*="lagom-layout"] .app-main-order .panel-group,
    html body[class*="lagom-layout"] .app-main-order .panel,
    html body[class*="lagom-layout"] .app-main-order .panel-default,
    html body[class*="lagom-layout"] .app-main-order .panel-check,
    html body[class*="lagom-layout"] .app-main-order .panel--billing,
    html body[class*="lagom-layout"] .app-main-order .panel-check--payments {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Rows : marge 0 + display block */
    html body[class*="lagom-layout"] .app-main-order .row,
    html body[class*="lagom-layout"] .app-main-order .row-eq-height {
        margin: 0 !important;
        display: block !important;
    }
    
    /* Tous les col-* : 100% width */
    html body[class*="lagom-layout"] .app-main-order [class*="col-sm-"],
    html body[class*="lagom-layout"] .app-main-order [class*="col-md-"],
    html body[class*="lagom-layout"] .app-main-order [class*="col-lg-"],
    html body[class*="lagom-layout"] .app-main-order [class*="col-xl-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Sidebar order summary : devient pleine largeur en-bas */
    html body[class*="lagom-layout"] .app-main-order .main-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
    }
    
    /* Body padding global */
    html body[class*="lagom-layout"].app-main-order,
    html body.app-main-order {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   PCM — Mobile : reset order DESC/EXP + dropdown addons clean
   ========================================================= */

@media (max-width: 991.98px) {
    /* Reset order pour DESC (gauche) et EXP (droite) dans wrapper flex */
    html body[class*="lagom-layout"] .pcm-cc-footer .cc-item-desc {
        order: 1 !important;
    }
    html body[class*="lagom-layout"] .pcm-cc-footer .cc-item-expiry {
        order: 2 !important;
    }
    
    /* (Addons dropdown CSS supprimé - cassait le bouton split) */
}

/* =========================================================
   PCM — Mobile addon dropdown : simple polish, ne casse pas bouton
   ========================================================= */
@media (max-width: 991.98px) {
    /* Dropdown menu : juste styling (laisse Bootstrap positionner) */
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu {
        background: rgba(8, 19, 46, 0.98) !important;
        border: 1px solid rgba(98, 152, 254, 0.30) !important;
        border-radius: 10px !important;
        padding: 4px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50) !important;
        min-width: 240px !important;
        z-index: 1000 !important;
    }
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a {
        color: #c4e3ff !important;
        padding: 10px 14px !important;
        border-radius: 6px !important;
    }
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a:hover {
        background: rgba(25, 102, 255, 0.18) !important;
        color: #ffffff !important;
    }
    /* Wrap labels long (Basic suite, PCM Mail suite +) */
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a .text {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Price styling green */
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu .price,
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu .price-addon {
        color: #5af09a !important;
        font-weight: 700 !important;
        margin-left: 8px !important;
    }
}

/* =========================================================
   PCM — Dropdown addons (structure iCheck + price) - layout propre
   ========================================================= */

/* Menu container */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu,
html body[class*="lagom-layout"] .dropdown-menu.show {
    background: rgba(8, 19, 46, 0.98) !important;
    border: 1px solid rgba(98, 152, 254, 0.30) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50) !important;
    min-width: 280px !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 1050 !important;
}

/* Li - block */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Link wrapper - block reset */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a.radio,
html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* Label = flex container */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu > li > a > label.radio-label,
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
}
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label:hover {
    background: rgba(25, 102, 255, 0.15) !important;
}
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label.checked,
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label.active {
    background: rgba(25, 102, 255, 0.22) !important;
}

/* Radio styled circle - 18px à gauche */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label .radio-styled {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    position: relative !important;
    display: block !important;
    border: 2px solid rgba(98, 152, 254, 0.45) !important;
    border-radius: 50% !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label.checked .radio-styled {
    border-color: #1966FF !important;
    background: radial-gradient(circle, #1966FF 0%, #1966FF 40%, transparent 50%) !important;
}

/* Cacher l'iCheck helper (background blanc qui pollue) */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .iCheck-helper {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
}
html body[class*="lagom-layout"] .panel-addon .dropdown-menu input[type="radio"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
}

/* Text au milieu - flex 1 */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label .text {
    flex: 1 1 auto !important;
    color: #c4e3ff !important;
    font-size: 14px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
}
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label.checked .text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Price à droite - badge vert */
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label .price,
html body[class*="lagom-layout"] .panel-addon .dropdown-menu .radio-label .price-addon {
    flex: 0 0 auto !important;
    color: #5af09a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    background: rgba(90, 240, 154, 0.12) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    border: 1px solid rgba(90, 240, 154, 0.25) !important;
}

/* =========================================================
   PCM — Fix bouton addon "GRATUIT !" tronqué (width 36px → auto)
   ========================================================= */

html body[class*="lagom-layout"] .panel-addon .btn-primary,
html body[class*="lagom-layout"] .panel-addon .btn-group .btn-primary,
html body[class*="lagom-layout"] .panel-addon .panel-actions .btn-primary,
html body[class*="lagom-layout"] .panel-addon button.btn.btn-primary {
    width: auto !important;
    min-width: 120px !important;
    overflow: visible !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-primary .btn-text {
    display: inline-block !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
}
/* Btn-group flex pour bien partager l'espace */
html body[class*="lagom-layout"] .panel-addon .btn-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-group > .btn:first-child,
html body[class*="lagom-layout"] .panel-addon .btn-group > .btn-primary {
    flex: 1 1 auto !important;
}

/* =========================================================
   PCM — Bouton addon : largeur contenue dans la card
   ========================================================= */

html body[class*="lagom-layout"] .panel-addon .panel-actions,
html body[class*="lagom-layout"] .panel-addon .panel-actions-buttons,
html body[class*="lagom-layout"] .panel-addon .panels-actions {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-group {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-primary,
html body[class*="lagom-layout"] .panel-addon .btn-group .btn-primary {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
}
/* Si btn-group dépasse, wrap normal */
html body[class*="lagom-layout"] .panel-addon .btn-group {
    flex-wrap: wrap !important;
}
/* Sur mobile, btn-primary peut être pleine largeur */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-addon .btn-group {
        width: 100% !important;
        display: flex !important;
    }
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn-primary {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn:not(.btn-primary) {
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   PCM — Bouton addon : reset position, garde dans la card
   ========================================================= */

html body[class*="lagom-layout"] .panel-addon .panel-actions,
html body[class*="lagom-layout"] .panel-addon .panel-actions-buttons {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
}
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-addon .panel-actions,
    html body[class*="lagom-layout"] .panel-addon .panel-actions-buttons {
        position: relative !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .panel-addon .btn-group {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
    }
}

/* =========================================================
   PCM — RESET TOTAL btn addon (annule mes modifs récentes)
   ========================================================= */

html body[class*="lagom-layout"] .panel-addon .panel-actions,
html body[class*="lagom-layout"] .panel-addon .panel-actions-buttons,
html body[class*="lagom-layout"] .panel-addon .btn-group,
html body[class*="lagom-layout"] .panel-addon .btn,
html body[class*="lagom-layout"] .panel-addon .btn-primary,
html body[class*="lagom-layout"] .panel-addon .btn-text {
    all: revert !important;
}

/* Juste un styling minimal sans casser */
html body[class*="lagom-layout"] .panel-addon .btn-primary {
    background: linear-gradient(135deg, #1966FF, #009AFF) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
}

/* =========================================================
   PCM — Mobile addon cards : compact + bouton premium
   ========================================================= */

@media (max-width: 991.98px) {
    /* Reduce empty space dans card addon */
    html body[class*="lagom-layout"] .panel-addon,
    html body[class*="lagom-layout"] .panel--addonBox {
        min-height: 0 !important;
        height: auto !important;
    }
    html body[class*="lagom-layout"] .panel-addon .panel-body {
        padding: 18px 20px !important;
        min-height: 0 !important;
    }
    html body[class*="lagom-layout"] .panel-addon .panel-options,
    html body[class*="lagom-layout"] .panel-addon .panel-actions {
        margin: 12px 0 0 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    /* Image addon : compact, pas de margin-top excessive */
    html body[class*="lagom-layout"] .panel-addon .panel-icon {
        margin-top: 16px !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 180px !important;
    }
    html body[class*="lagom-layout"] .panel-addon .panel-icon img {
        max-height: 180px !important;
        object-fit: contain !important;
    }
}

/* Bouton "GRATUIT!" / "Choisir une option" - design premium */
html body[class*="lagom-layout"] .panel-addon .btn-primary,
html body[class*="lagom-layout"] .panel-addon .panel-actions .btn-primary {
    background: linear-gradient(135deg, #1966FF 0%, #009AFF 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 14px rgba(25, 102, 255, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(25, 102, 255, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
/* Bouton X de suppression : style cohérent */
html body[class*="lagom-layout"] .panel-addon .btn-group > .btn:not(.btn-primary) {
    background: linear-gradient(135deg, rgba(25, 102, 255, 0.30), rgba(0, 154, 255, 0.18)) !important;
    border: 1px solid rgba(98, 152, 254, 0.40) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    margin-left: 6px !important;
    transition: all 0.2s ease !important;
}
html body[class*="lagom-layout"] .panel-addon .btn-group > .btn:not(.btn-primary):hover {
    background: linear-gradient(135deg, rgba(25, 102, 255, 0.45), rgba(0, 154, 255, 0.25)) !important;
}

/* =========================================================
   PCM — Force padding bouton + margin compact (specificity max)
   ========================================================= */

html body.app-main-order .panel.panel-addon button.btn.btn-primary,
html body.app-main-order .panel.panel-addon .btn-group button.btn-primary,
html body[class*="lagom-layout"] .app-main-order .panel-addon button.btn-primary {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
}

@media (max-width: 991.98px) {
    html body.app-main-order .panel.panel-addon .panel-icon,
    html body[class*="lagom-layout"] .app-main-order .panel-addon div.panel-icon {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }
    html body.app-main-order .panel.panel-addon .panel-body,
    html body[class*="lagom-layout"] .app-main-order .panel.panel-addon .panel-body {
        padding-bottom: 12px !important;
    }
}

/* =========================================================
   PCM — Bouton addon + spacing : body.lagom-layout-* (vrais)
   ========================================================= */

html body.lagom-layout-left .panel.panel-addon button.btn.btn-primary,
html body.lagom-layout-left .panel.panel-addon .btn-group button.btn-primary,
html body[class*="lagom-layout"] .panel.panel-addon button.btn-primary,
html body.lagom-futuristic .panel.panel-addon .btn-primary {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
}

@media (max-width: 991.98px) {
    html body.lagom-layout-left .panel.panel-addon .panel-icon,
    html body[class*="lagom-layout"] .panel.panel-addon div.panel-icon,
    html body.lagom-futuristic .panel-addon .panel-icon {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }
    html body.lagom-layout-left .panel.panel-addon .panel-body,
    html body[class*="lagom-layout"] .panel.panel-addon .panel-body {
        padding-bottom: 12px !important;
        min-height: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body.lagom-layout-left .panel.panel-addon {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* =========================================================
   PCM — Mobile : cards addon auto-height, pas de stretching forcé
   ========================================================= */

@media (max-width: 991.98px) {
    /* Row-eq-height : annule stretch sur mobile */
    html body[class*="lagom-layout"] .row-eq-height,
    html body[class*="lagom-layout"] .row-eq-height-xs,
    html body[class*="lagom-layout"] .row--addons {
        align-items: flex-start !important;
        display: block !important;
    }
    html body[class*="lagom-layout"] .row-eq-height > [class*="col-"],
    html body[class*="lagom-layout"] .row--addons > [class*="col-"] {
        height: auto !important;
        align-self: flex-start !important;
        margin-bottom: 14px !important;
    }
    
    /* Card panel-addon : pas de stretch, height auto, flex-grow 0 sur body */
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body[class*="lagom-layout"] .panel--addonBox {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
        flex-direction: column !important; /* annule column-reverse */
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-body,
    html body[class*="lagom-layout"] .panel--addonBox .panel-body {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-icon,
    html body[class*="lagom-layout"] .panel--addonBox .panel-icon {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-options {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================================
   PCM — Mobile : btn GRATUIT pleine largeur + 0 gap entre btn et X + 0 bas
   ========================================================= */

@media (max-width: 991.98px) {
    /* Btn-group : pleine largeur, 0 gap entre items */
    html body[class*="lagom-layout"] .panel-addon .btn-group,
    html body[class*="lagom-layout"] .panel-addon .panel-actions .btn-group {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0 !important;
    }
    /* Bouton GRATUIT : flex 1 (prend tout l'espace) */
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn-primary {
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        border-radius: 10px 0 0 10px !important;
    }
    /* Bouton X : fixe à droite, collé au GRATUIT */
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn:not(.btn-primary) {
        flex: 0 0 auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        border-radius: 0 10px 10px 0 !important;
    }
    
    /* Card panel-addon : aucun padding-bottom inutile */
    html body[class*="lagom-layout"] .panel.panel-addon,
    html body[class*="lagom-layout"] .panel--addonBox {
        padding-bottom: 0 !important;
    }
    html body[class*="lagom-layout"] .panel.panel-addon .panel-body {
        padding-bottom: 18px !important;
    }
    /* Cache tout panel-options/actions ou body avec hauteur excessive */
    html body[class*="lagom-layout"] .panel-addon > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   PCM — Mobile addon : hauteur bouton STRICTE 44px
   ========================================================= */

@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-addon .btn-group {
        height: 44px !important;
        max-height: 44px !important;
        align-items: stretch !important;
    }
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn,
    html body[class*="lagom-layout"] .panel-addon .btn-group > .btn-primary {
        height: 44px !important;
        max-height: 44px !important;
        min-height: 44px !important;
    }
    /* Panel-actions container : pas de stretching vertical */
    html body[class*="lagom-layout"] .panel-addon .panel-actions,
    html body[class*="lagom-layout"] .panel-addon .panel-options {
        height: auto !important;
        max-height: 60px !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   PCM — Mobile : dropdown contenu dans card (pas hors)
   ========================================================= */

@media (max-width: 991.98px) {
    /* Dropdown menu : positioned proper, contenu dans card */
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 100 !important;
    }
    /* Cache "Aucun" si pas le dropdown ouvert */
    html body[class*="lagom-layout"] .panel-addon .dropdown-menu:not(.show):not(.in) {
        display: none !important;
        visibility: hidden !important;
    }
    /* Container parent : overflow visible pour permettre dropdown */
    html body[class*="lagom-layout"] .panel-addon .panel-actions,
    html body[class*="lagom-layout"] .panel-addon .panel-options {
        position: relative !important;
        overflow: visible !important;
    }
    /* Pas de débordement horizontal */
    html body[class*="lagom-layout"] .panel-addon {
        overflow: hidden !important;
    }
}

/* =========================================================
   PCM — 3 fixes : dropdown caché / menu mobile collapsed / table compact
   ========================================================= */

@media (max-width: 991.98px) {
    /* Fix 1 : Dropdown "Aucun" caché par défaut sauf aria-expanded ou .show */
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu {
        display: none !important;
    }
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu.show,
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu[aria-expanded="true"],
    html body[class*="lagom-layout"] .panel-addon .open > ul.dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon .dropdown.open > ul.dropdown-menu {
        display: block !important;
    }
    
    /* Fix 2 : Mobile menu drawer - submenus collapsed par défaut */
    html body[class*="lagom-layout"] #main-menu .submenu,
    html body[class*="lagom-layout"] #main-menu .sub-menu,
    html body[class*="lagom-layout"] #main-menu ul ul,
    html body[class*="lagom-layout"] .navbar-mobile .submenu,
    html body[class*="lagom-layout"] .lagom-mobile-menu .submenu,
    html body[class*="lagom-layout"] .menu-mobile .submenu {
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    html body[class*="lagom-layout"] #main-menu .open > .submenu,
    html body[class*="lagom-layout"] #main-menu .active > .submenu,
    html body[class*="lagom-layout"] #main-menu li.expanded > .submenu,
    html body[class*="lagom-layout"] #main-menu .show > .submenu {
        display: block !important;
        max-height: 1000px !important;
    }
    
    /* Fix 3 : /clientarea services - réduire espace entre filter et table */
    html body[class*="lagom-layout"] body.lagom-client-area .dataTables_wrapper,
    html body[class*="lagom-layout"] .dataTables_wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    html body[class*="lagom-layout"] .dataTables_length,
    html body[class*="lagom-layout"] .dataTables_filter,
    html body[class*="lagom-layout"] .dataTables_info {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    html body[class*="lagom-layout"] .table-responsive,
    html body[class*="lagom-layout"] table.dataTable {
        margin: 0 !important;
        min-height: 0 !important;
    }
    html body[class*="lagom-layout"] body.lagom-client-area .panel-body,
    html body[class*="lagom-layout"] body.page-clientarea .panel-body {
        min-height: 0 !important;
        padding: 12px 16px !important;
    }
}

/* =========================================================
   PCM — 3 fixes finaux ciblés
   ========================================================= */

/* Fix 1 : dropdown order - force CLOSED par défaut (ignore .show pré-existant) */
@media (max-width: 991.98px) {
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu.show {
        display: none !important;
        visibility: hidden !important;
    }
    /* Ouvre uniquement si parent .dropdown a .open ou .show explicite */
    html body[class*="lagom-layout"] .panel-addon .dropdown.open > ul.dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon .dropdown.show > ul.dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon .panel-actions.open > ul.dropdown-menu {
        display: block !important;
        visibility: visible !important;
    }
}

/* Fix 2 : Mobile drawer - submenus collapsed (vrais sélecteurs Lagom drawer) */
@media (max-width: 991.98px) {
    /* Cible .lagom-mobile-menu et son contenu de submenu */
    html body[class*="lagom-layout"] .mobile-menu .has-submenu > ul,
    html body[class*="lagom-layout"] .mobile-menu .has-children > ul,
    html body[class*="lagom-layout"] .lagom-mobile-menu li > ul,
    html body[class*="lagom-layout"] body.menu-open #main-menu li ul:not(.dropdown-menu) {
        display: none !important;
        max-height: 0 !important;
    }
    html body[class*="lagom-layout"] .mobile-menu .has-submenu.open > ul,
    html body[class*="lagom-layout"] .mobile-menu .has-submenu.expanded > ul,
    html body[class*="lagom-layout"] body.menu-open #main-menu li.open ul,
    html body[class*="lagom-layout"] body.menu-open #main-menu li.expanded ul {
        display: block !important;
        max-height: 1000px !important;
    }
}

/* Fix 3 : clientarea products page - réduire espace */
@media (max-width: 991.98px) {
    html body.page-clientareaproducts .panel,
    html body.page-clientareaproducts .panel-body,
    html body.page-clientareaproducts .table-list-search,
    html body.page-clientareaproducts .section-body {
        min-height: 0 !important;
        height: auto !important;
        padding: 12px !important;
    }
    html body.page-clientareaproducts .main-header-top,
    html body.page-clientareaproducts .search-group,
    html body.page-clientareaproducts .search-field {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }
    /* Container datatable compact */
    html body.page-clientareaproducts .dataTables_wrapper,
    html body.page-clientareaproducts .dataTables_length,
    html body.page-clientareaproducts table.dataTable thead {
        margin: 0 0 8px 0 !important;
        min-height: 0 !important;
    }
}

/* =========================================================
   PCM — FORCE hide addon dropdown on mobile (bug #1)
   Override absolu, en dernier dans la cascade pour battre .show
   ========================================================= */
@media (max-width: 991.98px) {
    /* Anchors pour positionnement absolu du dropdown ouvert */
    html body[class*="lagom-layout"] .panel-addon,
    html body[class*="lagom-layout"] .panel-addon .panel-body {
        position: relative !important;
    }

    /* HIDDEN par défaut */
    html body[class*="lagom-layout"] .panel-addon .panel-actions .dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon .btn-group .dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu,
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu.show {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* OPEN : positionné absolu sous le panel-body, full-width */
    html body[class*="lagom-layout"] .panel-addon .panel-actions .dropdown-menu.pcm-mobile-open,
    html body[class*="lagom-layout"] .panel-addon .btn-group .dropdown-menu.pcm-mobile-open,
    html body[class*="lagom-layout"] .panel-addon ul.dropdown-menu.pcm-mobile-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: calc(100% + 6px) !important;
        bottom: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 1050 !important;
    }
}

/* ====================================================================
   PRODUCTDETAILS — Barre latérale PLATE (calquée sur le design "manage", image #5)
   Scope strict: page-clientareaproductdetails -> n'affecte PAS les barres
   domaine / tickets / dashboard (qui gardent leur encadré volontaire).
   Base Lagom donne un border/bg/box-shadow à .panel ; on l'efface ici pour
   retrouver le rendu plat du thème futuristic + on corrige le débordement
   du titre "Actions".
   ==================================================================== */
/* Groupes : aucun encadré, fond transparent, espace généreux entre eux */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    overflow: visible !important;
}
/* En-tête : titre gras blanc, sans fond, de l'air avant les liens */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .panel-heading {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
}
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .panel-title,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar h5.panel-title {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}
/* Chevron de repli masqué : la barre reste toujours ouverte (comme image #5) */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .panel-minimise,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .panel-title > i.fa-chevron-up,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .panel-title > i.fa-chevron-down {
    display: none !important;
}
/* Conteneur liens : transparent, toujours déplié, jamais collapse */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .panel-collapse,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .list-group {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
/* Liens : icône + texte alignés, plats, espacés ; annule le flex-basis 33% de Lagom */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar a.list-group-item {
    flex-basis: auto !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: #e7eefb !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    min-height: 0 !important;
    transition: background .15s ease, color .15s ease !important;
}
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item:hover {
    background: rgba(98,152,254,0.10) !important;
    color: #ffffff !important;
}
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item.active {
    background: rgba(25,102,255,0.16) !important;
    color: #ffffff !important;
}
/* Icônes des liens : bleu clair, gabarit fixe pour aligner les libellés */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item > i,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item svg {
    color: #6298fe !important;
    font-size: 18px !important;
    width: 22px !important;
    height: auto !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
/* Badge éventuel (compteur) discret à droite */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group-item .badge {
    margin-left: auto !important;
}

/* ====================================================================
   ANTI-BOX EXHAUSTIF — efface toute décoration (bordure / fond / image de
   fond / ombre / outline) sur le panneau Actions ET tous ses conteneurs
   internes, peu importe lequel portait l'encadré. Spécificité max via les
   classes réelles du panneau (.panel-default.panel-actions).
   ==================================================================== */
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar.panel-default,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar.panel-default.panel-actions,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .panel-heading,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .panel-collapse,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .panel-collapse,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar .list-group,
html body[class*="page-clientareaproductdetails"] .panel.panel-sidebar > .panel-body {
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* ====================================================================
   FIX autofill Chrome (2026-06-08) : un mot de passe enregistré rempli
   par Chrome force un fond clair illisible sur le thème sombre. Le fond
   :-webkit-autofill n'est pas overridable directement → on le masque avec
   un box-shadow inset sombre + texte clair. Scopé modales + champs du thème.
   ==================================================================== */
html body .modal input:-webkit-autofill,
html body .modal input:-webkit-autofill:hover,
html body .modal input:-webkit-autofill:focus,
html body .modal input:-webkit-autofill:active,
html body[class*="lagom-layout"] input[type="password"]:-webkit-autofill,
html body[class*="lagom-layout"] input[type="password"]:-webkit-autofill:hover,
html body[class*="lagom-layout"] input[type="password"]:-webkit-autofill:focus,
html body[class*="lagom-layout"] .pcm-ox-backup-modal-card input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0c1838 inset !important;
            box-shadow: 0 0 0 1000px #0c1838 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border-radius: inherit !important;
    transition: background-color 99999s ease-in-out 0s !important;
}
/* Spécificité ID requise : les modales OX posent
   "#modalSetPassword .modal-body input.form-control { box-shadow:none !important }"
   qui écrasait le trick ci-dessus. On cible les ID + :-webkit-autofill pour primer. */
html body #modalSetPassword .modal-body input.form-control:-webkit-autofill,
html body #modalSetPassword .modal-body input.form-control:-webkit-autofill:hover,
html body #modalSetPassword .modal-body input.form-control:-webkit-autofill:focus,
html body #modalSetPassword .modal-body input.form-control:-webkit-autofill:active,
html body #modalManageAccount .modal-body input.form-control:-webkit-autofill,
html body #modalManageAccount .modal-body input.form-control:-webkit-autofill:hover,
html body #modalManageAccount .modal-body input.form-control:-webkit-autofill:focus,
html body #modalManageAccount .modal-body input.form-control:-webkit-autofill:active,
html body #modalAddAccount .modal-body input.form-control:-webkit-autofill,
html body #modalAddAccount .modal-body input.form-control:-webkit-autofill:hover,
html body #modalAddAccount .modal-body input.form-control:-webkit-autofill:focus,
html body #modalAddAccount .modal-body input.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0a1630 inset !important;
            box-shadow: 0 0 0 1000px #0a1630 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-in-out 0s !important;
}

/* ====================================================================
   FIX alerte d'erreur vide (2026-06-08) : la règle ligne 14562
   "html body .alert.alert-lagom.alert-danger { display:flex !important }"
   forçait l'affichage des alertes danger MÊME masquées (.hidden), d'où
   l'encadré rouge vide en haut des modales. On redonne la priorité à .hidden.
   ==================================================================== */
html body .alert.hidden,
html body .alert.alert-lagom.hidden,
html body .alert.alert-lagom.alert-danger.hidden,
html body .alert.alert-lagom.alert-danger.modal-error.hidden,
html body .alert.modal-error.hidden,
html body .modal-error.hidden {
    display: none !important;
}

/* ====================================================================
   Modale mot de passe (OX) : œil afficher/masquer sur les champs password
   (injecté par JS dans pcm-redesign.js). Bouton "Générer" masqué côté JS.
   ==================================================================== */
html body .pcm-eye-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}
html body .pcm-eye-btn {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #6298fe !important;
    border-radius: 8px !important;
    transition: color .15s, background .15s !important;
    z-index: 3 !important;
}
html body .pcm-eye-btn:hover {
    color: #ffffff !important;
    background: rgba(98,152,254,0.15) !important;
}
html body .pcm-eye-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* ====================================================================
   Polish modales OX (Définir mot de passe / Gérer le compte / Ajouter)
   ==================================================================== */
html body #modalSetPassword .modal-content,
html body #modalManageAccount .modal-content,
html body #modalAddAccount .modal-content {
    background: linear-gradient(160deg, #0f1d3f 0%, #0a1631 100%) !important;
    border: 1px solid rgba(98,152,254,0.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px -22px rgba(0,0,0,0.65) !important;
    overflow: hidden !important;
}
html body #modalSetPassword .modal-header,
html body #modalManageAccount .modal-header,
html body #modalAddAccount .modal-header {
    position: relative !important;
    border-bottom: 1px solid rgba(98,152,254,0.12) !important;
    padding: 20px 60px 20px 24px !important;
    background: transparent !important;
}
html body #modalSetPassword .modal-title,
html body #modalManageAccount .modal-title,
html body #modalAddAccount .modal-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}
/* Bouton fermer : carré arrondi propre, top-right, ne chevauche plus le titre */
html body #modalSetPassword .modal-header .close,
html body #modalSetPassword .modal-header [data-dismiss="modal"],
html body #modalManageAccount .modal-header .close,
html body #modalManageAccount .modal-header [data-dismiss="modal"],
html body #modalAddAccount .modal-header .close,
html body #modalAddAccount .modal-header [data-dismiss="modal"] {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(0,8,30,0.45) !important;
    border: 1px solid rgba(98,152,254,0.18) !important;
    color: #9fb6e8 !important;
    opacity: 1 !important;
    font-size: 18px !important;
    text-shadow: none !important;
    transition: background .15s, color .15s, border-color .15s !important;
}
html body #modalSetPassword .modal-header .close:hover,
html body #modalManageAccount .modal-header .close:hover,
html body #modalAddAccount .modal-header .close:hover {
    background: rgba(239,68,68,0.18) !important;
    color: #ffffff !important;
    border-color: rgba(239,68,68,0.40) !important;
}
html body #modalSetPassword .modal-body,
html body #modalManageAccount .modal-body,
html body #modalAddAccount .modal-body {
    padding: 22px 24px !important;
}
/* Champs : focus bleu net */
html body #modalSetPassword .modal-body input.form-control:focus,
html body #modalManageAccount .modal-body input.form-control:focus,
html body #modalAddAccount .modal-body input.form-control:focus {
    border-color: rgba(0,154,255,0.60) !important;
    box-shadow: 0 0 0 3px rgba(0,154,255,0.15) !important;
    outline: 0 !important;
}
/* Labels : eyebrow bleu clair, lisible */
html body #modalSetPassword .modal-body label,
html body #modalManageAccount .modal-body label,
html body #modalAddAccount .modal-body label {
    color: #7aa6ff !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 8px !important;
}
/* Pied de page : filet + espacement boutons */
html body #modalSetPassword .modal-footer,
html body #modalManageAccount .modal-footer,
html body #modalAddAccount .modal-footer {
    border-top: 1px solid rgba(98,152,254,0.12) !important;
    padding: 18px 24px !important;
    gap: 10px !important;
}