/* Shop / checkout — extracted from home/index.php (audit 03 §4.6/§9.6/§10 : no more !important). */

#plans-modal.active,
#checkout-modal.active { display: flex; }

.plan-card {
    transition: all var(--transition-normal);
}

/* Spécificité renforcée pour éviter le !important (audit 03 §9.6). */
.plan-card.plan-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.02);
}

/* Shop/order dark overlay (audit 03 §10). */
.checkout-overlay {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Order page components (audit 03 §4.10). */
.order-card {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.key-box {
    font-family: var(--font-mono);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    word-break: break-all;
    user-select: all;
}
.copy-btn {
    cursor: pointer;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background var(--transition-fast);
}
.copy-btn:hover { background: rgba(var(--primary-rgb), 0.2); }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pulse-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    animation: fadeIn 1s ease infinite alternate;
}
/* ═══════════════════════════════════════════════════════════
   Shop /shop page — refonte design system + conversion tactics
   ═══════════════════════════════════════════════════════════ */

/* Padding-top pour clear la nav fixe (hauteur ≈ 88-108px selon breakpoint). */
.shop-page-wrap {
    padding-top: 100px;
    position: relative;
    /* PAS d'isolation:isolate ici — on veut que le halo puisse passer
       DERRIÈRE la topbar via un pseudo fixed en dehors du contexte. */
}
@media (min-width: 768px) {
    .shop-page-wrap { padding-top: 120px; }
}
/* Halo violet FIXED collé en top du viewport, présent dans TOUTE la
   zone header + hero. En étant fixed (pas absolute), il ne dépend
   pas du wrap : le body tout entier reçoit ce halo au top, donc il
   passe derrière la topbar sans coupure. Le gradient vertical va de
   transparent (tout en haut, blend avec body) vers son max autour de
   la pill puis se dilue en descendant. */
.shop-page-wrap::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 360px;
    background: linear-gradient(
        to bottom,
        rgba(var(--primary-rgb), 0.03) 0%,
        rgba(var(--primary-rgb), 0.09) 25%,
        rgba(var(--primary-rgb), 0.09) 45%,
        rgba(var(--primary-rgb), 0.04) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
/* La nav pill à 80% opaque bloquait le violet derrière → hard cutoff
   à la sortie de la pill. On la passe à 55% dans les pages qui ont
   shop-page-wrap, gardant le glass effect mais laissant l'ambient
   passer à travers pour lisser la transition. */
body:has(.shop-page-wrap) header .glass-nav {
    background: rgba(12, 12, 14, 0.55);
}

/* Hero */
.shop-hero {
    position: relative;
}
.shop-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    height: 400px;
    background: radial-gradient(ellipse at top, rgba(var(--primary-rgb), 0.15), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Metric tiles dans le hero */
.shop-metric {
    text-align: center;
    padding: 0.75rem 0.5rem;
}
.shop-metric-value {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
@media (min-width: 768px) {
    .shop-metric-value { font-size: 1.75rem; }
}
.shop-metric-label {
    color: #6b7280;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

/* Trust strip */
.shop-trust-strip {
    background: rgba(12, 12, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .shop-trust-strip {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
        padding: 1rem;
    }
}
.shop-trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.shop-trust-item svg { flex-shrink: 0; }

/* Product card — copie .admin-card visual language */
.shop-product-card {
    position: relative;
    background: rgba(12, 12, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(var(--primary-rgb), 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-product-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.6;
    z-index: 2;
    pointer-events: none;
}
.shop-product-card:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    transform: translateY(-2px);
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.9),
        0 0 100px rgba(var(--primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.shop-product-card--muted { opacity: 0.55; }
.shop-product-card--muted:hover { transform: none; }

/* Marketing badges (BESTSELLER, HOT, TRENDING) */
.shop-marketing-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.shop-marketing-badge--amber   { background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(245,158,11,0.75)); color: #fff; }
.shop-marketing-badge--red     { background: linear-gradient(135deg, rgba(239,68,68,0.95),  rgba(220,38,38,0.85));  color: #fff; }
.shop-marketing-badge--primary { background: linear-gradient(135deg, rgba(124,93,250,0.95), rgba(124,93,250,0.75)); color: #fff; }

/* Product image */
.shop-product-image {
    position: relative;
    height: 176px;
    overflow: hidden;
}
.shop-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.shop-product-card:hover .shop-product-image img { transform: scale(1.05); }
.shop-product-image-fallback {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    opacity: 0.4;
}
.shop-product-image-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0a0a0a, rgba(10, 10, 10, 0.4) 50%, transparent);
    pointer-events: none;
}
.shop-product-image-badges {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 2;
}

/* Status pills sur les images */
.shop-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.shop-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.shop-status-good    { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.shop-status-good .shop-status-dot { animation: shopPulse 1.6s ease infinite; }
.shop-status-testing { background: rgba(234,179,8,0.15);  color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.shop-status-warn    { background: rgba(251,146,60,0.15); color: #fdba74; border: 1px solid rgba(251,146,60,0.3); }
.shop-status-bad     { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.shop-status-neutral { background: rgba(255,255,255,0.06); color: #9ca3af; border: 1px solid rgba(255,255,255,0.1); }
.shop-status-live    { background: rgba(0,0,0,0.6);        color: #d1d5db; border: 1px solid rgba(255,255,255,0.1); }
.shop-status-live .shop-status-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; animation: shopPulse 1.6s ease infinite; }
@keyframes shopPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.75); }
}

/* Product body */
.shop-product-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Feature list value stack */
.shop-feature-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: #9ca3af;
    font-weight: 600;
}

/* Guarantee cards */
.shop-guarantee-card {
    background: rgba(12, 12, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 1.75rem;
    text-align: center;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease;
}
.shop-guarantee-card:hover { border-color: rgba(var(--primary-rgb), 0.15); }
.shop-guarantee-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAQ item — accordion natif */
.shop-faq-item {
    background: rgba(12, 12, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.shop-faq-item[open] { border-color: rgba(var(--primary-rgb), 0.2); }
.shop-faq-item summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shop-faq-item summary::-webkit-details-marker { display: none; }
.shop-faq-item summary::after {
    content: '+';
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
}
.shop-faq-item[open] summary::after { transform: rotate(45deg); }
.shop-faq-item p {
    padding: 0 1.25rem 1.25rem;
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* Line-clamp utility (au cas où) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Live status pill button — subtle discret, cohérent avec le design admin */
.shop-live-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(12, 12, 12, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.15s ease;
}
.shop-live-status:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
    color: #fff;
}
.shop-live-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px currentColor;
    color: #4ade80;
    animation: shopPulse 1.6s ease infinite;
}
.shop-live-status svg { color: var(--primary); }

/* ═══════════════════════════════════════════════════════════
   Shop CTA button — dédié aux product cards (remplace btn-premium
   qui rendait mal à cette taille). Gradient primary + shine sweep
   + chevron qui glisse au hover.
   ═══════════════════════════════════════════════════════════ */
.shop-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem 0.625rem 1.125rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.85) 100%);
    color: #0a0a0a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 6px 20px -6px rgba(var(--primary-rgb), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                filter 0.25s ease;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
}
.shop-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 20%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}
.shop-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 12px 28px -8px rgba(var(--primary-rgb), 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.shop-cta:hover::before {
    transform: translateX(120%);
}
.shop-cta:active {
    transform: translateY(0);
}
.shop-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-cta:hover svg {
    transform: translateX(3px);
}

/* Variant "outline" — quand pas de products/prix (fallback Details). */
.shop-cta--outline {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: none;
    text-shadow: none;
}
.shop-cta--outline:hover {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 6px 20px -8px rgba(var(--primary-rgb), 0.4);
}

/* Variant "disabled" — unavailable / detected. */
.shop-cta--disabled {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Fin section /shop
   ═══════════════════════════════════════════════════════════ */
.save-warning {
    color: #fbbf24;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}