/* _content/Project2/Components/Layout/MainLayout.razor.rz.scp.css */
/* _content/Project2/Components/Layout/NavMenu.razor.rz.scp.css */
/* _content/Project2/Components/Pages/CGUS/cgu.razor.rz.scp.css */
/* ===================================================
   cgu.css — Orion System · palette officielle bleue
   Utilise les variables de app.css
   =================================================== */

/* ---- PAGE WRAPPER ---- */
.cgu-page[b-c9bcjjgto2] {
    min-height: 100vh;
    background-color: var(--bg-primary);
}

/* ---- HERO ---- */
.cgu-hero[b-c9bcjjgto2] {
    position: relative;
    padding: 120px 2rem 80px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-accent) 100%);
    border-bottom: 1px solid var(--secondary-blue);
}

/* Orbs de fond reprenant body::before */
.cgu-hero-orbs[b-c9bcjjgto2] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 40%, rgba(0, 119, 182, 0.12) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(0, 180, 216, 0.10) 0%, transparent 50%), radial-gradient(circle at 50% 90%, rgba(72, 202, 228, 0.07) 0%, transparent 45%);
    pointer-events: none;
    animation: meshFloat 25s ease-in-out infinite;
}

.cgu-hero-content[b-c9bcjjgto2] {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Badge */
.cgu-badge[b-c9bcjjgto2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-accent);
    border: 1px solid rgba(0, 119, 182, 0.25);
    border-radius: 50px;
    padding: 0.4rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
}

.cgu-badge-dot[b-c9bcjjgto2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gradient-primary);
    animation: pulseDot-b-c9bcjjgto2 2.2s ease-in-out infinite;
}

@keyframes pulseDot-b-c9bcjjgto2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* Titre hero */
.cgu-title[b-c9bcjjgto2] {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 1rem;
    /* override de h1 background-clip générique */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.cgu-title-accent[b-c9bcjjgto2] {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cgu-subtitle[b-c9bcjjgto2] {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ---- LAYOUT ---- */
.cgu-layout[b-c9bcjjgto2] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 6rem;
    align-items: start;
}

/* ---- SIDEBAR ---- */
.cgu-nav[b-c9bcjjgto2] {
    position: sticky;
    top: 100px;
}

.cgu-nav-inner[b-c9bcjjgto2] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow);
}

.cgu-nav-label[b-c9bcjjgto2] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.cgu-nav-list[b-c9bcjjgto2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cgu-nav-link[b-c9bcjjgto2] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

    .cgu-nav-link:hover[b-c9bcjjgto2] {
        color: var(--primary-blue);
        background: var(--bg-accent);
    }

.cgu-nav-num[b-c9bcjjgto2] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary-blue);
    min-width: 20px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* ---- ARTICLES ---- */
.cgu-content[b-c9bcjjgto2] {
    display: flex;
    flex-direction: column;
}

.cgu-article[b-c9bcjjgto2] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

    .cgu-article:last-of-type[b-c9bcjjgto2] {
        border-bottom: none;
    }

/* Numéro décoratif */
.cgu-article-num[b-c9bcjjgto2] {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    padding-top: 0.15rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    /* dégradé très léger, presque invisible */
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.15;
    transition: opacity var(--transition);
}

.cgu-article:hover .cgu-article-num[b-c9bcjjgto2] {
    opacity: 0.45;
}

.cgu-article:target .cgu-article-num[b-c9bcjjgto2] {
    opacity: 0.7;
}

/* Corps */
.cgu-article-body[b-c9bcjjgto2] {
    padding-top: 0;
}

/* Titre article — neutralise h2::after global */
.cgu-article-title[b-c9bcjjgto2] {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    display: block; /* écrase inline-block du h2 global */
    background: none;
    -webkit-text-fill-color: unset;
}

    .cgu-article-title[b-c9bcjjgto2]::after {
        display: none;
    }

.cgu-article-body p[b-c9bcjjgto2] {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
}

.cgu-article-body strong[b-c9bcjjgto2] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---- LISTE SERVICES ---- */
.cgu-list[b-c9bcjjgto2] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .cgu-list li[b-c9bcjjgto2] {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.55;
    }

        .cgu-list li[b-c9bcjjgto2]::before {
            content: '';
            display: inline-block;
            min-width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gradient-primary);
            margin-top: 0.48rem;
            flex-shrink: 0;
        }

/* ---- CALLOUT BOXES ---- */
.cgu-callout[b-c9bcjjgto2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
    font-size: 0.87rem;
    line-height: 1.6;
    border-left: 3px solid;
}

/* Info → bleu primaire */
.cgu-callout--info[b-c9bcjjgto2] {
    background: var(--bg-accent);
    border-left-color: var(--primary-blue);
    color: var(--primary-blue-dark);
}

/* Warning → cyan secondaire */
.cgu-callout--warning[b-c9bcjjgto2] {
    background: rgba(0, 180, 216, 0.07);
    border-left-color: var(--accent-cyan);
    color: var(--primary-blue-dark);
}

.cgu-callout-icon[b-c9bcjjgto2] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.8;
}

/* ---- DRAPEAU CH ---- */
.cgu-flag[b-c9bcjjgto2] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0.8rem;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---- FOOTER BLOCK ---- */
.cgu-footer-block[b-c9bcjjgto2] {
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-colored);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.cgu-footer-text[b-c9bcjjgto2] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.cgu-footer-link[b-c9bcjjgto2] {
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 500;
}

    .cgu-footer-link:hover[b-c9bcjjgto2] {
        color: var(--accent-cyan);
    }

.cgu-back-btn[b-c9bcjjgto2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    .cgu-layout[b-c9bcjjgto2] {
        grid-template-columns: 1fr;
    }

    .cgu-nav[b-c9bcjjgto2] {
        position: static;
        display: none;
    }

    .cgu-title[b-c9bcjjgto2] {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .cgu-hero[b-c9bcjjgto2] {
        padding: 110px 1.5rem 60px;
    }

    .cgu-title[b-c9bcjjgto2] {
        font-size: 2rem;
    }

    .cgu-article[b-c9bcjjgto2] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 1.8rem 0;
    }

    .cgu-article-num[b-c9bcjjgto2] {
        font-size: 1.4rem;
    }

    .cgu-layout[b-c9bcjjgto2] {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .cgu-title[b-c9bcjjgto2] {
        font-size: 1.7rem;
    }

    .cgu-footer-block[b-c9bcjjgto2] {
        padding: 1.5rem 1rem;
    }
}
/* _content/Project2/Components/Pages/CommentCaMarche.razor.rz.scp.css */
/* ═══════════════════════════════════════
   PAGE COMMENT ÇA MARCHE — Orion System
   Requiert : Shared.css
   ═══════════════════════════════════════ */

.ccm-page[b-v4kd250hsu] {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ── Héro ─────────────────────────────── */

.ccm-hero[b-v4kd250hsu] {
    background: #011628;
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
    border-top: none;
}

    .ccm-hero[b-v4kd250hsu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #0077b6 25%, #00b4d8 50%, #0077b6 75%, transparent);
        opacity: 0.7;
    }

    .ccm-hero[b-v4kd250hsu]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 50%, rgba(0, 119, 182, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 50%, rgba(0, 180, 216, 0.07) 0%, transparent 45%);
        pointer-events: none;
    }

.ccm-hero-inner[b-v4kd250hsu] {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ── Journey ──────────────────────────── */

.ccm-journey[b-v4kd250hsu] {
    padding: 72px 0;
    background: var(--white);
}

.ccm-step[b-v4kd250hsu] {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

    .ccm-step:last-child[b-v4kd250hsu] {
        border-bottom: none;
    }

    .ccm-step:first-child[b-v4kd250hsu] {
        padding-top: 0;
    }

.ccm-step--reverse .ccm-step-content[b-v4kd250hsu] {
    order: 3;
}

.ccm-step--reverse .ccm-step-visual[b-v4kd250hsu] {
    order: 2;
}

.ccm-step--reverse .ccm-step-num[b-v4kd250hsu] {
    order: 1;
}

.ccm-step-num[b-v4kd250hsu] {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -0.04em;
    align-self: flex-start;
    padding-top: 8px;
}

.ccm-step-content[b-v4kd250hsu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ccm-step-icon[b-v4kd250hsu] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(0, 119, 182, 0.3);
    flex-shrink: 0;
}

.ccm-step-label[b-v4kd250hsu] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-blue);
}

.ccm-step-title[b-v4kd250hsu] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    display: block !important;
}

    .ccm-step-title[b-v4kd250hsu]::after {
        display: none !important;
    }

.ccm-step-content p[b-v4kd250hsu] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

.ccm-step-points[b-v4kd250hsu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ccm-step-points li[b-v4kd250hsu] {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-primary);
        padding-left: 16px;
        position: relative;
    }

        .ccm-step-points li[b-v4kd250hsu]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0077b6, #00b4d8);
        }

/* ── Visual cards ─────────────────────── */

.ccm-step-visual[b-v4kd250hsu] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ccm-visual-card[b-v4kd250hsu] {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ccm-step-visual--2 .ccm-visual-card[b-v4kd250hsu] {
    background: #011628;
    border-color: rgba(0, 180, 216, 0.2);
}

.ccm-step-visual--2 .ccm-vc-header[b-v4kd250hsu] {
    color: rgba(255,255,255,.7);
}

    .ccm-step-visual--2 .ccm-vc-header i[b-v4kd250hsu] {
        color: #00b4d8;
    }

.ccm-step-visual--2 .ccm-vc-row[b-v4kd250hsu] {
    color: rgba(255,255,255,.55);
    border-color: rgba(255,255,255,.06);
}

.ccm-step-visual--2 .ccm-vc-row--ok[b-v4kd250hsu] {
    color: #4ade80;
}

    .ccm-step-visual--2 .ccm-vc-row--ok i[b-v4kd250hsu] {
        color: #22c55e;
    }

.ccm-step-visual--2 .ccm-vc-big[b-v4kd250hsu] {
    color: #90e0ef;
    -webkit-text-fill-color: unset;
    background: none;
}

.ccm-step-visual--2 .ccm-vc-sub[b-v4kd250hsu] {
    color: rgba(255,255,255,.4);
}

.ccm-vc-header[b-v4kd250hsu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.ccm-step-visual--2 .ccm-vc-header[b-v4kd250hsu] {
    border-color: rgba(255,255,255,.08);
}

.ccm-vc-header i[b-v4kd250hsu] {
    color: var(--primary-blue);
    font-size: 0.9rem;
}

.ccm-vc-live[b-v4kd250hsu] {
    margin-left: auto;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ccm-vc-live--pulse[b-v4kd250hsu] {
    animation: shared-pulse 1.8s ease-in-out infinite;
}

.ccm-vc-rows[b-v4kd250hsu] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ccm-vc-row[b-v4kd250hsu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

    .ccm-vc-row i[b-v4kd250hsu] {
        font-size: 0.8rem;
        flex-shrink: 0;
    }

.ccm-vc-row--ok[b-v4kd250hsu] {
    color: #166534;
    background: rgba(34,197,94,.06);
    border-color: rgba(34,197,94,.2);
}

    .ccm-vc-row--ok i[b-v4kd250hsu] {
        color: #22c55e;
    }

.ccm-vc-row--search[b-v4kd250hsu] {
    color: var(--primary-blue);
    border-color: rgba(0,119,182,.2);
    background: var(--bg-accent);
}

    .ccm-vc-row--search i[b-v4kd250hsu] {
        color: var(--primary-blue);
    }

.ccm-vc-row--led[b-v4kd250hsu] {
    color: #00b4d8;
    border-color: rgba(0,180,216,.2);
    background: rgba(0,180,216,.06);
}

    .ccm-vc-row--led i[b-v4kd250hsu] {
        color: #00b4d8;
        animation: shared-pulse 1.8s ease-in-out infinite;
    }

.ccm-vc-row--pulse i[b-v4kd250hsu] {
    color: #0077b6;
    animation: shared-pulse 1.4s ease-in-out infinite;
}

.ccm-vc-stat-row[b-v4kd250hsu] {
    display: flex;
    gap: 16px;
}

.ccm-vc-stat[b-v4kd250hsu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ccm-vc-big[b-v4kd250hsu] {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.ccm-vc-sub[b-v4kd250hsu] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ccm-vc-bar[b-v4kd250hsu] {
    height: 6px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.ccm-vc-bar-fill[b-v4kd250hsu] {
    height: 100%;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.ccm-ai-demo[b-v4kd250hsu] {
    background: rgba(0, 180, 216, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ccm-ai-q[b-v4kd250hsu] {
    font-size: 0.74rem;
    font-style: italic;
    color: rgba(255,255,255,.55);
    border-left: 2px solid #00b4d8;
    padding-left: 8px;
    line-height: 1.5;
}

    .ccm-ai-q i[b-v4kd250hsu] {
        color: #00b4d8;
        margin-right: 4px;
        font-size: 0.7rem;
    }

.ccm-ai-a[b-v4kd250hsu] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #90e0ef;
    line-height: 1.5;
}

/* ── Connector ────────────────────────── */

.ccm-connector[b-v4kd250hsu] {
    display: flex;
    justify-content: center;
    padding: 0 0 0 28px;
}

.ccm-connector-line[b-v4kd250hsu] {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #0077b6, #00b4d8);
    border-radius: 2px;
    opacity: 0.35;
}

/* ── Benefits ─────────────────────────── */

.ccm-benefits[b-v4kd250hsu] {
    padding: 64px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.ccm-benefits-title[b-v4kd250hsu] {
    text-align: center;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 48px;
    -webkit-text-fill-color: unset;
    background: none;
    display: block !important;
}

    .ccm-benefits-title[b-v4kd250hsu]::after {
        display: none !important;
    }

.ccm-benefits-grid[b-v4kd250hsu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.ccm-benefit[b-v4kd250hsu] {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

    .ccm-benefit[b-v4kd250hsu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(135deg, #0077b6, #00b4d8);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .ccm-benefit:hover[b-v4kd250hsu] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-colored);
    }

        .ccm-benefit:hover[b-v4kd250hsu]::before {
            transform: scaleX(1);
        }

.ccm-benefit-icon[b-v4kd250hsu] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(0, 119, 182, 0.25);
}

.ccm-benefit-num[b-v4kd250hsu] {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.ccm-benefit-label[b-v4kd250hsu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── Responsive ───────────────────────── */

@media (max-width: 960px) {
    .ccm-step[b-v4kd250hsu] {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
    }

    .ccm-step-num[b-v4kd250hsu] {
        grid-row: 1;
        grid-column: 1;
        font-size: 1.5rem;
    }

    .ccm-step-content[b-v4kd250hsu] {
        grid-row: 1;
        grid-column: 2;
    }

    .ccm-step-visual[b-v4kd250hsu] {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .ccm-step--reverse .ccm-step-content[b-v4kd250hsu],
    .ccm-step--reverse .ccm-step-visual[b-v4kd250hsu],
    .ccm-step--reverse .ccm-step-num[b-v4kd250hsu] {
        order: unset;
    }

    .ccm-visual-card[b-v4kd250hsu] {
        max-width: 100%;
    }

    .ccm-benefits-grid[b-v4kd250hsu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ccm-hero[b-v4kd250hsu] {
        padding: 60px 0 48px;
    }

    .ccm-hero-inner[b-v4kd250hsu] {
        padding: 0 var(--spacing-lg);
    }

    .ccm-journey[b-v4kd250hsu] {
        padding: 48px 0;
    }

    .ccm-step[b-v4kd250hsu] {
        gap: 20px;
        padding: 32px 0;
    }

    .ccm-benefits[b-v4kd250hsu] {
        padding: 48px 0;
    }

    .ccm-benefits-grid[b-v4kd250hsu] {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    .ccm-benefit[b-v4kd250hsu] {
        padding: var(--spacing-lg);
    }

    .ccm-benefit-num[b-v4kd250hsu] {
        font-size: 1.6rem;
    }
}

@media (max-width: 400px) {
    .ccm-benefits-grid[b-v4kd250hsu] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccm-vc-live--pulse[b-v4kd250hsu],
    .ccm-vc-row--led i[b-v4kd250hsu],
    .ccm-vc-row--pulse i[b-v4kd250hsu] {
        animation: none;
    }

    .ccm-benefit:hover[b-v4kd250hsu] {
        transform: none;
    }
}
/* _content/Project2/Components/Pages/Faq.razor.rz.scp.css */
/* ═══════════════════════════════════════
   PAGE FAQ — Orion System
   Requiert : Shared.css
   ═══════════════════════════════════════ */

.faq-page[b-18zzoh6c0u] {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ── Héro ─────────────────────────────── */

.faq-page-hero[b-18zzoh6c0u] {
    background: #011628;
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
    border-top: none;
}

    .faq-page-hero[b-18zzoh6c0u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #0077b6 25%, #00b4d8 50%, #0077b6 75%, transparent);
        opacity: 0.7;
    }

    .faq-page-hero[b-18zzoh6c0u]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 50%, rgba(0, 119, 182, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(0, 180, 216, 0.07) 0%, transparent 45%);
        pointer-events: none;
    }

.faq-hero-inner[b-18zzoh6c0u] {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ── Content ──────────────────────────── */

.faq-page-content[b-18zzoh6c0u] {
    padding: 64px 0;
    background: var(--white);
}

.faq-page-container[b-18zzoh6c0u] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
}

/* ── Categories ───────────────────────── */

.faq-categories[b-18zzoh6c0u] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ── Titre de catégorie ───────────────── */

.faq-cat-title[b-18zzoh6c0u] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
    letter-spacing: normal;
}

    /* Annule le ::after underline du CSS global */
    .faq-cat-title[b-18zzoh6c0u]::after {
        display: none !important;
    }

    /* Trait coloré custom */
    .faq-cat-title[b-18zzoh6c0u]::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 48px;
        height: 2px;
        background: linear-gradient(135deg, #0077b6, #00b4d8);
        border-radius: 2px;
    }

    .faq-cat-title i[b-18zzoh6c0u] {
        color: var(--primary-blue);
        font-size: 0.9rem;
    }

/* ── CTA bas de page ──────────────────── */

.faq-page-cta[b-18zzoh6c0u] {
    margin-top: 64px;
    text-align: center;
    padding: 48px 40px;
    background: var(--bg-accent);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 119, 182, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.faq-cta-icon[b-18zzoh6c0u] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 6px 20px rgba(0, 119, 182, 0.3);
    margin-bottom: 4px;
}

.faq-page-cta h3[b-18zzoh6c0u] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: block !important;
}

    .faq-page-cta h3[b-18zzoh6c0u]::after {
        display: none !important;
    }

.faq-page-cta p[b-18zzoh6c0u] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 8px;
    max-width: 420px;
    line-height: 1.65;
}

/* ── Responsive ───────────────────────── */

@media (max-width: 640px) {
    .faq-page-hero[b-18zzoh6c0u] {
        padding: 60px 0 48px;
    }

    .faq-hero-inner[b-18zzoh6c0u] {
        padding: 0 var(--spacing-lg);
    }

    .faq-page-content[b-18zzoh6c0u] {
        padding: 48px 0;
    }

    .faq-page-container[b-18zzoh6c0u] {
        padding: 0 var(--spacing-lg);
    }

    .faq-page-cta[b-18zzoh6c0u] {
        padding: var(--spacing-xl);
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item:hover[b-18zzoh6c0u] {
        box-shadow: none;
    }
}
/* _content/Project2/Components/Pages/Home.razor.rz.scp.css */
/* Hero Section - Adaptations mobile */
.hero[b-ae2yom28e2] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(10, 16, 32, 0.7);
    overflow: hidden;
    padding-top: 140px; /* Compenser la hauteur du header fixe */
}

    .hero[b-ae2yom28e2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('../img/grid.png');
        opacity: 0.1;
        animation: moveGrid-b-ae2yom28e2 20s linear infinite;
    }

@keyframes moveGrid-b-ae2yom28e2 {
    0% {
        transform: translateX(0) translateY(0);
    }

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

.hero-content[b-ae2yom28e2] {
    max-width: 1200px;
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.hero h1[b-ae2yom28e2] {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 0%, #ff416c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p[b-ae2yom28e2] {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* Products Section */
.products-section[b-ae2yom28e2] {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a1020, #1a2035);
    position: relative;
    overflow: hidden;
}

.products-content[b-ae2yom28e2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

    .products-content h2[b-ae2yom28e2] {
        text-align: center;
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 2rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        background: linear-gradient(135deg, #fff, #ff416c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.cta-content[b-ae2yom28e2] {
    justify-content: center;
    text-align: center;
    padding: 50px 0;
    margin-bottom: 4rem;
}

    .cta-content h3[b-ae2yom28e2] {
        font-size: 2rem;
        color: white;
        margin-bottom: 1rem;
    }

    .cta-content p[b-ae2yom28e2] {
        margin: 20px auto;
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        max-width: 600px;
    }

.product-grid[b-ae2yom28e2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.product-card[b-ae2yom28e2] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    transition: all 0.3s ease;
}

    .product-card:hover[b-ae2yom28e2] {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(255, 75, 43, 0.2);
    }

    .product-card h3[b-ae2yom28e2] {
        font-size: 1.5rem;
        color: white;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .product-card p[b-ae2yom28e2] {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 1.5rem;
        line-height: 1.6;
    }

.product-image[b-ae2yom28e2] {
    margin-bottom: 1.5rem;
    text-align: center;
}

    .product-image img[b-ae2yom28e2] {
        max-width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: 8px;
    }

/* Boutons */
.cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2], .buy-button[b-ae2yom28e2], .form-submit[b-ae2yom28e2] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: white;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    margin: 0.5rem;
}

    .cta-button[b-ae2yom28e2]::before, .details-button[b-ae2yom28e2]::before, .buy-button[b-ae2yom28e2]::before, .form-submit[b-ae2yom28e2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
        z-index: 1;
    }

    .cta-button:hover[b-ae2yom28e2]::before, .details-button:hover[b-ae2yom28e2]::before, .buy-button:hover[b-ae2yom28e2]::before, .form-submit:hover[b-ae2yom28e2]::before {
        left: 100%;
    }

    .cta-button:hover[b-ae2yom28e2], .details-button:hover[b-ae2yom28e2], .buy-button:hover[b-ae2yom28e2], .form-submit:hover[b-ae2yom28e2] {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 75, 43, 0.4);
    }

.links[b-ae2yom28e2] {
    color: #2196F3;
    text-decoration: underline;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* Hero Section Mobile */
    .hero[b-ae2yom28e2] {
        min-height: 100vh;
        padding-top: 120px; /* Ajusté pour le header mobile */
    }

    .hero-content[b-ae2yom28e2] {
        padding: 1rem;
    }

    .hero h1[b-ae2yom28e2] {
        font-size: 2.5rem;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
    }

    .hero p[b-ae2yom28e2] {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    /* Services Section Mobile */
    .service-block[b-ae2yom28e2] {
        min-height: auto;
        flex-direction: column;
        padding: 2rem 0;
        background-color: rgba(10, 16, 32, 0.9);
    }

    .service-image-container[b-ae2yom28e2] {
        position: relative;
        width: 100%;
        height: 250px;
        margin-bottom: 2rem;
        opacity: 0.8;
    }

    .service-content[b-ae2yom28e2] {
        position: relative;
        width: 100%;
        padding: 2rem 1.5rem;
        background: rgba(10, 16, 32, 0.95);
        clip-path: none;
        border: none;
        border-top: 3px solid #ff4b2b;
        margin: 0;
    }

    .service-block.reverse .service-content[b-ae2yom28e2] {
        clip-path: none;
        border: none;
        border-top: 3px solid #ff4b2b;
        margin: 0;
    }

    .service-content h2[b-ae2yom28e2] {
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
        text-align: center;
    }

    .service-content p[b-ae2yom28e2] {
        font-size: 1rem;
        line-height: 1.6;
        text-align: center;
    }

    /* Products Section Mobile */
    .products-section[b-ae2yom28e2] {
        padding: 60px 0;
    }

    .products-content[b-ae2yom28e2] {
        padding: 0 1rem;
    }

        .products-content h2[b-ae2yom28e2] {
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            letter-spacing: 1px;
        }

    .cta-content[b-ae2yom28e2] {
        padding: 30px 0;
        margin-bottom: 2rem;
    }

        .cta-content h3[b-ae2yom28e2] {
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }

        .cta-content p[b-ae2yom28e2] {
            font-size: 1rem;
            margin: 15px auto;
        }

    .product-grid[b-ae2yom28e2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-card[b-ae2yom28e2] {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }

        .product-card h3[b-ae2yom28e2] {
            font-size: 1.3rem;
            text-align: center;
            margin-bottom: 1rem;
        }

        .product-card p[b-ae2yom28e2] {
            font-size: 0.95rem;
            text-align: center;
            line-height: 1.5;
        }

    .product-image img[b-ae2yom28e2] {
        max-height: 150px;
    }

    /* Boutons Mobile */
    .cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2], .buy-button[b-ae2yom28e2], .form-submit[b-ae2yom28e2] {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
        margin: 0.3rem;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .details-button[b-ae2yom28e2] {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans */
    .hero[b-ae2yom28e2] {
        padding-top: 100px;
    }

        .hero h1[b-ae2yom28e2] {
            font-size: 2rem;
            line-height: 1.1;
        }

        .hero p[b-ae2yom28e2] {
            font-size: 1.1rem;
        }

    .service-content[b-ae2yom28e2] {
        padding: 1.5rem 1rem;
    }

        .service-content h2[b-ae2yom28e2] {
            font-size: 1.5rem;
        }

        .service-content p[b-ae2yom28e2] {
            font-size: 0.95rem;
        }

    .products-content h2[b-ae2yom28e2] {
        font-size: 1.8rem;
    }

    .cta-content h3[b-ae2yom28e2] {
        font-size: 1.4rem;
    }

    .product-card[b-ae2yom28e2] {
        padding: 1rem;
        margin: 0;
    }

        .product-card h3[b-ae2yom28e2] {
            font-size: 1.2rem;
        }

    .cta-button[b-ae2yom28e2], .details-button[b-ae2yom28e2] {
        padding: 0.7rem 1.5rem;
        font-size: 0.85rem;
        width: 90%;
        max-width: 280px;
    }
}
/* _content/Project2/Components/Pages/PrinterSupport.razor.rz.scp.css */
/* ===== PAGE SUPPORT LOCAL AGENT PRINTER - CSS ===== */

/* Container principal */
.support-page[b-3eah83r9yg] {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ===== HERO SECTION ===== */
.support-hero[b-3eah83r9yg] {
    position: relative;
    padding: 4rem 0 3rem;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.03) 0%, rgba(0, 180, 216, 0.03) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hero-content[b-3eah83r9yg] {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-icon[b-3eah83r9yg] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 2rem;
    color: var(--white);
    box-shadow: var(--shadow-colored);
    animation: pulse-b-3eah83r9yg 2s ease-in-out infinite;
}

@keyframes pulse-b-3eah83r9yg {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-colored);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 119, 182, 0.25);
    }
}

.hero-title[b-3eah83r9yg] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-3eah83r9yg] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.6;
}

.hero-badges[b-3eah83r9yg] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.badge-item[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
}

    .badge-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .badge-item i[b-3eah83r9yg] {
        color: var(--primary-blue);
        font-size: 1.125rem;
    }

/* ===== CONTENT SECTION ===== */
.support-content[b-3eah83r9yg] {
    padding: 4rem 0;
}

.intro-text[b-3eah83r9yg] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

    .intro-text h2[b-3eah83r9yg] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
    }

    .intro-text p[b-3eah83r9yg] {
        font-size: 1.125rem;
        color: var(--text-secondary);
    }

/* ===== FAQ LIST ===== */
.faq-list[b-3eah83r9yg] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* FAQ Item */
.faq-item[b-3eah83r9yg] {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

    .faq-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
    }

    .faq-item.active[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
    }

/* FAQ Header */
.faq-header[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    cursor: pointer;
    transition: all var(--transition);
}

    .faq-header:hover[b-3eah83r9yg] {
        background: var(--bg-accent);
    }

.faq-icon[b-3eah83r9yg] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    flex-shrink: 0;
    box-shadow: var(--shadow-colored);
}

    .faq-icon.error[b-3eah83r9yg] {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

.faq-title[b-3eah83r9yg] {
    flex: 1;
}

    .faq-title h3[b-3eah83r9yg] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
        color: var(--text-primary);
    }

.faq-status[b-3eah83r9yg] {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-accent);
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
}

.faq-toggle[b-3eah83r9yg] {
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all var(--transition);
}

.faq-item.active .faq-toggle[b-3eah83r9yg] {
    background: var(--primary-blue);
    color: var(--white);
    transform: rotate(180deg);
}

/* FAQ Content */
.faq-content[b-3eah83r9yg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

    .faq-content.show[b-3eah83r9yg] {
        max-height: 10000px;
        border-top: 1px solid var(--border-color);
    }

/* Solution Steps */
.solution-steps[b-3eah83r9yg] {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Step Card */
.step-card[b-3eah83r9yg] {
    background: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition);
}

    .step-card:hover[b-3eah83r9yg] {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.step-header[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.step-number[b-3eah83r9yg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--gradient-primary);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-header h4[b-3eah83r9yg] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.step-content[b-3eah83r9yg] {
    margin-bottom: var(--spacing-lg);
}

    .step-content p[b-3eah83r9yg] {
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: var(--spacing-md);
    }

/* Numbered List */
.numbered-list[b-3eah83r9yg] {
    list-style: none;
    counter-reset: step-counter;
    padding-left: 0;
    margin: var(--spacing-md) 0;
}

    .numbered-list li[b-3eah83r9yg] {
        counter-increment: step-counter;
        padding-left: 3rem;
        position: relative;
        margin-bottom: var(--spacing-md);
        color: var(--text-secondary);
        line-height: 1.6;
    }

        .numbered-list li[b-3eah83r9yg]::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
            background: var(--primary-blue);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.875rem;
        }

/* Checklist */
.checklist[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.checklist-item[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

    .checklist-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-sm);
    }

    .checklist-item i[b-3eah83r9yg] {
        color: var(--primary-blue);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .checklist-item span[b-3eah83r9yg] {
        color: var(--text-primary);
        font-weight: 500;
        line-height: 1.5;
    }

/* Info Boxes */
.info-box[b-3eah83r9yg],
.warning-box[b-3eah83r9yg],
.success-box[b-3eah83r9yg] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    margin: var(--spacing-lg) 0;
}

.info-box[b-3eah83r9yg] {
    background: rgba(0, 119, 182, 0.05);
    border-left: 4px solid var(--primary-blue);
}

.warning-box[b-3eah83r9yg] {
    background: rgba(255, 183, 3, 0.05);
    border-left: 4px solid #ffb703;
}

.success-box[b-3eah83r9yg] {
    background: rgba(6, 214, 160, 0.05);
    border-left: 4px solid #06d6a0;
}

    .info-box i[b-3eah83r9yg],
    .warning-box i[b-3eah83r9yg],
    .success-box i[b-3eah83r9yg] {
        font-size: 1.25rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

.info-box i[b-3eah83r9yg] {
    color: var(--primary-blue);
}

.warning-box i[b-3eah83r9yg] {
    color: #ffb703;
}

.success-box i[b-3eah83r9yg] {
    color: #06d6a0;
}

.warning-box div[b-3eah83r9yg],
.info-box span[b-3eah83r9yg],
.success-box span[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
}

.warning-box strong[b-3eah83r9yg] {
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* Alert Cards */
.alert-card[b-3eah83r9yg] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    border: 2px solid;
}

    .alert-card.warning[b-3eah83r9yg] {
        background: rgba(255, 183, 3, 0.05);
        border-color: #ffb703;
    }

    .alert-card.error[b-3eah83r9yg] {
        background: rgba(239, 68, 68, 0.05);
        border-color: #ef4444;
    }

    .alert-card.info[b-3eah83r9yg] {
        background: rgba(0, 119, 182, 0.05);
        border-color: var(--primary-blue);
    }

.alert-icon[b-3eah83r9yg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-card.warning .alert-icon[b-3eah83r9yg] {
    background: #ffb703;
    color: var(--white);
}

.alert-card.error .alert-icon[b-3eah83r9yg] {
    background: #ef4444;
    color: var(--white);
}

.alert-card.info .alert-icon[b-3eah83r9yg] {
    background: var(--primary-blue);
    color: var(--white);
}

.alert-content h4[b-3eah83r9yg] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.alert-content p[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Cable Checklist */
.cable-checklist[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.cable-item[b-3eah83r9yg] {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

    .cable-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.cable-icon[b-3eah83r9yg] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    flex-shrink: 0;
}

.cable-info h5[b-3eah83r9yg] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.cable-info p[b-3eah83r9yg] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Test Steps */
.test-steps[b-3eah83r9yg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.test-item[b-3eah83r9yg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

    .test-item:hover[b-3eah83r9yg] {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }

.test-number[b-3eah83r9yg] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.test-item p[b-3eah83r9yg] {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Step Image */
.step-image[b-3eah83r9yg] {
    margin-top: var(--spacing-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

    .step-image img[b-3eah83r9yg] {
        width: 100%;
        height: auto;
        display: block;
    }

/* ===== SUPPORT CONTACT SECTION ===== */
.support-contact-section[b-3eah83r9yg] {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color);
}

.support-contact-card[b-3eah83r9yg] {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-xl);
    color: var(--white);
    text-align: center;
}

.contact-icon[b-3eah83r9yg] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 2rem;
    backdrop-filter: blur(10px);
}

.contact-content h3[b-3eah83r9yg] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

.contact-content p[b-3eah83r9yg] {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-2xl);
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-contact[b-3eah83r9yg] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--white);
    color: var(--primary-blue);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all var(--transition);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

    .btn-contact:hover[b-3eah83r9yg] {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }

.contact-features[b-3eah83r9yg] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    flex-wrap: wrap;
}

.feature-badge[b-3eah83r9yg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

    .feature-badge i[b-3eah83r9yg] {
        font-size: 1.125rem;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero-title[b-3eah83r9yg] {
        font-size: 2.5rem;
    }

    .hero-badges[b-3eah83r9yg] {
        flex-direction: column;
        align-items: center;
    }

    .test-steps[b-3eah83r9yg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-features[b-3eah83r9yg] {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .support-hero[b-3eah83r9yg] {
        padding: 3rem 0 2rem;
    }

    .hero-icon[b-3eah83r9yg] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .hero-title[b-3eah83r9yg] {
        font-size: 2rem;
    }

    .hero-description[b-3eah83r9yg] {
        font-size: 1.125rem;
    }

    .intro-text h2[b-3eah83r9yg] {
        font-size: 2rem;
    }

    .faq-header[b-3eah83r9yg] {
        padding: var(--spacing-lg);
        flex-wrap: wrap;
    }

    .faq-icon[b-3eah83r9yg] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .faq-title h3[b-3eah83r9yg] {
        font-size: 1.25rem;
    }

    .solution-steps[b-3eah83r9yg] {
        padding: var(--spacing-lg);
    }

    .step-card[b-3eah83r9yg] {
        padding: var(--spacing-lg);
    }

    .step-header[b-3eah83r9yg] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .numbered-list li[b-3eah83r9yg] {
        padding-left: 2.5rem;
    }

        .numbered-list li[b-3eah83r9yg]::before {
            width: 28px;
            height: 28px;
            font-size: 0.75rem;
        }

    .cable-item[b-3eah83r9yg] {
        flex-direction: column;
    }

    .test-steps[b-3eah83r9yg] {
        grid-template-columns: 1fr;
    }

    .support-contact-card[b-3eah83r9yg] {
        padding: var(--spacing-2xl);
    }

    .contact-icon[b-3eah83r9yg] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .contact-content h3[b-3eah83r9yg] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-3eah83r9yg] {
        font-size: 1.75rem;
    }

    .badge-item[b-3eah83r9yg] {
        width: 100%;
        justify-content: center;
    }

    .faq-title[b-3eah83r9yg] {
        width: 100%;
    }

    .faq-toggle[b-3eah83r9yg] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .step-number[b-3eah83r9yg] {
        min-width: auto;
    }

    .alert-card[b-3eah83r9yg] {
        flex-direction: column;
        padding: var(--spacing-lg);
    }

    .btn-contact[b-3eah83r9yg] {
        width: 100%;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp-b-3eah83r9yg {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item[b-3eah83r9yg] {
    animation: fadeInUp-b-3eah83r9yg 0.6s ease-out;
}

    .faq-item:nth-child(1)[b-3eah83r9yg] {
        animation-delay: 0.1s;
    }

    .faq-item:nth-child(2)[b-3eah83r9yg] {
        animation-delay: 0.2s;
    }

    .faq-item:nth-child(3)[b-3eah83r9yg] {
        animation-delay: 0.3s;
    }

    .faq-item:nth-child(4)[b-3eah83r9yg] {
        animation-delay: 0.4s;
    }

    .faq-item:nth-child(5)[b-3eah83r9yg] {
        animation-delay: 0.5s;
    }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    *[b-3eah83r9yg] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-icon[b-3eah83r9yg] {
        animation: none;
    }

    .faq-item[b-3eah83r9yg] {
        animation: none;
    }
}
/* _content/Project2/Components/Pages/Produits.razor.rz.scp.css */
/* ═══════════════════════════════════════
   PAGE PRODUITS — Orion System
   ═══════════════════════════════════════ */

.produits-page[b-q3fx6mab6y] { min-height: 100vh; background: var(--bg-primary); }

/* ── Hero ─────────────────────────────── */

.produits-hero[b-q3fx6mab6y] {
    background: #011628;
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
    border-top: none;
}

.produits-hero[b-q3fx6mab6y]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #0077b6 25%, #00b4d8 50%, #0077b6 75%, transparent);
    opacity: .7;
}

.produits-hero[b-q3fx6mab6y]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(0,119,182,.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(0,180,216,.07) 0%, transparent 45%);
    pointer-events: none;
}

.produits-hero-inner[b-q3fx6mab6y] {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

.produits-badge[b-q3fx6mab6y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,180,216,.1);
    border: 1px solid rgba(0,180,216,.25);
    color: #00b4d8;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .4rem 1rem;
    border-radius: 100px;
    margin-bottom: 20px;
}

.produits-badge-dot[b-q3fx6mab6y] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00b4d8;
    animation: ppulse-b-q3fx6mab6y 2s ease-in-out infinite;
}

@keyframes ppulse-b-q3fx6mab6y { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

.produits-hero-title[b-q3fx6mab6y] {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 auto 16px;
    max-width: 700px;
    line-height: 1.18;
    letter-spacing: -.02em;
    -webkit-text-fill-color: unset;
    background: none;
}

.produits-accent[b-q3fx6mab6y] {
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.produits-hero-sub[b-q3fx6mab6y] {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ── Section générique ────────────────── */

.produits-section[b-q3fx6mab6y] { padding: 72px 0; background: var(--white); }
.produits-section--alt[b-q3fx6mab6y] { background: var(--bg-secondary); border-top: 1px solid var(--border-color); }

.produits-section-header[b-q3fx6mab6y] { text-align: center; margin-bottom: 56px; }

.produits-section-label[b-q3fx6mab6y] {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.produits-section-title[b-q3fx6mab6y] {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
    line-height: 1.2;
}

.produits-section-sub[b-q3fx6mab6y] {
    font-size: .9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Produit row ──────────────────────── */

.produit-row[b-q3fx6mab6y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--border-color);
}

.produit-row:last-child[b-q3fx6mab6y] { border-bottom: none; }
.produit-row:first-child[b-q3fx6mab6y] { padding-top: 0; }
.produit-row--reverse .produit-visual[b-q3fx6mab6y] { order: 2; }
.produit-row--reverse .produit-content[b-q3fx6mab6y] { order: 1; }

/* Visual box */
.produit-visual[b-q3fx6mab6y] {
    border-radius: var(--radius-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 220px;
}

.produit-visual--blue[b-q3fx6mab6y] { background: rgba(0,119,182,.06); border: 1px solid rgba(0,119,182,.15); }
.produit-visual--cyan[b-q3fx6mab6y] { background: rgba(0,180,216,.06); border: 1px solid rgba(0,180,216,.15); }
.produit-visual--dark[b-q3fx6mab6y] { background: #011628; border: 1px solid rgba(0,180,216,.2); }

.produit-visual-icon[b-q3fx6mab6y] {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(0,119,182,.3);
}

/* Stats dans visual */
.produit-visual-stats[b-q3fx6mab6y] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.pv-stat[b-q3fx6mab6y] { text-align: center; }

.pv-num[b-q3fx6mab6y] {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 3px;
}

.pv-label[b-q3fx6mab6y] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.produit-visual--dark .pv-label[b-q3fx6mab6y] { color: rgba(255,255,255,.4); }

/* Pills dans visual */
.produit-visual-pills[b-q3fx6mab6y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.pv-pill[b-q3fx6mab6y] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
}

.pv-pill i[b-q3fx6mab6y] { color: #0077b6; font-size: .55rem; }
.pv-pill--green[b-q3fx6mab6y] { background: rgba(34,197,94,.1); color: #4ade80; }
.pv-pill--green i[b-q3fx6mab6y] { color: #22c55e; }
.pv-pill--pulse i[b-q3fx6mab6y] { color: #00b4d8; animation: ppulse-b-q3fx6mab6y 1.8s ease-in-out infinite; }

.produit-visual--blue .pv-pill[b-q3fx6mab6y] {
    background: rgba(0,119,182,.08);
    color: var(--text-primary);
}

.produit-visual--blue .pv-pill i[b-q3fx6mab6y] { color: #0077b6; }
.produit-visual--blue .pv-pill--green[b-q3fx6mab6y] { background: rgba(34,197,94,.08); color: #166534; }
.produit-visual--blue .pv-pill--green i[b-q3fx6mab6y] { color: #22c55e; }
.produit-visual--blue .pv-pill--pulse i[b-q3fx6mab6y] { color: #00b4d8; animation: ppulse-b-q3fx6mab6y 1.8s ease-in-out infinite; }

/* Alerte dans visual sombre */
.produit-visual-alert[b-q3fx6mab6y] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .8rem;
    font-weight: 600;
    color: #f87171;
    width: 100%;
}

.pva-dot[b-q3fx6mab6y] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: ppulse-b-q3fx6mab6y 1.4s ease-in-out infinite;
}

/* Content */
.produit-content[b-q3fx6mab6y] { display: flex; flex-direction: column; gap: 16px; }

.produit-tag[b-q3fx6mab6y] {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 3px 10px;
    border-radius: 100px;
    width: fit-content;
}

.produit-tag--live[b-q3fx6mab6y] { background: rgba(34,197,94,.1); color: #166534; border: 1px solid rgba(34,197,94,.25); }
.produit-tag--new[b-q3fx6mab6y]  { background: rgba(0,119,182,.1);  color: #0077b6; border: 1px solid rgba(0,119,182,.25); }
.produit-tag--soon[b-q3fx6mab6y] { background: rgba(245,158,11,.1); color: #92400e; border: 1px solid rgba(245,158,11,.25); }

.produit-name[b-q3fx6mab6y] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.produit-desc[b-q3fx6mab6y] {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

.produit-specs[b-q3fx6mab6y] {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.produit-specs li[b-q3fx6mab6y] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-primary);
}

.produit-specs li i[b-q3fx6mab6y] { color: var(--primary-blue); font-size: .8rem; flex-shrink: 0; }

.produit-usages[b-q3fx6mab6y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding-top: 4px;
}

.produit-usage-label[b-q3fx6mab6y] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 2px;
}

.produit-chip[b-q3fx6mab6y] {
    background: rgba(0,119,182,.07);
    border: 1px solid rgba(0,119,182,.18);
    color: var(--primary-blue-dark);
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
}

/* ── Apps grid ────────────────────────── */

.apps-grid[b-q3fx6mab6y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.app-card[b-q3fx6mab6y] {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

.app-card[b-q3fx6mab6y]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.app-card:hover[b-q3fx6mab6y] { transform: translateY(-4px); box-shadow: var(--shadow-colored); }
.app-card:hover[b-q3fx6mab6y]::before { transform: scaleX(1); }

.app-card--wide[b-q3fx6mab6y] { grid-column: 1 / -1; }

.app-card-header[b-q3fx6mab6y] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.app-icon[b-q3fx6mab6y] {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.app-icon--blue[b-q3fx6mab6y] { background: linear-gradient(135deg, #0077b6, #0096c7); }
.app-icon--cyan[b-q3fx6mab6y] { background: linear-gradient(135deg, #0096c7, #00b4d8); }

.app-name[b-q3fx6mab6y] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.app-desc[b-q3fx6mab6y] {
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.app-features[b-q3fx6mab6y] {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-features li[b-q3fx6mab6y] {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-primary);
    padding-left: 16px;
    position: relative;
}

.app-features li[b-q3fx6mab6y]::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--primary-blue);
}

/* Démos AI */
.ai-demos[b-q3fx6mab6y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.ai-demo[b-q3fx6mab6y] {
    background: var(--bg-accent);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-demo-q[b-q3fx6mab6y] {
    font-size: .76rem;
    font-style: italic;
    color: var(--text-secondary);
    border-left: 2px solid var(--accent-cyan);
    padding-left: 9px;
    line-height: 1.5;
}

.ai-demo-q i[b-q3fx6mab6y] { color: var(--accent-cyan); margin-right: 5px; font-size: .72rem; }

.ai-demo-a[b-q3fx6mab6y] {
    font-size: .74rem;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1.5;
}

/* ── CTA ──────────────────────────────── */

.produits-cta[b-q3fx6mab6y] {
    background: #011628;
    padding: 64px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.produits-cta[b-q3fx6mab6y]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #0077b6 25%, #00b4d8 50%, #0077b6 75%, transparent);
    opacity: .7;
}

.produits-cta-inner[b-q3fx6mab6y] {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.produits-cta h2[b-q3fx6mab6y] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    -webkit-text-fill-color: unset;
    background: none;
}

.produits-cta p[b-q3fx6mab6y] {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 28px;
    line-height: 1.7;
}

.produits-cta-btns[b-q3fx6mab6y] { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.produits-btn-primary[b-q3fx6mab6y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: #fff;
    text-decoration: none;
    padding: .75rem 1.5rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 16px rgba(0,119,182,.4);
}

.produits-btn-primary:hover[b-q3fx6mab6y] { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,180,216,.5); }

.produits-btn-outline[b-q3fx6mab6y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    padding: .75rem 1.5rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.2);
    transition: border-color var(--transition), color var(--transition);
}

.produits-btn-outline:hover[b-q3fx6mab6y] { border-color: #00b4d8; color: #00b4d8; }

/* ── Responsive ───────────────────────── */

@media (max-width: 960px) {
    .produit-row[b-q3fx6mab6y] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .produit-row--reverse .produit-visual[b-q3fx6mab6y] { order: unset; }
    .produit-row--reverse .produit-content[b-q3fx6mab6y] { order: unset; }
    .apps-grid[b-q3fx6mab6y] { grid-template-columns: 1fr; }
    .app-card--wide[b-q3fx6mab6y] { grid-column: unset; }
    .ai-demos[b-q3fx6mab6y] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .produits-hero[b-q3fx6mab6y] { padding: 60px 0 48px; }
    .produits-hero-inner[b-q3fx6mab6y] { padding: 0 var(--spacing-lg); }
    .produits-section[b-q3fx6mab6y] { padding: 48px 0; }
    .produits-section-header[b-q3fx6mab6y] { margin-bottom: 36px; }
    .produit-row[b-q3fx6mab6y] { padding: 32px 0; }
    .produit-visual[b-q3fx6mab6y] { min-height: 160px; padding: 24px; }
    .produit-visual-stats[b-q3fx6mab6y] { gap: 16px; }
    .produits-cta-inner[b-q3fx6mab6y] { padding: 0 var(--spacing-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .produits-badge-dot[b-q3fx6mab6y], .pva-dot[b-q3fx6mab6y], .pv-pill--pulse i[b-q3fx6mab6y] { animation: none; }
    .app-card:hover[b-q3fx6mab6y], .produits-btn-primary:hover[b-q3fx6mab6y] { transform: none; }
}
/* _content/Project2/Components/Pages/Tarifs.razor.rz.scp.css */
/* ═══════════════════════════════════════
   PAGE TARIFS — Orion System
   ═══════════════════════════════════════ */

.tarifs-page[b-t2rgsi9zyz] {
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ── Héro ─────────────────────────────── */

.tarifs-hero[b-t2rgsi9zyz] {
    background: #011628;
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
    border-top: none;
}

    .tarifs-hero[b-t2rgsi9zyz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #0077b6 25%, #00b4d8 50%, #0077b6 75%, transparent);
        opacity: .7;
    }

    .tarifs-hero[b-t2rgsi9zyz]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 50%, rgba(0,119,182,.1) 0%, transparent 50%), radial-gradient(circle at 75% 50%, rgba(0,180,216,.07) 0%, transparent 45%);
        pointer-events: none;
    }

.tarifs-hero-inner[b-t2rgsi9zyz] {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

    /* Override globaux dans le héro */
    .tarifs-hero-inner .produits-hero-title[b-t2rgsi9zyz],
    .tarifs-hero-inner h1[b-t2rgsi9zyz] {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: none !important;
        display: block !important;
    }

        .tarifs-hero-inner .produits-hero-title[b-t2rgsi9zyz]::after,
        .tarifs-hero-inner h1[b-t2rgsi9zyz]::after {
            display: none !important;
        }

/* ── Shared section header ────────────── */

.tarifs-approach-header[b-t2rgsi9zyz] {
    text-align: center;
    margin-bottom: 48px;
}

.produits-section-label[b-t2rgsi9zyz] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 10px;
}

.tarifs-section-title[b-t2rgsi9zyz] {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 14px;
    line-height: 1.25;
    display: block !important;
}

    .tarifs-section-title[b-t2rgsi9zyz]::after {
        display: none !important;
    }

.tarifs-section-sub[b-t2rgsi9zyz] {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Approach / Reasons ───────────────── */

.tarifs-approach[b-t2rgsi9zyz] {
    padding: 72px 0;
    background: var(--white);
}

.tarifs-reasons[b-t2rgsi9zyz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.tarifs-reason[b-t2rgsi9zyz] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

    .tarifs-reason[b-t2rgsi9zyz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(135deg, #0077b6, #00b4d8);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .tarifs-reason:hover[b-t2rgsi9zyz] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-colored);
    }

        .tarifs-reason:hover[b-t2rgsi9zyz]::before {
            transform: scaleX(1);
        }

.tarifs-reason-icon[b-t2rgsi9zyz] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(0,119,182,.25);
    flex-shrink: 0;
}

.tarifs-reason-title[b-t2rgsi9zyz] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: block !important;
}

    .tarifs-reason-title[b-t2rgsi9zyz]::after {
        display: none !important;
    }

.tarifs-reason p[b-t2rgsi9zyz] {
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Process / Steps ──────────────────── */

.tarifs-process[b-t2rgsi9zyz] {
    padding: 72px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.tarifs-steps[b-t2rgsi9zyz] {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
}

.tarifs-step[b-t2rgsi9zyz] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    align-items: flex-start;
}

.tarifs-step-num[b-t2rgsi9zyz] {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    padding-top: 10px;
    letter-spacing: -.04em;
}

.tarifs-step-body[b-t2rgsi9zyz] {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow);
}

.tarifs-step-icon[b-t2rgsi9zyz] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 4px 14px rgba(0,119,182,.25);
    flex-shrink: 0;
}

.tarifs-step-title[b-t2rgsi9zyz] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: block !important;
}

    .tarifs-step-title[b-t2rgsi9zyz]::after {
        display: none !important;
    }

.tarifs-step-body p[b-t2rgsi9zyz] {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

.tarifs-connector[b-t2rgsi9zyz] {
    display: flex;
    padding-left: 27px;
    margin: 4px 0;
}

.tarifs-connector-line[b-t2rgsi9zyz] {
    width: 2px;
    height: 32px;
    background: linear-gradient(180deg, #0077b6, #00b4d8);
    border-radius: 2px;
    opacity: .35;
}

/* ── Includes ─────────────────────────── */

.tarifs-includes[b-t2rgsi9zyz] {
    padding: 72px 0;
    background: var(--white);
}

.tarifs-includes-grid[b-t2rgsi9zyz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.tarifs-include-card[b-t2rgsi9zyz] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
}

    .tarifs-include-card:hover[b-t2rgsi9zyz] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.tarifs-include-icon[b-t2rgsi9zyz] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(0,119,182,.25);
    flex-shrink: 0;
}

.tarifs-include-title[b-t2rgsi9zyz] {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: block !important;
}

    .tarifs-include-title[b-t2rgsi9zyz]::after {
        display: none !important;
    }

.tarifs-include-card p[b-t2rgsi9zyz] {
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── FAQ section ──────────────────────── */

.tarifs-faq[b-t2rgsi9zyz] {
    padding: 72px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.tarifs-faq-list[b-t2rgsi9zyz] {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Réutilise les classes .faq-item / .faq-trigger / .faq-body de Subscribe.css / Faq.css */

/* ── Responsive ───────────────────────── */

@media (max-width: 1024px) {
    .tarifs-reasons[b-t2rgsi9zyz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarifs-includes-grid[b-t2rgsi9zyz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tarifs-hero[b-t2rgsi9zyz] {
        padding: 60px 0 48px;
    }

    .tarifs-hero-inner[b-t2rgsi9zyz] {
        padding: 0 var(--spacing-lg);
    }

    .tarifs-approach[b-t2rgsi9zyz],
    .tarifs-process[b-t2rgsi9zyz],
    .tarifs-includes[b-t2rgsi9zyz],
    .tarifs-faq[b-t2rgsi9zyz] {
        padding: 48px 0;
    }

    .tarifs-reasons[b-t2rgsi9zyz] {
        grid-template-columns: 1fr;
    }

    .tarifs-includes-grid[b-t2rgsi9zyz] {
        grid-template-columns: 1fr;
    }

    .tarifs-steps[b-t2rgsi9zyz] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .tarifs-step[b-t2rgsi9zyz] {
        grid-template-columns: 36px 1fr;
        gap: 16px;
    }

    .tarifs-step-num[b-t2rgsi9zyz] {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .produits-badge-dot[b-t2rgsi9zyz] {
        animation: none;
    }

    .tarifs-reason:hover[b-t2rgsi9zyz],
    .tarifs-include-card:hover[b-t2rgsi9zyz] {
        transform: none;
    }
}
/* _content/Project2/Components/Shared/AboutSection.razor.rz.scp.css */
:root[b-k8axto6kjx] {
    --bg-dark: #0a0a0a;
    --bg-card: rgba(20, 20, 20, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent-orange: #ff5c00;
    --accent-purple: #9d2bfb;
    --border-color: rgba(255, 255, 255, 0.1);
    --primary-gradient: linear-gradient(135deg, #ff5c00, #9d2bfb);
}

*[b-k8axto6kjx] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-k8axto6kjx] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* Section principale de présentation */
.company-presentation[b-k8axto6kjx] {
    padding: 6rem 2rem;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

    /* Arrière-plan animé avec effet mesh */
    .company-presentation[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: -30%;
        left: -20%;
        width: 70%;
        height: 160%;
        background: radial-gradient(ellipse at center, rgba(255, 92, 0, 0.1), transparent 60%);
        border-radius: 50%;
        animation: meshFloat-b-k8axto6kjx 25s ease-in-out infinite;
        z-index: 1;
    }

    .company-presentation[b-k8axto6kjx]::after {
        content: '';
        position: absolute;
        bottom: -20%;
        right: -15%;
        width: 60%;
        height: 140%;
        background: radial-gradient(ellipse at center, rgba(157, 43, 251, 0.08), transparent 60%);
        border-radius: 50%;
        animation: meshFloat-b-k8axto6kjx 30s ease-in-out infinite reverse;
        z-index: 1;
    }

/* Grille de fond subtile */
.grid-overlay[b-k8axto6kjx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    animation: gridShift-b-k8axto6kjx 20s linear infinite;
}

/* Particules RFID flottantes */
.rfid-particles[b-k8axto6kjx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.rfid-chip[b-k8axto6kjx] {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--accent-orange);
    border: 2px solid var(--accent-purple);
    border-radius: 4px;
    opacity: 0.4;
    animation: chipFloat-b-k8axto6kjx 12s linear infinite;
}

    .rfid-chip[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        background: var(--accent-purple);
        border-radius: 2px;
        transform: translate(-50%, -50%);
    }

/* Conteneur principal */
.presentation-container[b-k8axto6kjx] {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* En-tête de présentation */
.company-header[b-k8axto6kjx] {
    text-align: center;
    margin-bottom: 4rem;
    animation: slideDown-b-k8axto6kjx 1s ease-out;
}

.company-logo[b-k8axto6kjx] {
    width: 80px;
    height: 80px;
    background: var(--primary-gradient);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2rem;
    color: white;
    position: relative;
    animation: logoSpin-b-k8axto6kjx 3s ease-in-out infinite;
}

    .company-logo[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        inset: -4px;
        background: var(--primary-gradient);
        border-radius: 24px;
        opacity: 0.3;
        animation: logoGlow-b-k8axto6kjx 2s ease-in-out infinite;
    }

.company-title[b-k8axto6kjx] {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    animation: titleGlow-b-k8axto6kjx 4s ease-in-out infinite;
}

.company-subtitle[b-k8axto6kjx] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.company-location[b-k8axto6kjx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--accent-orange);
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

/* Grille de contenu principal */
.presentation-grid[b-k8axto6kjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
}

/* Section mission/vision */
.mission-section[b-k8axto6kjx] {
    animation: slideInLeft-b-k8axto6kjx 1s ease-out 0.3s both;
}

.mission-title[b-k8axto6kjx] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    position: relative;
}

    .mission-title[b-k8axto6kjx]::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--primary-gradient);
        border-radius: 2px;
    }

.mission-text[b-k8axto6kjx] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.key-benefits[b-k8axto6kjx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item[b-k8axto6kjx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInRight-b-k8axto6kjx 0.8s ease-out forwards;
}

    .benefit-item:nth-child(1)[b-k8axto6kjx] {
        animation-delay: 0.8s;
    }

    .benefit-item:nth-child(2)[b-k8axto6kjx] {
        animation-delay: 1s;
    }

    .benefit-item:nth-child(3)[b-k8axto6kjx] {
        animation-delay: 1.2s;
    }

    .benefit-item:hover[b-k8axto6kjx] {
        background: rgba(255, 92, 0, 0.1);
        border-color: var(--accent-orange);
        transform: translateX(10px);
    }

.benefit-icon[b-k8axto6kjx] {
    width: 50px;
    height: 50px;
    background: var(--primary-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.benefit-text[b-k8axto6kjx] {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Section fondateur */
.founder-section[b-k8axto6kjx] {
    animation: slideInRight-b-k8axto6kjx 1s ease-out 0.5s both;
}

.founder-card[b-k8axto6kjx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

    .founder-card[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
    }

    .founder-card:hover[b-k8axto6kjx] {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 92, 0, 0.3);
    }

.founder-avatar[b-k8axto6kjx] {
    width: 120px;
    height: 120px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    margin: 0 auto 1.5rem;
    position: relative;
    animation: avatarFloat-b-k8axto6kjx 4s ease-in-out infinite;
}

    .founder-avatar[b-k8axto6kjx]::before {
        content: '';
        position: absolute;
        inset: -6px;
        background: var(--primary-gradient);
        border-radius: 50%;
        opacity: 0.3;
        animation: avatarGlow-b-k8axto6kjx 3s ease-in-out infinite;
    }

.founder-name[b-k8axto6kjx] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.founder-title[b-k8axto6kjx] {
    font-size: 1rem;
    color: var(--accent-orange);
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.founder-quote[b-k8axto6kjx] {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    padding: 1rem 0;
}

    .founder-quote[b-k8axto6kjx]::before,
    .founder-quote[b-k8axto6kjx]::after {
        content: '"';
        font-size: 2rem;
        color: var(--accent-orange);
        font-weight: bold;
    }

/* Section technologies */
.tech-showcase[b-k8axto6kjx] {
    margin-top: 3rem;
    animation: fadeInUp-b-k8axto6kjx 1s ease-out 0.7s both;
}

.tech-title[b-k8axto6kjx] {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.tech-comparison[b-k8axto6kjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.tech-card[b-k8axto6kjx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .tech-card.old-tech[b-k8axto6kjx] {
        border-color: rgba(255, 0, 0, 0.3);
    }

    .tech-card.new-tech[b-k8axto6kjx] {
        border-color: rgba(0, 255, 0, 0.3);
        background: rgba(0, 255, 0, 0.05);
    }

    .tech-card:hover[b-k8axto6kjx] {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

.tech-icon[b-k8axto6kjx] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.old-tech .tech-icon[b-k8axto6kjx] {
    background: linear-gradient(135deg, #ff4444, #cc0000);
}

.new-tech .tech-icon[b-k8axto6kjx] {
    background: var(--primary-gradient);
}

.tech-name[b-k8axto6kjx] {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.tech-features[b-k8axto6kjx] {
    list-style: none;
    text-align: left;
}

    .tech-features li[b-k8axto6kjx] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

.old-tech .tech-features li[b-k8axto6kjx]::before {
    content: '✗';
    color: #ff4444;
    font-weight: bold;
}

.new-tech .tech-features li[b-k8axto6kjx]::before {
    content: '✓';
    color: #00ff88;
    font-weight: bold;
}

/* Animations keyframes */
@keyframes meshFloat-b-k8axto6kjx {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-30px) rotate(2deg) scale(1.05);
    }

    50% {
        transform: translateY(-15px) rotate(0deg) scale(1);
    }

    75% {
        transform: translateY(-40px) rotate(-2deg) scale(0.95);
    }
}

@keyframes gridShift-b-k8axto6kjx {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40px, 40px);
    }
}

@keyframes chipFloat-b-k8axto6kjx {
    0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-10vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes slideDown-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp-b-k8axto6kjx {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoSpin-b-k8axto6kjx {
    0%, 100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }
}

@keyframes logoGlow-b-k8axto6kjx {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes titleGlow-b-k8axto6kjx {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

@keyframes avatarFloat-b-k8axto6kjx {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes avatarGlow-b-k8axto6kjx {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .company-presentation[b-k8axto6kjx] {
        padding: 3rem 1rem;
    }

    .company-title[b-k8axto6kjx] {
        font-size: 2.5rem;
    }

    .presentation-grid[b-k8axto6kjx] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tech-comparison[b-k8axto6kjx] {
        grid-template-columns: 1fr;
    }

    .founder-card[b-k8axto6kjx] {
        padding: 2rem;
    }
}
/* _content/Project2/Components/Shared/Contact.razor.rz.scp.css */
/* ==========================================
   CONTACT PAGE - STYLES SPÉCIFIQUES
   ========================================== */

/* Section Contact - utilise les classes générales avec quelques surcharges */
.contact[b-ot8np61o95] {
    margin-top: 40px;
    padding-top:100px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .contact[b-ot8np61o95] {
        margin-top: 100px;
    }
}

/* Effets décoratifs spécifiques au contact */
.contact[b-ot8np61o95]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
    opacity: 0.6;
}

.contact[b-ot8np61o95]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 183, 3, 0.05) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(94, 96, 206, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Grid Contact */
.contact-grid[b-ot8np61o95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
}

/* Contact Info - utilise le système de cards général */
.contact-info[b-ot8np61o95] {
    position: sticky;
    top: 2rem;
}

.contact-details[b-ot8np61o95] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-details li[b-ot8np61o95] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    transition: all var(--transition);
    backdrop-filter: blur(10px);
}

.contact-details li:hover[b-ot8np61o95] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 183, 3, 0.3);
    transform: translateX(5px);
}

/* Contact Icons */
.contact-icon[b-ot8np61o95] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-colored);
}

.contact-detail-content h4[b-ot8np61o95] {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 600;
}

.contact-detail-content span[b-ot8np61o95] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Form spécifique - étend les styles généraux */
.contact-form[b-ot8np61o95] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
}

.contact-form[b-ot8np61o95]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 183, 3, 0.5), transparent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Form Row - grille pour les champs côte à côte */
.form-row[b-ot8np61o95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* Styles pour les inputs avec effet glassmorphism */
.contact-form input[b-ot8np61o95],
.contact-form select[b-ot8np61o95],
.contact-form textarea[b-ot8np61o95] {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: var(--text-white);
    font-size: 0.9rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    font-family: inherit;
    box-sizing: border-box;
}

.contact-form input:focus[b-ot8np61o95],
.contact-form select:focus[b-ot8np61o95],
.contact-form textarea:focus[b-ot8np61o95] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}

/* Select spécifique */
.contact-form select[b-ot8np61o95] {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 20 20\'%3e%3cpath stroke=\'%23ffffff\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M6 8l4 4 4-4\'/%3e%3c/svg%3e');
    background-position: right var(--spacing-md) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.contact-form select option[b-ot8np61o95] {
    background-color: var(--gray-800);
    color: var(--text-white);
}

/* Textarea spécifique */
.contact-form textarea[b-ot8np61o95] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Checkbox groups */
.checkbox-group[b-ot8np61o95] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.checkbox-group input[type="checkbox"][b-ot8np61o95] {
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    accent-color: var(--accent-orange);
    flex-shrink: 0;
    cursor: pointer;
}

.checkbox-group label[b-ot8np61o95] {
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
    color: var(--text-secondary);
    margin: 0;
}

/* Submit button - étend le système de boutons général */
.submit-btn[b-ot8np61o95] {
    width: 100%;
    padding: 1.25rem var(--spacing-xl);
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-colored);
}

.submit-btn:hover[b-ot8np61o95] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.submit-btn:disabled[b-ot8np61o95] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Messages d'alerte - utilisent les couleurs du root */
.alert-danger[b-ot8np61o95] {
    background: rgba(255, 93, 143, 0.2);
    border: 2px solid rgba(255, 93, 143, 0.4);
    color: var(--accent-pink);
}

.alert-success[b-ot8np61o95] {
    background: rgba(6, 214, 160, 0.2);
    border: 2px solid rgba(6, 214, 160, 0.4);
    color: var(--accent-green);
}

/* Animation pour les alertes */
@keyframes slideIn-b-ot8np61o95 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section title - utilise les styles généraux */
.section-title[b-ot8np61o95] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-grid[b-ot8np61o95] {
        gap: var(--spacing-2xl);
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .contact-grid[b-ot8np61o95] {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .contact-info[b-ot8np61o95] {
        position: static;
    }
    
    .form-row[b-ot8np61o95] {
        grid-template-columns: 1fr;
    }
    
    .contact-details[b-ot8np61o95] {
        gap: var(--spacing-md);
    }
    
    .contact-details li[b-ot8np61o95] {
        padding: var(--spacing-md);
    }
    
    .contact-icon[b-ot8np61o95] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .contact[b-ot8np61o95] {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .contact-form[b-ot8np61o95] {
        padding: var(--spacing-lg);
    }
    
    .section-title[b-ot8np61o95] {
        font-size: 1.8rem;
    }
}

.subscription-hero[b-ot8np61o95] {
    position: relative;
    padding: 8rem 0 0rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.02) 0%, rgba(0, 180, 216, 0.02) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hero-content[b-ot8np61o95] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title[b-ot8np61o95] {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-ot8np61o95] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* _content/Project2/Components/Shared/Croissance.razor.rz.scp.css */
/* CSS PRÉSENTATION PRODUIT UNIQUE - LECTURE VERTICALE - VERSION COMPLÈTE */
/* Utilise les variables et classes déjà définies dans app.css */

/* SECTION PRINCIPALE */
.product-presentation-section[b-jmnooi2e36] {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
    position: relative;
}

.presentation-container[b-jmnooi2e36] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

/* HEADER DE PRÉSENTATION */
.presentation-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.main-title[b-jmnooi2e36] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
}

.company-badge[b-jmnooi2e36] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-colored);
    margin-bottom: var(--spacing-lg);
}

.presentation-intro[b-jmnooi2e36] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* LAYOUT PRINCIPAL DEUX SECTIONS DISTINCTES */
.main-content-layout[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: var(--spacing-3xl);
    align-items: start;
}

/* SECTION FEATURES REGROUPÉE (GAUCHE) */
.features-section[b-jmnooi2e36] {
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.features-section-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(0, 119, 182, 0.2);
    padding-bottom: var(--spacing-lg);
}

.features-title[b-jmnooi2e36] {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
}

.features-subtitle[b-jmnooi2e36] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.features-list[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* SECTION SHOWCASE PRODUIT (DROITE) */
.product-showcase-section[b-jmnooi2e36] {
    position: sticky;
    top: var(--spacing-xl);
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.product-showcase-header[b-jmnooi2e36] {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 119, 182, 0.2);
    padding-bottom: var(--spacing-lg);
}

.showcase-title[b-jmnooi2e36] {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.showcase-subtitle[b-jmnooi2e36] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

/* ITEMS FEATURES */
.feature-item[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition);
    position: relative;
    border-left: 4px solid var(--primary-blue);
}

    .feature-item:hover[b-jmnooi2e36] {
        transform: translateX(15px);
        box-shadow: var(--shadow-lg);
        border-left-width: 6px;
    }

/* VISUEL FEATURE */
.feature-visual[b-jmnooi2e36] {
    position: relative;
}

.feature-image-container[b-jmnooi2e36] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.feature-image[b-jmnooi2e36] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition);
}

.feature-overlay[b-jmnooi2e36] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition);
    border-radius: var(--radius-lg);
}

.feature-item:hover .feature-overlay[b-jmnooi2e36] {
    opacity: 1;
}

.feature-overlay i[b-jmnooi2e36] {
    font-size: 2rem;
    color: var(--text-white);
}

/* CONTENU FEATURE */
.feature-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feature-header[b-jmnooi2e36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .feature-header h3[b-jmnooi2e36] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-blue);
        margin: 0;
    }

.feature-number[b-jmnooi2e36] {
    background: var(--gradient-primary);
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

    .feature-number.featured[b-jmnooi2e36] {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

.feature-content p[b-jmnooi2e36] {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.feature-highlights[b-jmnooi2e36] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.highlight-tag[b-jmnooi2e36] {
    background: rgba(0, 119, 182, 0.1);
    color: var(--primary-blue);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(0, 119, 182, 0.2);
}

    .highlight-tag.featured[b-jmnooi2e36] {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
        color: #CC8400;
        border-color: rgba(255, 215, 0, 0.3);
    }

/* COLONNE VISUEL PRODUIT */
.main-product-showcase[b-jmnooi2e36] {
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

/* IMAGE PRINCIPALE PRODUIT */
.product-main-image[b-jmnooi2e36] {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.main-product-img[b-jmnooi2e36] {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.product-badge[b-jmnooi2e36] {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: var(--shadow-md);
}

/* STATISTIQUES PRODUIT */
.product-stats[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card[b-jmnooi2e36] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition);
}

    .stat-card:hover[b-jmnooi2e36] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

.stat-icon[b-jmnooi2e36] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.stat-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-jmnooi2e36] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
}

.stat-label[b-jmnooi2e36] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* STACK TECHNOLOGIQUE */
.tech-stack[b-jmnooi2e36] {
    border-top: 1px solid rgba(0, 119, 182, 0.2);
    padding-top: var(--spacing-lg);
}

.tech-stack-header h4[b-jmnooi2e36] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.tech-items[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.tech-item[b-jmnooi2e36] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

    .tech-item i[b-jmnooi2e36] {
        color: var(--primary-blue);
        font-size: 1rem;
        flex-shrink: 0;
    }

    .tech-item span[b-jmnooi2e36] {
        color: var(--text-secondary);
        font-weight: 500;
    }

/* SECTION CTA AVEC IMAGE - MOBILE FRIENDLY */
.cta-section-with-image[b-jmnooi2e36] {
    margin-top: var(--spacing-3xl);
    background: var(--glass-light, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.cta-content-grid[b-jmnooi2e36] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.cta-text-content[b-jmnooi2e36] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.cta-image-section[b-jmnooi2e36] {
    position: relative;
}

.cta-image-container[b-jmnooi2e36] {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.cta-image[b-jmnooi2e36] {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.success-badge[b-jmnooi2e36] {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-md);
}

.cta-title[b-jmnooi2e36] {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.cta-subtitle[b-jmnooi2e36] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.cta-buttons[b-jmnooi2e36] {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ANIMATIONS SPÉCIFIQUES À LA PAGE */
@keyframes fadeInRight-b-jmnooi2e36 {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feature-item:nth-child(1)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.1s both;
}

.feature-item:nth-child(2)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.2s both;
}

.feature-item:nth-child(3)[b-jmnooi2e36] {
    animation: fadeInRight-b-jmnooi2e36 0.6s ease-out 0.3s both;
}

@keyframes fadeInUp-b-jmnooi2e36 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE DESIGN COMPLET */

/* Large Desktop */
@media (max-width: 1200px) {
    .main-content-layout[b-jmnooi2e36] {
        grid-template-columns: 1fr 400px;
        gap: var(--spacing-2xl);
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .tech-items[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-2xl);
        max-width: 900px;
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 2.25rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 250px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .main-content-layout[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .product-showcase-section[b-jmnooi2e36] {
        position: static;
        order: -1;
        max-width: 500px;
        margin: 0 auto var(--spacing-2xl);
    }

    .feature-item[b-jmnooi2e36] {
        grid-template-columns: 100px 1fr;
        gap: var(--spacing-lg);
    }

    .feature-image-container[b-jmnooi2e36] {
        width: 80px;
        height: 80px;
    }

    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-xl);
    }

    .cta-content-grid[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
    }

    .cta-image-section[b-jmnooi2e36] {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 2rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 1rem;
    }

    .cta-buttons[b-jmnooi2e36] {
        justify-content: center;
    }

    .cta-image[b-jmnooi2e36] {
        height: 200px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .main-title[b-jmnooi2e36] {
        font-size: 2.5rem;
    }

    .feature-item[b-jmnooi2e36] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-md);
    }

    .feature-header[b-jmnooi2e36] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .feature-image-container[b-jmnooi2e36] {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .cta-section-with-image[b-jmnooi2e36] {
        margin-top: var(--spacing-2xl);
        padding: var(--spacing-lg);
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out;
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-xl);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.875rem;
        margin-bottom: var(--spacing-sm);
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-lg);
    }

    .cta-buttons[b-jmnooi2e36] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

        .cta-buttons .btn[b-jmnooi2e36] {
            width: 100%;
            justify-content: center;
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 0.95rem;
        }

        .cta-buttons .btn-large[b-jmnooi2e36] {
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 1rem;
        }

    .cta-image-section[b-jmnooi2e36] {
        max-width: 100%;
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out 0.2s both;
    }

    .cta-text-content[b-jmnooi2e36] {
        animation: fadeInUp-b-jmnooi2e36 0.6s ease-out 0.1s both;
    }

    .cta-image[b-jmnooi2e36] {
        height: 180px;
    }

    .success-badge[b-jmnooi2e36] {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .main-title[b-jmnooi2e36] {
        font-size: 2rem;
    }

    .presentation-container[b-jmnooi2e36] {
        padding: 0 var(--spacing-md);
    }

    .feature-item[b-jmnooi2e36] {
        padding: var(--spacing-lg);
    }

    .main-product-showcase[b-jmnooi2e36] {
        padding: var(--spacing-lg);
    }

    .product-stats[b-jmnooi2e36] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-jmnooi2e36] {
        padding: var(--spacing-sm);
    }

    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-md);
        margin-top: var(--spacing-xl);
    }

    .cta-content-grid[b-jmnooi2e36] {
        gap: var(--spacing-lg);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.625rem;
        line-height: 1.3;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .cta-text-content[b-jmnooi2e36] {
        gap: var(--spacing-md);
    }

    .cta-buttons[b-jmnooi2e36] {
        gap: var(--spacing-sm);
    }

    .cta-image[b-jmnooi2e36] {
        height: 150px;
    }

    .success-badge[b-jmnooi2e36] {
        position: static;
        margin-bottom: var(--spacing-sm);
        align-self: flex-start;
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .cta-image-container[b-jmnooi2e36] {
        display: flex;
        flex-direction: column;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .cta-title[b-jmnooi2e36] {
        font-size: 1.5rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.8rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 120px;
    }

    .success-badge[b-jmnooi2e36] {
        font-size: 0.7rem;
        padding: 4px var(--spacing-xs);
    }
}

/* Very Small Mobile */
@media (max-width: 320px) {
    .cta-section-with-image[b-jmnooi2e36] {
        padding: var(--spacing-sm);
    }

    .cta-title[b-jmnooi2e36] {
        font-size: 1.375rem;
    }

    .cta-subtitle[b-jmnooi2e36] {
        font-size: 0.75rem;
    }

    .cta-image[b-jmnooi2e36] {
        height: 100px;
    }

    .cta-buttons .btn[b-jmnooi2e36] {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Accessibilité - Réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .feature-item[b-jmnooi2e36] {
        animation: none !important;
    }

        .feature-item:hover[b-jmnooi2e36],
        .stat-card:hover[b-jmnooi2e36] {
            transform: none !important;
        }

    .cta-section-with-image[b-jmnooi2e36],
    .cta-image-section[b-jmnooi2e36],
    .cta-text-content[b-jmnooi2e36] {
        animation: none !important;
    }
}
/* ICÔNE DIRECTE (quand pas d'image disponible) */
.feature-icon-container[b-jmnooi2e36] {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

    .feature-icon-container i[b-jmnooi2e36] {
        font-size: 2.5rem;
        color: var(--text-white);
    }

.feature-item:hover .feature-icon-container[b-jmnooi2e36] {
    transform: scale(1.05);
    box-shadow: var(--shadow-colored);
}

/* Responsive : ajustement taille icône */
@media (max-width: 992px) {
    .feature-icon-container[b-jmnooi2e36] {
        width: 80px;
        height: 80px;
    }

        .feature-icon-container i[b-jmnooi2e36] {
            font-size: 2rem;
        }
}

@media (max-width: 768px) {
    .feature-icon-container[b-jmnooi2e36] {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

        .feature-icon-container i[b-jmnooi2e36] {
            font-size: 2.5rem;
        }
}
/* _content/Project2/Components/Shared/Footer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FOOTER — Orion System
   Palette : --primary-blue #0077b6 · --accent-cyan #00b4d8
   ═══════════════════════════════════════════════════════════════ */

.footer[b-dab5thiboo] {
    background: #011628;
    color: rgba(255,255,255,0.6);
    padding: 64px 0 0;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

    /* Ligne dégradée signature en haut */
    .footer[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #0077b6 20%, #00b4d8 50%, #0077b6 80%, transparent 100%);
        opacity: 0.7;
    }

    /* Orbes de fond */
    .footer[b-dab5thiboo]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 15% 85%, rgba(0,119,182,0.07) 0%, transparent 45%), radial-gradient(circle at 85% 15%, rgba(0,180,216,0.05) 0%, transparent 45%);
        pointer-events: none;
        z-index: 0;
    }

/* ── Grille 4 colonnes ─────────────────────────────────────────── */

.footer-content[b-dab5thiboo] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 1;
    align-items: start;
}

/* ── Section générique ─────────────────────────────────────────── */

.footer-section[b-dab5thiboo] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Colonne marque ────────────────────────────────────────────── */

.footer-brand[b-dab5thiboo] {
    gap: var(--spacing-lg);
}

.footer-logo .logo[b-dab5thiboo] {
    display: inline-flex;
    transition: opacity 0.2s ease;
}

    .footer-logo .logo:hover[b-dab5thiboo] {
        opacity: 0.8;
    }

.footer-logo img[b-dab5thiboo] {
    height: 64px;
    width: auto;
    /* Logo blanc sur fond sombre */
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}

.footer-desc[b-dab5thiboo] {
    font-size: 0.82rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.45);
    margin: 0;
}

/* Social */
.social-links[b-dab5thiboo] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

    .social-links a[b-dab5thiboo] {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.55);
        font-size: 1rem;
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .social-links a:hover[b-dab5thiboo] {
            background: linear-gradient(135deg, #0077b6, #00b4d8);
            border-color: transparent;
            color: #fff;
            transform: translateY(-3px);
        }

        .social-links a[b-dab5thiboo]::before {
            display: none !important;
        }

/* ── Titres de colonne ─────────────────────────────────────────── */

.footer-heading[b-dab5thiboo] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.9);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    position: relative;
}

    .footer-heading[b-dab5thiboo]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 28px;
        height: 2px;
        background: linear-gradient(90deg, #0077b6, #00b4d8);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

.footer-section:hover .footer-heading[b-dab5thiboo]::after {
    width: 48px;
}

/* ── Liens de navigation ───────────────────────────────────────── */

.footer-links[b-dab5thiboo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .footer-links li[b-dab5thiboo] {
        margin: 0;
    }

    .footer-links a[b-dab5thiboo] {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 0;
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255,255,255,0.45);
        text-decoration: none;
        transition: color 0.2s ease, gap 0.2s ease;
        position: relative;
    }

        .footer-links a i[b-dab5thiboo] {
            font-size: 0.75rem;
            width: 14px;
            text-align: center;
            color: #0077b6;
            flex-shrink: 0;
            transition: color 0.2s ease;
        }

        .footer-links a:hover[b-dab5thiboo] {
            color: rgba(255,255,255,0.9);
            gap: 13px;
        }

            .footer-links a:hover i[b-dab5thiboo] {
                color: #00b4d8;
            }

        .footer-links a[b-dab5thiboo]::before {
            display: none !important;
        }

/* ── Bouton Espace Client dans le footer ───────────────────────── */

.footer-client-area[b-dab5thiboo] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.footer-client-btn[b-dab5thiboo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: #fff !important;
    text-decoration: none;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(0,180,216,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 12px rgba(0,119,182,0.35);
    position: relative;
    overflow: hidden;
}

    .footer-client-btn[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transition: left 0.4s ease;
    }

    .footer-client-btn:hover[b-dab5thiboo]::before {
        left: 100%;
    }

    .footer-client-btn:hover[b-dab5thiboo] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,180,216,0.45);
    }

    .footer-client-btn i[b-dab5thiboo] {
        font-size: 0.8rem;
    }

/* ── Colonne contact ───────────────────────────────────────────── */

.footer-contact-list[b-dab5thiboo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .footer-contact-list li[b-dab5thiboo] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

.footer-contact-icon[b-dab5thiboo] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: rgba(0,119,182,0.12);
    border: 1px solid rgba(0,180,216,0.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00b4d8;
    font-size: 0.8rem;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-top: 2px;
}

.footer-contact-list li:hover .footer-contact-icon[b-dab5thiboo] {
    background: rgba(0,180,216,0.2);
    border-color: rgba(0,180,216,0.35);
}

.footer-contact-list div[b-dab5thiboo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-contact-label[b-dab5thiboo] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    line-height: 1;
}

.footer-contact-list a[b-dab5thiboo] {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.2s ease;
    padding: 0 !important;
    gap: 0 !important;
    display: inline !important;
}

    .footer-contact-list a:hover[b-dab5thiboo] {
        color: #00b4d8 !important;
        transform: none !important;
        padding-left: 0 !important;
    }

    .footer-contact-list a[b-dab5thiboo]::before {
        display: none !important;
    }

/* ── Footer bottom ─────────────────────────────────────────────── */

.footer-bottom[b-dab5thiboo] {
    position: relative;
    z-index: 1;
    margin-top: 48px;
    padding: 20px var(--spacing-2xl);
    border-top: 1px solid rgba(255,255,255,0.07);
    text-align: center;
}

    .footer-bottom[b-dab5thiboo]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, #0077b6, #00b4d8);
        opacity: 0.6;
    }

    .footer-bottom p[b-dab5thiboo] {
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: rgba(255,255,255,0.25);
        margin: 0;
    }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .footer-content[b-dab5thiboo] {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-xl);
    }
}

@media (max-width: 900px) {
    .footer-content[b-dab5thiboo] {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl) var(--spacing-2xl);
        padding: 0 var(--spacing-xl);
    }

    .footer-brand[b-dab5thiboo] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
        flex-wrap: wrap;
    }

    .footer-desc[b-dab5thiboo] {
        max-width: 360px;
    }
}

@media (max-width: 600px) {
    .footer[b-dab5thiboo] {
        padding: 48px 0 0;
    }

    .footer-content[b-dab5thiboo] {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }

    .footer-brand[b-dab5thiboo] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .footer-heading[b-dab5thiboo]::after {
        left: 0;
        transform: none;
    }

    .footer-links a[b-dab5thiboo] {
        font-size: 0.82rem;
        padding: 7px 0;
    }

    .footer-logo img[b-dab5thiboo] {
        height: 52px;
    }

    .footer-bottom[b-dab5thiboo] {
        padding: 16px var(--spacing-lg);
        margin-top: 32px;
    }
}

@media (max-width: 400px) {
    .footer-content[b-dab5thiboo] {
        padding: 0 var(--spacing-md);
    }

    .footer-logo img[b-dab5thiboo] {
        height: 46px;
    }

    .footer-contact-list a[b-dab5thiboo] {
        font-size: 0.76rem;
    }
}

/* ── Accessibilité ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .footer-links a[b-dab5thiboo],
    .social-links a[b-dab5thiboo],
    .footer-client-btn[b-dab5thiboo],
    .footer-logo .logo[b-dab5thiboo],
    .footer-heading[b-dab5thiboo]::after {
        transition: none !important;
        animation: none !important;
    }

        .footer-links a:hover[b-dab5thiboo],
        .social-links a:hover[b-dab5thiboo],
        .footer-client-btn:hover[b-dab5thiboo] {
            transform: none !important;
        }
}

.footer-links a:focus-visible[b-dab5thiboo],
.social-links a:focus-visible[b-dab5thiboo],
.footer-client-btn:focus-visible[b-dab5thiboo],
.footer-contact-list a:focus-visible[b-dab5thiboo] {
    outline: 2px solid #00b4d8;
    outline-offset: 3px;
    border-radius: 4px;
}
/* _content/Project2/Components/Shared/GlobalNavigation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — Orion System
   Palette : --primary-blue #0077b6 · --accent-cyan #00b4d8
   Font    : Montserrat (hérité de app.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables locales ─────────────────────────────────────────── */

.navbar[b-mnx9jgdq83] {
    --nav-h: 68px;
    --nav-bg: #011e30;
    --nav-bg-scroll: rgba(1, 22, 40, 0.97);
    --nav-border: rgba(0, 180, 216, 0.15);
    --nav-text: rgba(255, 255, 255, 0.65);
    --nav-text-hover: #ffffff;
    --nav-blue: #0077b6;
    --nav-cyan: #00b4d8;
    --nav-grad: linear-gradient(135deg, #0077b6, #00b4d8);
    --nav-demo-bg: rgba(0, 180, 216, 0.12);
    --nav-demo-bdr: rgba(0, 180, 216, 0.3);
    --nav-panel-bg: #011628;
    --nav-radius: 10px;
    --nav-transition: 0.25s ease;
}

/* ── Barre de base ─────────────────────────────────────────────── */

.navbar[b-mnx9jgdq83] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-h);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    transition: transform 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.34s ease, background 0.28s ease, box-shadow 0.28s ease;
}

    /* Ligne accent dégradée en bas — signature visuelle */
    .navbar[b-mnx9jgdq83]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--nav-blue) 20%, var(--nav-cyan) 50%, var(--nav-blue) 80%, transparent 100%);
        opacity: 0.55;
        pointer-events: none;
    }

    /* ── États visibilité ──────────────────────────────────────────── */

    .navbar.visible[b-mnx9jgdq83] {
        transform: translateY(0);
        opacity: 1;
    }

    .navbar.hidden[b-mnx9jgdq83] {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

    .navbar.scrolled[b-mnx9jgdq83] {
        background: var(--nav-bg-scroll);
        box-shadow: 0 4px 28px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 180, 216, 0.1);
        border-bottom-color: rgba(0, 180, 216, 0.22);
    }

        .navbar.scrolled.visible[b-mnx9jgdq83] {
            transform: translateY(0);
            opacity: 1;
        }

    .navbar.menu-open[b-mnx9jgdq83] {
        transform: translateY(0) !important;
        opacity: 1 !important;
        background: var(--nav-bg) !important;
        box-shadow: none !important;
    }

/* ── Container ─────────────────────────────────────────────────── */

.nav-container[b-mnx9jgdq83] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    height: var(--nav-h);
    gap: var(--spacing-xl);
    position: relative;
}

/* ── Logo ──────────────────────────────────────────────────────── */

.logo-section[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 1025;
}

.logo[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--nav-transition), transform var(--nav-transition);
}

    .logo:hover[b-mnx9jgdq83] {
        opacity: 0.82;
        transform: scale(1.02);
    }

    .logo img[b-mnx9jgdq83] {
        height: 50px;
        width: auto;
        display: block;
        /* Toujours blanc sur fond sombre */
        filter: brightness(0) invert(1);
        transition: filter var(--nav-transition);
    }

/* ── Nav section (centre) ──────────────────────────────────────── */

.nav-section[b-mnx9jgdq83] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links[b-mnx9jgdq83] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    align-items: center;
}

    /* ── Liens ─────────────────────────────────────────────────────── */

    .nav-links a[b-mnx9jgdq83] {
        display: inline-flex;
        align-items: center;
        color: var(--nav-text);
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        padding: 0.42rem 0.9rem;
        border-radius: 8px;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        transition: color var(--nav-transition), background var(--nav-transition);
    }

        .nav-links a:hover[b-mnx9jgdq83] {
            color: var(--nav-text-hover);
            background: rgba(255, 255, 255, 0.07);
        }

        /* Point indicateur lien actif */
        .nav-links a.active[b-mnx9jgdq83] {
            color: var(--nav-cyan);
        }

            .nav-links a.active[b-mnx9jgdq83]::after {
                content: '';
                position: absolute;
                bottom: 3px;
                left: 50%;
                transform: translateX(-50%);
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--nav-cyan);
                box-shadow: 0 0 8px var(--nav-cyan);
            }

    /* Lien DÉMO — pill colorée qui ressemble à un CTA */
    .nav-links .nav-demo a[b-mnx9jgdq83] {
        background: var(--nav-demo-bg);
        border: 1px solid var(--nav-demo-bdr);
        color: var(--nav-cyan);
        padding: 0.38rem 1rem;
        font-weight: 700;
    }

        .nav-links .nav-demo a:hover[b-mnx9jgdq83] {
            background: rgba(0, 180, 216, 0.22);
            border-color: var(--nav-cyan);
            color: #fff;
            box-shadow: 0 0 18px rgba(0, 180, 216, 0.28);
        }

/* ── Contrôles droite ──────────────────────────────────────────── */

.header-controls[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    z-index: 1005;
}

/* ── Bouton Espace Client ──────────────────────────────────────── */

.client-area-btn[b-mnx9jgdq83] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--nav-grad);
    color: #fff !important;
    text-decoration: none;
    padding: 0.48rem 1.1rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(0, 180, 216, 0.25);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform var(--nav-transition), box-shadow var(--nav-transition);
    box-shadow: 0 3px 14px rgba(0, 119, 182, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

    /* Shimmer au hover */
    .client-area-btn[b-mnx9jgdq83]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
        transition: left 0.42s ease;
    }

    .client-area-btn:hover[b-mnx9jgdq83]::before {
        left: 100%;
    }

    .client-area-btn:hover[b-mnx9jgdq83] {
        transform: translateY(-2px);
        box-shadow: 0 6px 22px rgba(0, 119, 182, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .client-area-btn:active[b-mnx9jgdq83] {
        transform: translateY(0);
    }

@keyframes clientGlow-b-mnx9jgdq83 {
    0%,100% {
        box-shadow: 0 3px 14px rgba(0,119,182,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    }

    50% {
        box-shadow: 0 3px 22px rgba(0,180,216,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    }
}

.client-area-btn[b-mnx9jgdq83] {
    animation: clientGlow-b-mnx9jgdq83 3.5s ease-in-out infinite;
}

    .client-area-btn:hover[b-mnx9jgdq83] {
        animation: none;
    }

.client-icon[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .client-icon svg[b-mnx9jgdq83] {
        fill: currentColor;
        flex-shrink: 0;
    }

/* ── Sélecteur de langue (desktop) ────────────────────────────── */

.language-selector[b-mnx9jgdq83] {
    position: relative;
}

.language-dropdown[b-mnx9jgdq83] {
    position: relative;
    display: inline-block;
}

.language-toggle[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--nav-text);
    padding: 0.38rem 0.78rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background var(--nav-transition), border-color var(--nav-transition), color var(--nav-transition);
}

    .language-toggle[b-mnx9jgdq83]::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3.5px solid currentColor;
        margin-left: 2px;
        opacity: 0.55;
        transition: transform 0.2s ease;
    }

    .language-toggle.active[b-mnx9jgdq83]::after {
        transform: rotate(180deg);
    }

    .language-toggle:hover[b-mnx9jgdq83] {
        background: rgba(0, 180, 216, 0.1);
        border-color: var(--nav-cyan);
        color: var(--nav-cyan);
    }

/* Dropdown langue */
.language-menu[b-mnx9jgdq83] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 148px;
    background: #07273d;
    border: 1px solid rgba(0, 180, 216, 0.22);
    border-radius: var(--nav-radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(0,180,216,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
    z-index: 1010;
    overflow: hidden;
}

    .language-menu.active[b-mnx9jgdq83] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

.language-option[b-mnx9jgdq83] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    .language-option:last-child[b-mnx9jgdq83] {
        border-bottom: none;
    }

    .language-option:hover[b-mnx9jgdq83] {
        background: rgba(0,180,216,0.12);
        color: var(--nav-cyan);
    }

    .language-option.selected[b-mnx9jgdq83] {
        background: rgba(0,180,216,0.1);
        color: var(--nav-cyan);
    }

/* ── Drapeaux ──────────────────────────────────────────────────── */

.flag-icon[b-mnx9jgdq83] {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.28);
}

.flag-fr[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23002654"/><rect x="1" width="1" height="2" fill="%23fff"/><rect x="2" width="1" height="2" fill="%23ce1126"/></svg>');
}

.flag-de[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="1" fill="%23000"/><rect y="1" width="5" height="1" fill="%23dd0000"/><rect y="2" width="5" height="1" fill="%23ffce00"/></svg>');
}

.flag-en[b-mnx9jgdq83] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="s"><path d="M0,0 v30 h60 v-30 z"/></clipPath><clipPath id="t"><path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/></clipPath><g clip-path="url(%23s)"><path d="M0,0 v30 h60 v-30 z" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(%23t)" stroke="%23C8102E" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="%23fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="%23C8102E" stroke-width="6"/></g></svg>');
}

/* ── Menu toggle (mobile) ──────────────────────────────────────── */

.menu-toggle[b-mnx9jgdq83] {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,180,216,0.08);
    border: 1px solid rgba(0,180,216,0.2);
    transition: background var(--nav-transition), border-color var(--nav-transition);
    z-index: 1035;
    position: relative;
}

    .menu-toggle span[b-mnx9jgdq83] {
        display: block;
        width: 20px;
        height: 1.8px;
        background: rgba(255,255,255,0.82);
        border-radius: 2px;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
        transform-origin: center;
    }

    .menu-toggle:hover[b-mnx9jgdq83] {
        background: rgba(0,180,216,0.16);
        border-color: var(--nav-cyan);
    }

        .menu-toggle:hover span[b-mnx9jgdq83] {
            background: var(--nav-cyan);
        }

    .menu-toggle.active[b-mnx9jgdq83] {
        background: rgba(0,180,216,0.12);
        border-color: rgba(0,180,216,0.4);
    }

        .menu-toggle.active span:nth-child(1)[b-mnx9jgdq83] {
            transform: translateY(6.8px) rotate(45deg);
            background: var(--nav-cyan);
        }

        .menu-toggle.active span:nth-child(2)[b-mnx9jgdq83] {
            opacity: 0;
            transform: scaleX(0);
        }

        .menu-toggle.active span:nth-child(3)[b-mnx9jgdq83] {
            transform: translateY(-6.8px) rotate(-45deg);
            background: var(--nav-cyan);
        }

/* Éléments mobile masqués par défaut */
.mobile-client-area[b-mnx9jgdq83],
.mobile-language-selector[b-mnx9jgdq83] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 1078px
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1078px) {

    .nav-container[b-mnx9jgdq83] {
        padding: 0 var(--spacing-md);
        height: 64px;
        justify-content: center;
        position: relative;
    }

    /* Logo centré */
    .logo-section[b-mnx9jgdq83] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .logo img[b-mnx9jgdq83] {
        height: 44px;
    }

    /* Toggle fixé à droite */
    .menu-toggle[b-mnx9jgdq83] {
        display: flex;
        position: fixed !important;
        right: var(--spacing-md);
        top: 14px;
        z-index: 1040 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Menu mobile ouvert */
    .navbar.menu-open .menu-toggle[b-mnx9jgdq83] {
        position: fixed !important;
        right: var(--spacing-md) !important;
        top: 14px !important;
        z-index: 1045 !important;
        display: flex !important;
    }

    .header-controls[b-mnx9jgdq83] {
        display: none;
    }

    .mobile-client-area[b-mnx9jgdq83],
    .mobile-language-selector[b-mnx9jgdq83] {
        display: flex;
        justify-content: center;
    }

    /* ── Panel mobile ─────────────────────────────────────────── */

    .nav-section .nav-links[b-mnx9jgdq83] {
        position: fixed;
        top: 0;
        left: 100%;
        bottom: 0;
        width: 100%;
        height: 100dvh;
        background: var(--nav-panel-bg);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        padding: 88px 0 32px;
        transition: left 0.38s cubic-bezier(0.4,0,0.2,1);
        z-index: 1015;
        margin: 0;
        list-style: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

        /* Ligne accent haut du panel */
        .nav-section .nav-links[b-mnx9jgdq83]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--nav-blue) 25%, var(--nav-cyan) 50%, var(--nav-blue) 75%, transparent);
            opacity: 0.7;
        }

        .nav-section .nav-links.active[b-mnx9jgdq83] {
            left: 0;
        }

        .nav-section .nav-links li[b-mnx9jgdq83] {
            width: 100%;
            text-align: center;
            opacity: 0;
            transform: translateX(24px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

            .nav-section .nav-links li:not(.mobile-language-selector):not(.mobile-client-area)[b-mnx9jgdq83] {
                border-bottom: 1px solid rgba(0,180,216,0.08);
            }

            /* Dernier lien nav (avant langue/client) sans border */
            .nav-section .nav-links li.nav-demo[b-mnx9jgdq83] {
                border-bottom: none;
            }

        .nav-section .nav-links.active li[b-mnx9jgdq83] {
            opacity: 1;
            transform: translateX(0);
        }

            .nav-section .nav-links.active li:nth-child(1)[b-mnx9jgdq83] {
                transition-delay: 0.05s;
            }

            .nav-section .nav-links.active li:nth-child(2)[b-mnx9jgdq83] {
                transition-delay: 0.09s;
            }

            .nav-section .nav-links.active li:nth-child(3)[b-mnx9jgdq83] {
                transition-delay: 0.13s;
            }

            .nav-section .nav-links.active li:nth-child(4)[b-mnx9jgdq83] {
                transition-delay: 0.17s;
            }

            .nav-section .nav-links.active li:nth-child(5)[b-mnx9jgdq83] {
                transition-delay: 0.21s;
            }

            .nav-section .nav-links.active li:nth-child(6)[b-mnx9jgdq83] {
                transition-delay: 0.25s;
            }

            .nav-section .nav-links.active li:nth-child(7)[b-mnx9jgdq83] {
                transition-delay: 0.29s;
            }

        /* Liens mobile */
        .nav-section .nav-links a[b-mnx9jgdq83] {
            display: block;
            width: 100%;
            padding: 1.05rem var(--spacing-2xl);
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: rgba(255,255,255,0.6);
            text-align: center;
            border-radius: 0;
            background: transparent;
            transition: color 0.2s ease, background 0.2s ease, letter-spacing 0.2s ease;
        }

            .nav-section .nav-links a[b-mnx9jgdq83]::after {
                display: none;
            }

            .nav-section .nav-links a:hover[b-mnx9jgdq83] {
                color: var(--nav-cyan);
                background: rgba(0,180,216,0.06);
                letter-spacing: 0.2em;
            }

    /* Lien démo mobile — même cyan, sans border */
    .nav-links .nav-demo a[b-mnx9jgdq83] {
        color: var(--nav-cyan) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-weight: 800 !important;
    }

    /* ── Langue mobile ────────────────────────────────────────── */

    .mobile-language-selector[b-mnx9jgdq83] {
        margin-top: var(--spacing-lg);
        padding: var(--spacing-lg) var(--spacing-2xl) 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        position: relative;
        width: 200px;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        background: rgba(0,180,216,0.08);
        border: 1px solid rgba(0,180,216,0.22);
        border-radius: 8px;
        padding: 0.65rem 1.1rem;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: rgba(255,255,255,0.62);
        cursor: pointer;
        transition: background var(--nav-transition), border-color var(--nav-transition), color var(--nav-transition);
        box-sizing: border-box;
    }

        .mobile-language-toggle[b-mnx9jgdq83]::after {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3.5px solid currentColor;
            opacity: 0.55;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .mobile-language-toggle.active[b-mnx9jgdq83]::after {
            transform: rotate(180deg);
        }

        .mobile-language-toggle:hover[b-mnx9jgdq83] {
            background: rgba(0,180,216,0.14);
            border-color: var(--nav-cyan);
            color: var(--nav-cyan);
        }

        .mobile-language-toggle .flag-icon[b-mnx9jgdq83] {
            width: 18px;
            height: 13px;
        }

    .mobile-language-menu[b-mnx9jgdq83] {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #07273d;
        border: 1px solid rgba(0,180,216,0.22);
        border-radius: var(--nav-radius);
        box-shadow: 0 -8px 32px rgba(0,0,0,0.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px) scale(0.97);
        transform-origin: bottom center;
        transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
        z-index: 1050;
        overflow: hidden;
    }

        .mobile-language-menu.active[b-mnx9jgdq83] {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

    .mobile-language-options[b-mnx9jgdq83] {
        display: flex;
        flex-direction: column;
    }

    .mobile-language-option[b-mnx9jgdq83] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.75rem 1.1rem;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: rgba(255,255,255,0.52);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

        .mobile-language-option:last-child[b-mnx9jgdq83] {
            border-bottom: none;
        }

        .mobile-language-option:hover[b-mnx9jgdq83] {
            background: rgba(0,180,216,0.1);
            color: var(--nav-cyan);
        }

        .mobile-language-option.selected[b-mnx9jgdq83] {
            background: rgba(0,180,216,0.08);
            color: var(--nav-cyan);
        }

        .mobile-language-option .flag-icon[b-mnx9jgdq83] {
            width: 18px;
            height: 13px;
        }

    /* ── Bouton client mobile ─────────────────────────────────── */

    .mobile-client-area[b-mnx9jgdq83] {
        margin-top: var(--spacing-md);
        padding: 0 var(--spacing-2xl) var(--spacing-lg);
        width: 100%;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: var(--nav-grad) !important;
        color: #fff !important;
        text-decoration: none !important;
        padding: 0.85rem 2.2rem !important;
        border-radius: 8px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.12em !important;
        border: 1px solid rgba(0,180,216,0.28) !important;
        box-shadow: 0 4px 18px rgba(0,119,182,0.4) !important;
        transition: transform var(--nav-transition), box-shadow var(--nav-transition) !important;
        cursor: pointer !important;
    }

        .mobile-client-btn:hover[b-mnx9jgdq83] {
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 28px rgba(0,180,216,0.5) !important;
        }

        .mobile-client-btn[b-mnx9jgdq83]::after {
            display: none !important;
        }

        .mobile-client-btn .client-icon svg[b-mnx9jgdq83] {
            width: 18px !important;
            height: 18px !important;
            fill: currentColor !important;
        }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 480px
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
    .nav-container[b-mnx9jgdq83] {
        height: 58px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 40px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        top: 12px;
        right: var(--spacing-md);
        padding: 9px;
    }

        .menu-toggle span[b-mnx9jgdq83] {
            width: 18px;
        }

    .nav-section .nav-links a[b-mnx9jgdq83] {
        font-size: 0.82rem;
        padding: 0.95rem var(--spacing-xl);
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        width: 178px;
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        padding: 0.75rem 1.9rem !important;
        font-size: 0.76rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 375px
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 375px) {
    .nav-container[b-mnx9jgdq83] {
        height: 54px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 36px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        top: 10px;
        padding: 8px;
    }

        .menu-toggle span[b-mnx9jgdq83] {
            width: 16px;
            height: 1.5px;
        }

    .nav-section .nav-links a[b-mnx9jgdq83] {
        font-size: 0.78rem;
        padding: 0.88rem var(--spacing-lg);
    }

    .mobile-language-dropdown[b-mnx9jgdq83] {
        width: 158px;
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        padding: 0.7rem 1.5rem !important;
        font-size: 0.72rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Petits écrans en hauteur (< 600px) — liens compacts
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1078px) and (max-height: 600px) {

    .nav-section .nav-links[b-mnx9jgdq83] {
        padding: 72px 0 16px;
        justify-content: flex-start;
    }

        .nav-section .nav-links a[b-mnx9jgdq83] {
            font-size: 0.78rem !important;
            padding: 0.62rem var(--spacing-xl) !important;
        }

        .nav-section .nav-links li[b-mnx9jgdq83] {
            border-bottom: 1px solid rgba(0,180,216,0.05);
        }

    .mobile-language-selector[b-mnx9jgdq83] {
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-xl) 0;
    }

    .mobile-language-toggle[b-mnx9jgdq83] {
        padding: 0.45rem 0.9rem;
        font-size: 0.7rem;
    }

    .mobile-client-area[b-mnx9jgdq83] {
        margin-top: var(--spacing-sm);
        padding: 0 var(--spacing-xl) var(--spacing-sm);
    }

    .mobile-client-btn[b-mnx9jgdq83] {
        padding: 0.6rem 1.6rem !important;
        font-size: 0.72rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Paysage court
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-height: 500px) and (orientation: landscape) {
    .nav-container[b-mnx9jgdq83] {
        height: 50px;
    }

    .logo img[b-mnx9jgdq83] {
        height: 36px;
    }

    .menu-toggle[b-mnx9jgdq83] {
        top: 9px;
        padding: 7px;
    }

        .menu-toggle span[b-mnx9jgdq83] {
            width: 16px;
            height: 1.5px;
        }

    .nav-section .nav-links[b-mnx9jgdq83] {
        padding: 60px 0 32px;
    }

        .nav-section .nav-links a[b-mnx9jgdq83] {
            font-size: 0.78rem;
            padding: 0.6rem var(--spacing-xl);
        }
}

/* ═══════════════════════════════════════════════════════════════
   ≥ 1079px — pas d'animation mobile
   ═══════════════════════════════════════════════════════════════ */

@media screen and (min-width: 1079px) {
    .nav-links li[b-mnx9jgdq83] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Accessibilité
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .navbar[b-mnx9jgdq83], .logo[b-mnx9jgdq83], .nav-links a[b-mnx9jgdq83], .language-toggle[b-mnx9jgdq83], .language-menu[b-mnx9jgdq83],
    .language-option[b-mnx9jgdq83], .client-area-btn[b-mnx9jgdq83], .client-area-btn[b-mnx9jgdq83]::before,
    .menu-toggle[b-mnx9jgdq83], .menu-toggle span[b-mnx9jgdq83], .nav-section .nav-links[b-mnx9jgdq83],
    .nav-section .nav-links li[b-mnx9jgdq83] {
        transition: none !important;
        animation: none !important;
    }

        .nav-section .nav-links li[b-mnx9jgdq83] {
            opacity: 1 !important;
            transform: none !important;
        }
}

/* Focus clavier */
.nav-links a:focus-visible[b-mnx9jgdq83],
.client-area-btn:focus-visible[b-mnx9jgdq83],
.language-toggle:focus-visible[b-mnx9jgdq83],
.language-option:focus-visible[b-mnx9jgdq83],
.mobile-language-toggle:focus-visible[b-mnx9jgdq83],
.mobile-language-option:focus-visible[b-mnx9jgdq83],
.mobile-client-btn:focus-visible[b-mnx9jgdq83],
.menu-toggle:focus-visible[b-mnx9jgdq83] {
    outline: 2px solid var(--nav-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}
/* _content/Project2/Components/Shared/MainComponent/Analytique.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   ANALYTIQUE SECTION
   ═══════════════════════════════════════════════ */

.analytique-section[b-28qozkwe3b] {
    padding: var(--spacing-3xl) 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--secondary-blue);
}

.analytique-header[b-28qozkwe3b] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-2xl);
}

/* ── Stats row ─────────────────────────────────── */

.analytique-stats-row[b-28qozkwe3b] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
}

.ana-stat[b-28qozkwe3b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 1.5rem;
    border-right: 1px solid var(--border-color);
}

.ana-stat:last-child[b-28qozkwe3b] {
    border-right: none;
}

.ana-stat-num[b-28qozkwe3b] {
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.ana-stat-label[b-28qozkwe3b] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Grid ──────────────────────────────────────── */

.analytique-grid[b-28qozkwe3b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

/* ── Card ──────────────────────────────────────── */

.ana-card[b-28qozkwe3b] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

.ana-card[b-28qozkwe3b]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.ana-card:hover[b-28qozkwe3b] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-colored);
}

.ana-card:hover[b-28qozkwe3b]::before {
    transform: scaleX(1);
}

.ana-card--featured[b-28qozkwe3b] {
    grid-column: span 2;
}

.ana-card-top[b-28qozkwe3b] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.ana-icon[b-28qozkwe3b] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1rem;
}

.ana-card-top h3[b-28qozkwe3b] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin: 0;
}

.ana-card p[b-28qozkwe3b] {
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

/* ── Mini chart (featured card) ────────────────── */

.ana-mini-chart[b-28qozkwe3b] {
    background: var(--bg-primary);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ana-bar-row[b-28qozkwe3b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ana-bar-label[b-28qozkwe3b] {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 600;
    width: 28px;
    flex-shrink: 0;
}

.ana-bar-track[b-28qozkwe3b] {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.ana-bar-fill[b-28qozkwe3b] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width .6s ease;
}

.ana-bar-fill--accent[b-28qozkwe3b] {
    background: linear-gradient(135deg, #0077b6, #00b4d8);
}

.ana-bar-val[b-28qozkwe3b] {
    font-size: .75rem;
    font-weight: 700;
    color: var(--primary-blue);
    width: 54px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Trip KPIs ─────────────────────────────────── */

.ana-kpi-list[b-28qozkwe3b] {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius);
}

.ana-kpi[b-28qozkwe3b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    padding-right: var(--spacing-md);
    border-right: 1px solid var(--border-color);
}

.ana-kpi:last-child[b-28qozkwe3b] {
    border-right: none;
    padding-right: 0;
}

.ana-kpi-label[b-28qozkwe3b] {
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.ana-kpi-val[b-28qozkwe3b] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-blue-dark);
    line-height: 1;
}

.ana-kpi-val--green[b-28qozkwe3b] {
    color: #166534;
}

/* ── Invoice list ──────────────────────────────── */

.ana-invoice-list[b-28qozkwe3b] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ana-invoice-row[b-28qozkwe3b] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.ana-inv-ref[b-28qozkwe3b] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary-blue);
    width: 42px;
    flex-shrink: 0;
}

.ana-inv-shop[b-28qozkwe3b] {
    font-size: .8rem;
    color: var(--text-secondary);
    flex: 1;
}

.ana-inv-status[b-28qozkwe3b] {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ana-inv-status--paid[b-28qozkwe3b] {
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
}

.ana-inv-status--pending[b-28qozkwe3b] {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

/* ── Alert list ────────────────────────────────── */

.ana-alert-list[b-28qozkwe3b] {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ana-alert[b-28qozkwe3b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 500;
}

.ana-alert i[b-28qozkwe3b] {
    font-size: .9rem;
    flex-shrink: 0;
}

.ana-alert--warning[b-28qozkwe3b] {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.ana-alert--danger[b-28qozkwe3b] {
    background: rgba(220, 38, 38, 0.07);
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.ana-alert--ok[b-28qozkwe3b] {
    background: rgba(34, 197, 94, 0.07);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 992px) {
    .analytique-grid[b-28qozkwe3b] {
        grid-template-columns: 1fr;
    }

    .ana-card--featured[b-28qozkwe3b] {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .analytique-stats-row[b-28qozkwe3b] {
        gap: 1.5rem;
    }

    .ana-stat[b-28qozkwe3b] {
        padding: 0 .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ana-card:hover[b-28qozkwe3b] {
        transform: none;
    }
}
/* _content/Project2/Components/Shared/MainComponent/HardwareRetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   HARDWARE RETAIL SECTION
   ═══════════════════════════════════════════════ */

.hardware-section[b-fo710a2cjm] {
    padding: var(--spacing-3xl) 0;
    background: var(--white);
    border-top: 1px solid var(--secondary-blue);
}

.hardware-header[b-fo710a2cjm] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-3xl);
}

.hardware-layout[b-fo710a2cjm] {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--spacing-3xl);
    align-items: start;
}

/* ── Feature items ─────────────────────────────── */

.hardware-features[b-fo710a2cjm] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hw-feature-item[b-fo710a2cjm] {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border-color);
    transition: transform var(--transition);
}

.hw-feature-item:first-child[b-fo710a2cjm] {
    padding-top: 0;
}

.hw-feature-item:last-child[b-fo710a2cjm] {
    border-bottom: none;
    padding-bottom: 0;
}

.hw-feature-item:hover[b-fo710a2cjm] {
    transform: translateX(6px);
}

.hw-feat-icon[b-fo710a2cjm] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.1rem;
    transition: background var(--transition), color var(--transition);
}

.hw-feature-item:hover .hw-feat-icon[b-fo710a2cjm] {
    background: var(--gradient-primary);
    color: var(--white);
}

.hw-feat-content[b-fo710a2cjm] {
    flex: 1;
}

.hw-feat-header[b-fo710a2cjm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.hw-feat-header h3[b-fo710a2cjm] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin: 0;
    line-height: 1.3;
}

.hw-feat-content p[b-fo710a2cjm] {
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
}

.app-badge--new[b-fo710a2cjm] {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border: 0.5px solid rgba(34, 197, 94, 0.3);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 100px;
    display: inline-block;
}

.app-badge--soon[b-fo710a2cjm] {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 0.5px solid rgba(245, 158, 11, 0.3);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 100px;
    display: inline-block;
}

/* ── Live cards (right column) ─────────────────── */

.hardware-visuals[b-fo710a2cjm] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: sticky;
    top: var(--spacing-xl);
}

.hw-live-card[b-fo710a2cjm] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
}

.hw-live-header[b-fo710a2cjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.hw-live-dot[b-fo710a2cjm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    flex-shrink: 0;
}

.hw-live-dot--pulse[b-fo710a2cjm] {
    background: #22c55e;
    animation: livePulse-b-fo710a2cjm 1.8s ease-in-out infinite;
}

@keyframes livePulse-b-fo710a2cjm {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.hw-live-label[b-fo710a2cjm] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hw-live-rows[b-fo710a2cjm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.hw-live-row[b-fo710a2cjm] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.hw-live-row--success[b-fo710a2cjm] {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
    color: #166534;
}

.hw-row-dot[b-fo710a2cjm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-blue);
    flex-shrink: 0;
}

.hw-row-dot--green[b-fo710a2cjm] {
    background: #22c55e;
}

.hw-row-dot--pulse[b-fo710a2cjm] {
    background: #22c55e;
    animation: livePulse-b-fo710a2cjm 1.8s ease-in-out infinite;
}

.hw-live-status[b-fo710a2cjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 119, 182, 0.07);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary-blue-dark);
}

.hw-live-status--gate[b-fo710a2cjm] {
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1100px) {
    .hardware-layout[b-fo710a2cjm] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .hardware-visuals[b-fo710a2cjm] {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hardware-section[b-fo710a2cjm] {
        padding: var(--spacing-2xl) 0;
    }

    .hardware-visuals[b-fo710a2cjm] {
        grid-template-columns: 1fr;
    }

    .hw-feature-item:hover[b-fo710a2cjm] {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-live-dot--pulse[b-fo710a2cjm],
    .hw-row-dot--pulse[b-fo710a2cjm],
    .badge-dot[b-fo710a2cjm] {
        animation: none;
    }
    .hw-feature-item:hover[b-fo710a2cjm] {
        transform: none;
    }
}
/* _content/Project2/Components/Shared/MainComponent/MobileApps.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   MOBILE APPS SECTION
   ═══════════════════════════════════════════════ */

.mobile-apps-section[b-7r83kx4cy8] {
    padding: var(--spacing-3xl) 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--secondary-blue);
    position: relative;
}

.mobile-apps-header[b-7r83kx4cy8] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-3xl);
}

.section-badge[b-7r83kx4cy8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 119, 182, 0.07);
    border: 0.5px solid rgba(0, 119, 182, 0.2);
    color: var(--primary-blue);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.2rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.badge-dot[b-7r83kx4cy8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: badgePulse-b-7r83kx4cy8 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes badgePulse-b-7r83kx4cy8 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

.section-title[b-7r83kx4cy8] {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: .9rem;
}

.section-subtitle[b-7r83kx4cy8] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ── Grilles ───────────────────────────────────── */

.apps-grid-top[b-7r83kx4cy8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.apps-grid-bottom[b-7r83kx4cy8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

/* ── App Card ──────────────────────────────────── */

.app-card[b-7r83kx4cy8] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

.app-card[b-7r83kx4cy8]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.app-card:hover[b-7r83kx4cy8] {
    transform: translateY(-5px);
    box-shadow: var(--shadow-colored);
}

.app-card:hover[b-7r83kx4cy8]::before {
    transform: scaleX(1);
}

.app-card-header[b-7r83kx4cy8] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.app-card-header h3[b-7r83kx4cy8] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.app-card p[b-7r83kx4cy8] {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* ── Icon ──────────────────────────────────────── */

.app-icon-wrap[b-7r83kx4cy8] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.1rem;
}

/* ── Badges ────────────────────────────────────── */

.app-badge[b-7r83kx4cy8] {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 100px;
}

.app-badge--live[b-7r83kx4cy8] {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border: 0.5px solid rgba(34, 197, 94, 0.3);
}

.app-badge--soon[b-7r83kx4cy8] {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 0.5px solid rgba(245, 158, 11, 0.3);
}

/* ── Feature list ──────────────────────────────── */

.app-features-list[b-7r83kx4cy8] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.app-features-list li[b-7r83kx4cy8] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .83rem;
    color: var(--text-primary);
    font-weight: 500;
    background: var(--bg-primary);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
}

.feat-dot[b-7r83kx4cy8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    flex-shrink: 0;
}

.feat-dot--green[b-7r83kx4cy8] { background: #22c55e; }
.feat-dot--orange[b-7r83kx4cy8] { background: #f59e0b; }

.feat-dot--pulse[b-7r83kx4cy8] {
    background: #22c55e;
    animation: featurePulse-b-7r83kx4cy8 1.8s ease-in-out infinite;
}

@keyframes featurePulse-b-7r83kx4cy8 {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ── Tags ──────────────────────────────────────── */

.app-tags[b-7r83kx4cy8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Wide card with split layout ───────────────── */

.app-card--wide[b-7r83kx4cy8] {
    padding: var(--spacing-xl);
}

.app-card-split[b-7r83kx4cy8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.app-card-split-text p[b-7r83kx4cy8] {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* ── Mini UI preview ───────────────────────────── */

.mini-ui-card[b-7r83kx4cy8] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mui-row[b-7r83kx4cy8] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.mui-row--green[b-7r83kx4cy8] {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.2);
    color: #166534;
}

.mui-dot[b-7r83kx4cy8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-blue);
    flex-shrink: 0;
}

.mui-dot--green[b-7r83kx4cy8] {
    background: #22c55e;
    animation: featurePulse-b-7r83kx4cy8 1.8s ease-in-out infinite;
}

.mui-dot--orange[b-7r83kx4cy8] { background: #f59e0b; }

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1100px) {
    .apps-grid-top[b-7r83kx4cy8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .apps-grid-top[b-7r83kx4cy8],
    .apps-grid-bottom[b-7r83kx4cy8] {
        grid-template-columns: 1fr;
    }

    .app-card-split[b-7r83kx4cy8] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .mobile-apps-section[b-7r83kx4cy8] {
        padding: var(--spacing-2xl) 0;
    }

    .app-card-header h3[b-7r83kx4cy8] {
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge-dot[b-7r83kx4cy8],
    .feat-dot--pulse[b-7r83kx4cy8],
    .mui-dot--green[b-7r83kx4cy8] {
        animation: none;
    }
    .app-card:hover[b-7r83kx4cy8] {
        transform: none;
    }
}
/* _content/Project2/Components/Shared/MainComponent/OrionAi.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   CERES AI SECTION — fond sombre bleu marine
   ═══════════════════════════════════════════════ */

.ceres-section[b-shcfbfgdgh] {
    padding: var(--spacing-3xl) 0;
    background: var(--primary-blue-dark);
    border-top: none;
    position: relative;
    overflow: hidden;
}

.ceres-section[b-shcfbfgdgh]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 180, 216, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 216, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.ceres-header[b-shcfbfgdgh] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-3xl);
    position: relative;
    z-index: 1;
}

.section-badge--light[b-shcfbfgdgh] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #90e0ef;
}

.badge-dot--cyan[b-shcfbfgdgh] {
    background: #48cae4;
}

.ceres-title[b-shcfbfgdgh] {
    color: var(--white) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    background-clip: unset !important;
}

.ceres-subtitle[b-shcfbfgdgh] {
    color: rgba(255, 255, 255, 0.65) !important;
    max-width: 600px;
}

/* ── Layout ────────────────────────────────────── */

.ceres-layout[b-shcfbfgdgh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ── Demo cards ────────────────────────────────── */

.ceres-demos[b-shcfbfgdgh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.ceres-demo-card[b-shcfbfgdgh] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background var(--transition), border-color var(--transition);
}

.ceres-demo-card:hover[b-shcfbfgdgh] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 180, 216, 0.3);
}

.ceres-bubble[b-shcfbfgdgh] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .85rem;
    line-height: 1.55;
}

.ceres-bubble--user[b-shcfbfgdgh] {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
    padding-left: var(--spacing-sm);
    border-left: 2px solid #48cae4;
}

.ceres-bubble--user i[b-shcfbfgdgh] {
    color: #48cae4;
    font-size: .85rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.ceres-bubble--ai[b-shcfbfgdgh] {
    color: #90e0ef;
    font-weight: 500;
    flex-direction: column;
    gap: 3px;
}

.ceres-ai-label[b-shcfbfgdgh] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #48cae4;
}

/* ── Right column ──────────────────────────────── */

.ceres-right[b-shcfbfgdgh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* ── Capabilities grid ─────────────────────────── */

.ceres-caps-grid[b-shcfbfgdgh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ceres-cap-card[b-shcfbfgdgh] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: background var(--transition);
}

.ceres-cap-card:hover[b-shcfbfgdgh] {
    background: rgba(255, 255, 255, 0.09);
}

.ceres-cap-icon[b-shcfbfgdgh] {
    width: 38px;
    height: 38px;
    background: rgba(0, 180, 216, 0.15);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #48cae4;
    font-size: .95rem;
    margin-bottom: var(--spacing-sm);
}

.ceres-cap-title[b-shcfbfgdgh] {
    font-size: .88rem;
    font-weight: 700;
    color: #e0f2fe;
    margin-bottom: 5px;
    line-height: 1.3;
}

.ceres-cap-desc[b-shcfbfgdgh] {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* ── Stats strip ───────────────────────────────── */

.ceres-stats-strip[b-shcfbfgdgh] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    gap: 0;
}

.ceres-strip-stat[b-shcfbfgdgh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ceres-strip-num[b-shcfbfgdgh] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #90e0ef;
    line-height: 1;
}

.ceres-strip-label[b-shcfbfgdgh] {
    font-size: .65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.ceres-strip-divider[b-shcfbfgdgh] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1000px) {
    .ceres-layout[b-shcfbfgdgh] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
}

@media (max-width: 600px) {
    .ceres-caps-grid[b-shcfbfgdgh] {
        grid-template-columns: 1fr;
    }

    .ceres-stats-strip[b-shcfbfgdgh] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .ceres-strip-divider[b-shcfbfgdgh] {
        width: 60px;
        height: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ceres-demo-card:hover[b-shcfbfgdgh],
    .ceres-cap-card:hover[b-shcfbfgdgh] {
        background: rgba(255, 255, 255, 0.04);
    }
}
/* _content/Project2/Components/Shared/MainComponent/Roadmap.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   ROADMAP SECTION — fond sombre suite CeresAI
   ═══════════════════════════════════════════════ */

.roadmap-section[b-jibgbvo3cl] {
    padding: var(--spacing-3xl) 0;
    background: #011627;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}

.roadmap-section[b-jibgbvo3cl]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 180, 216, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 216, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.roadmap-header[b-jibgbvo3cl] {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.badge-dot--amber[b-jibgbvo3cl] { background: #fbbf24; }

.roadmap-title[b-jibgbvo3cl] {
    color: var(--white) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    background-clip: unset !important;
}

.roadmap-subtitle[b-jibgbvo3cl] {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Timeline ──────────────────────────────────── */

.roadmap-timeline[b-jibgbvo3cl] {
    position: relative;
    margin-bottom: var(--spacing-xl);
    padding: 0 calc(12.5%);
    z-index: 1;
}

.rm-line[b-jibgbvo3cl] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.rm-dots[b-jibgbvo3cl] {
    display: flex;
    justify-content: space-between;
    margin-top: -8px;
    padding: 0 calc(12.5% - 8px);
}

.rm-timeline-dot[b-jibgbvo3cl] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: #011627;
}

.rm-td--done[b-jibgbvo3cl] {
    background: #023e8a;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.rm-td--wip[b-jibgbvo3cl] {
    background: #023e8a;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.rm-td--next[b-jibgbvo3cl] {
    background: #011627;
    border-color: #fbbf24;
}

.rm-td--future[b-jibgbvo3cl] {
    background: #011627;
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Grid ──────────────────────────────────────── */

.roadmap-grid[b-jibgbvo3cl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* ── Column base ───────────────────────────────── */

.rm-col[b-jibgbvo3cl] {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
}

.rm-col--live[b-jibgbvo3cl] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.04);
}

.rm-col--wip[b-jibgbvo3cl] {
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.04);
}

.rm-col--next[b-jibgbvo3cl] {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.04);
}

.rm-col--future[b-jibgbvo3cl] {
    border-color: rgba(255, 255, 255, 0.06);
}

/* ── Phase label ───────────────────────────────── */

.rm-col-phase[b-jibgbvo3cl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rm-col-phase i[b-jibgbvo3cl] {
    font-size: .75rem;
}

.rm-phase--live[b-jibgbvo3cl] { color: #4ade80; }
.rm-phase--wip[b-jibgbvo3cl] { color: #38bdf8; }
.rm-phase--next[b-jibgbvo3cl] { color: #fbbf24; }
.rm-phase--future[b-jibgbvo3cl] { color: rgba(255, 255, 255, 0.25); }

/* ── Column title ──────────────────────────────── */

.rm-col-title[b-jibgbvo3cl] {
    font-size: .95rem;
    font-weight: 700;
    color: #e0f2fe;
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.rm-col-title--future[b-jibgbvo3cl] {
    color: rgba(255, 255, 255, 0.3);
}

/* ── Items list ────────────────────────────────── */

.rm-items-list[b-jibgbvo3cl] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.rm-item[b-jibgbvo3cl] {
    font-size: .8rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}

.rm-item:last-child[b-jibgbvo3cl] {
    border-bottom: none;
}

.rm-item[b-jibgbvo3cl]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.rm-item--done[b-jibgbvo3cl] {
    color: #86efac;
}

.rm-item--done[b-jibgbvo3cl]::before { background: #4ade80; }

.rm-item--wip[b-jibgbvo3cl] {
    color: #7dd3fc;
}

.rm-item--wip[b-jibgbvo3cl]::before { background: #38bdf8; }

.rm-item--next[b-jibgbvo3cl] {
    color: #fcd34d;
}

.rm-item--next[b-jibgbvo3cl]::before { background: #fbbf24; }

.rm-item--future[b-jibgbvo3cl] {
    color: rgba(255, 255, 255, 0.3);
}

.rm-item--future[b-jibgbvo3cl]::before { background: rgba(255, 255, 255, 0.15); }

/* ── Status badge ──────────────────────────────── */

.rm-status-badge[b-jibgbvo3cl] {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    margin-top: var(--spacing-sm);
}

.rm-status--live[b-jibgbvo3cl] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 0.5px solid rgba(34, 197, 94, 0.3);
}

.rm-status--wip[b-jibgbvo3cl] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 0.5px solid rgba(56, 189, 248, 0.3);
}

.rm-status--next[b-jibgbvo3cl] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 0.5px solid rgba(251, 191, 36, 0.3);
}

.rm-status--future[b-jibgbvo3cl] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.25);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1100px) {
    .roadmap-grid[b-jibgbvo3cl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rm-dots[b-jibgbvo3cl] {
        display: none;
    }

    .rm-line[b-jibgbvo3cl] {
        display: none;
    }
}

@media (max-width: 640px) {
    .roadmap-grid[b-jibgbvo3cl] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fa-spin[b-jibgbvo3cl] {
        animation: none;
    }
}
/* _content/Project2/Components/Shared/MainHome.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HERO SECTION — Clean Editorial + Canvas Background
   Intégré avec app.css (Montserrat + variables existantes)
   ═══════════════════════════════════════════════════════════════ */

/* ── Canvas fond animé ─────────────────────────────────────────── */

#hero-bg-canvas[b-hrbvsb3gpy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    #hero-bg-canvas[b-hrbvsb3gpy] {
        display: none;
    }
}

/* ── Section base ──────────────────────────────────────────────── */

.hero[b-hrbvsb3gpy] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--white);
    overflow: hidden;
    border-top: none;
}

/* ── Shapes décoratifs CSS (complètent le canvas) ─────────────── */

.hero-bg-shapes[b-hrbvsb3gpy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-shape[b-hrbvsb3gpy] {
    position: absolute;
    border-radius: 50%;
}

.hero-shape-1[b-hrbvsb3gpy] {
    width: 650px;
    height: 650px;
    top: -200px;
    right: -120px;
    background: radial-gradient(ellipse, rgba(0, 180, 216, 0.06) 0%, transparent 70%);
}

.hero-shape-2[b-hrbvsb3gpy] {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -100px;
    background: radial-gradient(ellipse, rgba(0, 119, 182, 0.045) 0%, transparent 65%);
}

.hero-grid-overlay[b-hrbvsb3gpy] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 119, 182, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 119, 182, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── Layout principal ──────────────────────────────────────────── */

.hero .hero-container[b-hrbvsb3gpy] {
    max-width: var(--max-width-site);
    width: 100%;
    margin: 0 auto;
    padding: 3rem var(--spacing-2xl) 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ── Colonne gauche : contenu ──────────────────────────────────── */

.hero-content[b-hrbvsb3gpy] {
    display: flex;
    flex-direction: column;
}

/* Badge IA */
.hero-badge[b-hrbvsb3gpy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 119, 182, 0.07);
    border: 0.5px solid rgba(0, 119, 182, 0.2);
    color: var(--primary-blue);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.4rem;
    width: fit-content;
}

.hero-badge-dot[b-hrbvsb3gpy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: heroBadgePulse-b-hrbvsb3gpy 2s ease-in-out infinite;
}

@keyframes heroBadgePulse-b-hrbvsb3gpy {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.8);
    }
}

/* Titre h1 — override du gradient blanc→rose de l'ancien hero */
.hero h1[b-hrbvsb3gpy] {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--text-primary);
    margin-bottom: 1.1rem;
    text-transform: none;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

    /* Mot accent dans le h1 : <span class="hero-title-accent"> */
    .hero h1 .hero-title-accent[b-hrbvsb3gpy] {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Sous-titre */
.hero .hero-subtitle[b-hrbvsb3gpy] {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 300;
    max-width: 480px;
    margin-bottom: 1.6rem;
    margin-left: 0;
    margin-right: 0;
}

/* Feature checklist */
.hero-features[b-hrbvsb3gpy] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1.8rem;
}

.hero-feat[b-hrbvsb3gpy] {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    color: var(--text-primary);
    font-weight: 400;
}

.hero-feat-check[b-hrbvsb3gpy] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: rgba(0, 119, 182, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
}

    .hero-feat-check svg[b-hrbvsb3gpy] {
        width: 10px;
        height: 10px;
    }

/* Stats strip */
.hero-stats[b-hrbvsb3gpy] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: .9rem 1.25rem;
    background: rgba(249, 249, 249, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: fit-content;
}

    .hero-stats .stat-item[b-hrbvsb3gpy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .12rem;
    }

    .hero-stats .stat-number[b-hrbvsb3gpy] {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-stats .stat-label[b-hrbvsb3gpy] {
        font-size: .68rem;
        color: var(--text-muted);
        font-weight: 500;
        white-space: nowrap;
        margin-bottom: 0;
        line-height: 1.3;
    }

    .hero-stats .stat-divider[b-hrbvsb3gpy] {
        width: 1px;
        height: 28px;
        background: var(--border-color);
        flex-shrink: 0;
    }

/* Boutons CTA — réutilise .btn de app.css, juste border-radius pill */
.hero-actions[b-hrbvsb3gpy] {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    align-items: center;
}

    .hero-actions .btn[b-hrbvsb3gpy] {
        border-radius: var(--radius-xl);
    }

    .hero-actions .btn-icon[b-hrbvsb3gpy] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ── Colonne droite : cartes visuelles ─────────────────────────── */

.hero-visual[b-hrbvsb3gpy] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* Carte générique */
.hero-visual-card[b-hrbvsb3gpy] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.3rem;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

    /* Barre top gradient au hover */
    .hero-visual-card[b-hrbvsb3gpy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .hero-visual-card:hover[b-hrbvsb3gpy] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-colored);
    }

        .hero-visual-card:hover[b-hrbvsb3gpy]::before {
            transform: scaleX(1);
        }

/* Carte IA — légère teinte bleue */
.hero-visual-card--ai[b-hrbvsb3gpy] {
    background: rgba(232, 244, 252, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(0, 180, 216, 0.22);
}

/* ── Internals des cartes ──────────────────────────────────────── */

.hvc-header[b-hrbvsb3gpy] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
}

.hvc-dot[b-hrbvsb3gpy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    flex-shrink: 0;
}

.hvc-dot--pulse[b-hrbvsb3gpy] {
    animation: heroBadgePulse-b-hrbvsb3gpy 1.6s ease-in-out infinite;
}

.hvc-icon[b-hrbvsb3gpy] {
    width: 16px;
    height: 16px;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.hvc-label[b-hrbvsb3gpy] {
    font-size: .7rem;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Bulle message utilisateur */
.hvc-bubble[b-hrbvsb3gpy] {
    font-size: .82rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.55;
    background: rgba(249, 249, 249, 0.9);
    border-radius: var(--radius-sm);
    padding: .6rem .85rem;
    margin-bottom: .65rem;
    margin-top: 0;
    border-left: 2px solid var(--accent-cyan);
}

/* Label réponse IA */
.hvc-response-label[b-hrbvsb3gpy] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: .3rem;
    line-height: 1.2;
}

/* Texte réponse */
.hvc-response-text[b-hrbvsb3gpy] {
    font-size: .82rem;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 0;
}

/* Chips tags */
.hvc-chips[b-hrbvsb3gpy] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .55rem;
}

.hvc-chip[b-hrbvsb3gpy] {
    background: rgba(0, 119, 182, 0.07);
    color: var(--primary-blue-dark);
    font-size: .68rem;
    font-weight: 600;
    padding: .22rem .65rem;
    border-radius: 100px;
    border: 0.5px solid rgba(0, 119, 182, 0.15);
    font-family: inherit;
}

.hvc-chip--accent[b-hrbvsb3gpy] {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
}

/* Carte scanner */
.hvc-scan-row[b-hrbvsb3gpy] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.hvc-scan-icon[b-hrbvsb3gpy] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.08), rgba(0, 180, 216, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
}

    .hvc-scan-icon svg[b-hrbvsb3gpy] {
        width: 20px;
        height: 20px;
    }

.hvc-scan-title[b-hrbvsb3gpy] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
    line-height: 1.3;
}

.hvc-scan-sub[b-hrbvsb3gpy] {
    font-size: .74rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.3;
    margin-top: .1rem;
}

.hvc-scan-badge[b-hrbvsb3gpy] {
    margin-left: auto;
    background: var(--gradient-primary);
    color: var(--white);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .25rem .7rem;
    border-radius: 100px;
    text-transform: uppercase;
    font-family: inherit;
    animation: livePulse-b-hrbvsb3gpy 2.5s ease-in-out infinite;
}

@keyframes livePulse-b-hrbvsb3gpy {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }
}

/* ── Scroll indicator ──────────────────────────────────────────── */

.scroll-indicator[b-hrbvsb3gpy] {
    position: absolute;
    bottom: 6rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.scroll-arrow[b-hrbvsb3gpy] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 119, 182, 0.07);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-blue);
    transition: background var(--transition), color var(--transition);
    animation: scrollBounce-b-hrbvsb3gpy 2.5s ease-in-out infinite;
}

    .scroll-arrow svg[b-hrbvsb3gpy] {
        width: 18px;
        height: 18px;
    }

    .scroll-arrow:hover[b-hrbvsb3gpy] {
        background: var(--primary-blue);
        color: var(--white);
        border-color: var(--primary-blue);
    }

@keyframes scrollBounce-b-hrbvsb3gpy {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .hero .hero-container[b-hrbvsb3gpy] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2rem var(--spacing-xl) 4.5rem;
    }

    .hero-visual[b-hrbvsb3gpy] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
    }

    .hero-visual-card--ai[b-hrbvsb3gpy] {
        grid-column: 1 / -1;
    }
    .scroll-indicator[b-hrbvsb3gpy] {
        bottom: 2rem;

    }
}

@media (max-width: 768px) {
    .hero .hero-container[b-hrbvsb3gpy] {
        padding: 2rem var(--spacing-md) 4rem;
    }

    .hero h1[b-hrbvsb3gpy] {
        font-size: 2.2rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        gap: 1rem;
        padding: .75rem 1rem;
    }

        .hero-stats .stat-number[b-hrbvsb3gpy] {
            font-size: 1.2rem;
        }

    .hero-visual[b-hrbvsb3gpy] {
        grid-template-columns: 1fr;
    }

    .hero-visual-card--ai[b-hrbvsb3gpy] {
        grid-column: unset;
    }

    .hero-actions[b-hrbvsb3gpy] {
        flex-direction: column;
        align-items: stretch;
    }

        .hero-actions .btn[b-hrbvsb3gpy] {
            justify-content: center;
            width: 100%;
        }
}

@media (max-width: 480px) {
    .hero h1[b-hrbvsb3gpy] {
        font-size: 1.9rem;
    }

    .hero-stats[b-hrbvsb3gpy] {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

        .hero-stats .stat-divider[b-hrbvsb3gpy] {
            display: none;
        }
}
/* _content/Project2/Components/Shared/Popup.razor.rz.scp.css */
/* Popup Styles for Orion System - Style Professionnel */
:root[b-lzn96v4yay] {
    --pop-primary-color: #1a237e;
    --pop-secondary-color: #2196F3;
    --pop-accent-color: #ff4b2b;
    --pop-accent-gradient: linear-gradient(135deg, #ff4b2b, #ff416c);
    --pop-dark-bg: #0a1020;
    --pop-dark-bg-alt: #1a2035;
    --pop-light-text: #fff;
    --pop-light-text-muted: rgba(255, 255, 255, 0.8);
    --pop-border-color: rgba(255, 75, 43, 0.3);
    /* Type-specific colors */
    --pop-success-color: #2e7d32;
    --pop-error-color: #c62828;
    --pop-warning-color: #f39c12;
    --pop-info-color: #0277bd;
}

/* Overlay backdrop */
.pop-overlay[b-lzn96v4yay] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .pop-overlay.pop-visible[b-lzn96v4yay] {
        opacity: 1;
        visibility: visible;
    }

/* Popup container - Style plus professionnel */
.pop-container[b-lzn96v4yay] {
    position: relative;
    width: 90%;
    max-width: 500px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    border-top: 3px solid var(--pop-accent-color);
}

    .pop-container.pop-visible[b-lzn96v4yay] {
        transform: translateY(0);
        opacity: 1;
    }

/* Popup header */
.pop-header[b-lzn96v4yay] {
    padding: 20px 25px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    background-color: #f9f9f9;
}

.pop-title[b-lzn96v4yay] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
}

/* Close button */
.pop-close[b-lzn96v4yay] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 22px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    transition: color 0.2s ease;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

    .pop-close:hover[b-lzn96v4yay] {
        color: var(--pop-accent-color);
        background-color: rgba(0, 0, 0, 0.1);
    }

/* Popup body */
.pop-body[b-lzn96v4yay] {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Popup footer */
.pop-footer[b-lzn96v4yay] {
    padding: 15px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #f9f9f9;
}

/* Buttons */
.pop-button[b-lzn96v4yay] {
    background: var(--pop-accent-gradient);
    color: white;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pop-button:hover[b-lzn96v4yay] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    .pop-button.pop-secondary[b-lzn96v4yay] {
        background: #f2f2f2;
        color: #333;
    }

        .pop-button.pop-secondary:hover[b-lzn96v4yay] {
            background: #e5e5e5;
        }

/* Type-specific styling */
.pop-success[b-lzn96v4yay] {
    border-top-color: var(--pop-success-color);
}

    .pop-success .pop-title[b-lzn96v4yay] {
        color: var(--pop-success-color);
    }

.pop-error[b-lzn96v4yay] {
    border-top-color: var(--pop-error-color);
}

    .pop-error .pop-title[b-lzn96v4yay] {
        color: var(--pop-error-color);
    }

.pop-warning[b-lzn96v4yay] {
    border-top-color: var(--pop-warning-color);
}

    .pop-warning .pop-title[b-lzn96v4yay] {
        color: var(--pop-warning-color);
    }

.pop-info[b-lzn96v4yay] {
    border-top-color: var(--pop-info-color);
}

    .pop-info .pop-title[b-lzn96v4yay] {
        color: var(--pop-info-color);
    }

/* Icons pour les différents types */
.pop-icon[b-lzn96v4yay] {
    font-size: 2.5rem;
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.pop-success .pop-icon[b-lzn96v4yay] {
    color: var(--pop-success-color);
}

.pop-error .pop-icon[b-lzn96v4yay] {
    color: var(--pop-error-color);
}

.pop-warning .pop-icon[b-lzn96v4yay] {
    color: var(--pop-warning-color);
}

.pop-info .pop-icon[b-lzn96v4yay] {
    color: var(--pop-info-color);
}

/* Content styling */
.pop-content[b-lzn96v4yay] {
    text-align: center;
}

    .pop-content p[b-lzn96v4yay] {
        margin: 0 0 12px 0;
        color: #555;
        font-size: 1rem;
        line-height: 1.5;
    }

        .pop-content p:last-child[b-lzn96v4yay] {
            margin-bottom: 0;
        }

    .pop-content .error-details[b-lzn96v4yay] {
        margin-top: 15px;
        font-size: 0.9rem;
        color: #c62828;
        background-color: rgba(198, 40, 40, 0.05);
        padding: 10px;
        border-radius: 4px;
        text-align: left;
    }

/* Responsivité */
@media screen and (max-width: 768px) {
    .pop-container[b-lzn96v4yay] {
        width: 95%;
    }

    .pop-title[b-lzn96v4yay] {
        font-size: 1.2rem;
    }

    .pop-body[b-lzn96v4yay] {
        padding: 20px;
    }
}
/* _content/Project2/Components/Shared/Products.razor.rz.scp.css */
/* Section Produits - Version Professionnelle */

.products-section[b-mpwlwvhsez] {
    padding: var(--spacing-3xl) 0;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

    .products-section[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 25% 25%, rgba(27, 112, 140, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(74, 144, 164, 0.04) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(42, 139, 168, 0.02) 0%, transparent 70%);
        pointer-events: none;
    }

    .products-section[b-mpwlwvhsez]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0.4;
    }

/* Contenu principal */
.products-content[b-mpwlwvhsez] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    position: relative;
    z-index: 2;
    text-align:center;
}

    .products-content h2[b-mpwlwvhsez] {
        text-align: center;
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        font-weight: 700;
        margin-bottom: var(--spacing-2xl);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-primary);
        position: relative;
        line-height: 1.2;

    }

        .products-content h2[b-mpwlwvhsez]::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--gradient-primary);
            border-radius: var(--radius-sm);
        }

/* Section CTA */
.cta-content[b-mpwlwvhsez] {
    text-align: center;
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

    .cta-content[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 1px;
        background: var(--gradient-primary);
        opacity: 0.6;
    }

    .cta-content h3[b-mpwlwvhsez] {
        font-size: clamp(1.75rem, 4vw, 2.2rem);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        letter-spacing: 0.5px;
    }

    .cta-content p[b-mpwlwvhsez] {
        margin: var(--spacing-lg) auto;
        color: var(--text-secondary);
        font-size: 1.125rem;
        max-width: 700px;
        line-height: 1.6;
        font-weight: 400;
    }

/* Grid des produits */
.product-grid[b-mpwlwvhsez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

/* Cards produits */
.product-card[b-mpwlwvhsez] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

    .product-card[b-mpwlwvhsez]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }

    .product-card:hover[b-mpwlwvhsez]::before {
        transform: scaleX(1);
    }

    .product-card:hover[b-mpwlwvhsez] {
        transform: translateY(-8px);
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
        background: var(--bg-card);
    }

/* Image du produit */
.product-image[b-mpwlwvhsez] {
    margin-bottom: var(--spacing-xl);
    text-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gray-100);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

    .product-image img[b-mpwlwvhsez] {
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
        transition: all var(--transition);
    }

.product-card:hover .product-image img[b-mpwlwvhsez] {
    transform: scale(1.05);
}

/* Contenu du produit */
.product-card h3[b-mpwlwvhsez] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-align: center;
}

.product-card p[b-mpwlwvhsez] {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    font-size: 1rem;
    text-align: center;
    flex-grow: 1;
}

    .product-card p .links[b-mpwlwvhsez] {
        color: var(--primary-blue);
        font-weight: 600;
        transition: all var(--transition);
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

        .product-card p .links:hover[b-mpwlwvhsez] {
            border-bottom-color: var(--primary-blue);
        }

/* Boutons dans les cartes */
.product-card .btn[b-mpwlwvhsez] {
    width: 100%;
    margin: 0;
    align-self: flex-end;
    justify-content: center;
}

    .product-card .btn:hover[b-mpwlwvhsez] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Animations d'entrée */
@keyframes fadeInUp-b-mpwlwvhsez {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card[b-mpwlwvhsez] {
    animation: fadeInUp-b-mpwlwvhsez 0.6s ease-out;
}

    .product-card:nth-child(1)[b-mpwlwvhsez] {
        animation-delay: 0.1s;
    }

    .product-card:nth-child(2)[b-mpwlwvhsez] {
        animation-delay: 0.2s;
    }

    .product-card:nth-child(3)[b-mpwlwvhsez] {
        animation-delay: 0.3s;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .product-grid[b-mpwlwvhsez] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }

    .products-content h2[b-mpwlwvhsez] {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .cta-content h3[b-mpwlwvhsez] {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

@media (max-width: 768px) {
    .products-section[b-mpwlwvhsez] {
        padding: var(--spacing-2xl) 0;
    }

    .products-content[b-mpwlwvhsez] {
        padding: 0 var(--spacing-md);
    }

        .products-content h2[b-mpwlwvhsez] {
            margin-bottom: var(--spacing-lg);
            letter-spacing: 0.5px;
        }

            .products-content h2[b-mpwlwvhsez]::after {
                width: 60px;
                height: 2px;
                bottom: -10px;
            }

    .cta-content[b-mpwlwvhsez] {
        padding: var(--spacing-lg) 0;
        margin-bottom: var(--spacing-xl);
    }

        .cta-content h3[b-mpwlwvhsez] {
            margin-bottom: var(--spacing-md);
        }

        .cta-content p[b-mpwlwvhsez] {
            font-size: 1rem;
            margin: var(--spacing-md) auto;
        }

    .product-grid[b-mpwlwvhsez] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-top: var(--spacing-xl);
    }

    .product-card[b-mpwlwvhsez] {
        padding: var(--spacing-lg);
        margin: 0 var(--spacing-sm);
    }

        .product-card h3[b-mpwlwvhsez] {
            font-size: 1.375rem;
        }

        .product-card p[b-mpwlwvhsez] {
            font-size: 0.95rem;
        }

    .product-image[b-mpwlwvhsez] {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

        .product-image img[b-mpwlwvhsez] {
            max-height: 150px;
        }
}

@media (max-width: 480px) {
    .products-section[b-mpwlwvhsez] {
        padding: var(--spacing-xl) 0;
    }

    .products-content[b-mpwlwvhsez] {
        padding: 0 var(--spacing-sm);
    }

        .products-content h2[b-mpwlwvhsez] {
            letter-spacing: 0.25px;
        }

            .products-content h2[b-mpwlwvhsez]::after {
                width: 50px;
                height: 2px;
            }

    .cta-content[b-mpwlwvhsez] {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-lg);
    }

        .cta-content h3[b-mpwlwvhsez] {
            font-size: 1.5rem;
        }

        .cta-content p[b-mpwlwvhsez] {
            font-size: 0.95rem;
        }

    .product-card[b-mpwlwvhsez] {
        padding: var(--spacing-md);
        margin: 0;
        border-radius: var(--radius-lg);
    }

        .product-card h3[b-mpwlwvhsez] {
            font-size: 1.25rem;
        }

        .product-card p[b-mpwlwvhsez] {
            font-size: 0.9rem;
        }

    .product-image[b-mpwlwvhsez] {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

        .product-image img[b-mpwlwvhsez] {
            max-height: 120px;
        }

    .product-card .btn[b-mpwlwvhsez] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .product-card[b-mpwlwvhsez],
    .product-card[b-mpwlwvhsez]::before,
    .product-image img[b-mpwlwvhsez] {
        animation: none;
        transition: none;
    }

        .product-card:hover[b-mpwlwvhsez],
        .product-card:hover .product-image img[b-mpwlwvhsez] {
            transform: none;
        }
}

/* Focus states pour l'accessibilité */
.product-card:focus-within[b-mpwlwvhsez] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.product-card .btn:focus-visible[b-mpwlwvhsez] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* États actifs */
.product-card:active[b-mpwlwvhsez] {
    transform: translateY(-4px);
}
/* _content/Project2/Components/Shared/RfidAdvantages.razor.rz.scp.css */
/* Variables RFID isolées */
.rfid-services[b-lltukhlxdv] {
    --rfid-primary-gradient: linear-gradient(135deg, #FF5C00, #FF2D88, #9D2BFB, #542EFF);
    --rfid-bg-dark: #0A0E23;
    --rfid-bg-overlay: rgba(10, 14, 35, 0.9);
    --rfid-bg-card: rgba(255, 255, 255, 0.05);
    --rfid-border-color: rgba(255, 92, 0, 0.2);
    --rfid-text-primary: #ffffff;
    --rfid-text-secondary: rgba(255, 255, 255, 0.8);
    --rfid-accent-orange: #FF5C00;
    --rfid-success: #22c55e;
    --rfid-error: #ef4444;
    --rfid-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --rfid-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --rfid-shadow-hover: 0 12px 40px rgba(255, 92, 0, 0.2);
}

/* Section principale */
.rfid-services[b-lltukhlxdv] {
    background: var(--rfid-bg-dark);
    padding: 2rem 0;
}

.rfid-service-block[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
}

    .rfid-service-block[b-lltukhlxdv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 50%, rgba(255, 92, 0, 0.03) 0%, transparent 60%);
        pointer-events: none;
        z-index: 1;
    }

    .rfid-service-block.reverse[b-lltukhlxdv] {
        grid-template-columns: 1fr 1fr;
    }

        .rfid-service-block.reverse .rfid-service-content[b-lltukhlxdv] {
            order: 2;
        }

        .rfid-service-block.reverse .rfid-service-image-box[b-lltukhlxdv] {
            order: 1;
        }

/* Contenu des services */
.rfid-service-content[b-lltukhlxdv] {
    padding: 3rem;
    background: var(--rfid-bg-overlay);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rfid-border-color);
    border-radius: 20px;
    box-shadow: var(--rfid-shadow);
    position: relative;
    z-index: 2;
    transition: var(--rfid-transition);
}

    .rfid-service-content:hover[b-lltukhlxdv] {
        box-shadow: var(--rfid-shadow-hover);
        transform: translateY(-5px);
        border-color: var(--rfid-accent-orange);
    }

/* Boîte d'image séparée */
.rfid-service-image-box[b-lltukhlxdv] {
    position: relative;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--rfid-shadow);
    transition: var(--rfid-transition);
    height: 400px;
}

    .rfid-service-image-box:hover[b-lltukhlxdv] {
        box-shadow: var(--rfid-shadow-hover);
        transform: translateY(-5px);
        border-color: var(--rfid-accent-orange);
    }

.rfid-service-img[b-lltukhlxdv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-service-img[b-lltukhlxdv] {
    transform: scale(1.05);
}

/* Overlay sur l'image avec badge - TOUJOURS VISIBLE */
.rfid-image-overlay[b-lltukhlxdv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 92, 0, 0.05) 0%, rgba(157, 43, 251, 0.05) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    opacity: 1; /* Toujours visible */
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-image-overlay[b-lltukhlxdv] {
    background: linear-gradient(135deg, rgba(255, 92, 0, 0.15) 0%, rgba(157, 43, 251, 0.15) 100%);
}

.rfid-tech-badge[b-lltukhlxdv] {
    background: var(--rfid-primary-gradient);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: var(--rfid-transition);
}

.rfid-service-image-box:hover .rfid-tech-badge[b-lltukhlxdv] {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.rfid-tech-badge i[b-lltukhlxdv] {
    font-size: 1.2rem;
}

/* Titres */
.rfid-service-content h2[b-lltukhlxdv] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--rfid-text-primary);
    line-height: 1.2;
    margin-bottom: 2rem;
    position: relative;
}

    .rfid-service-content h2[b-lltukhlxdv]::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--rfid-primary-gradient);
        border-radius: 2px;
    }

/* Descriptions */
.rfid-section-description[b-lltukhlxdv],
.rfid-intro-text[b-lltukhlxdv] {
    color: var(--rfid-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.rfid-intro-text[b-lltukhlxdv] {
    font-size: 1.15rem;
    font-weight: 500;
}

/* Définition RFID */
.rfid-definition[b-lltukhlxdv] {
    margin-bottom: 2.5rem;
}

.rfid-key-features[b-lltukhlxdv] {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rfid-feature[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    color: var(--rfid-text-secondary);
    font-size: 1rem;
    border-left: 3px solid transparent;
    padding-left: 1rem;
    transition: var(--rfid-transition);
}

    .rfid-feature:hover[b-lltukhlxdv] {
        border-left-color: var(--rfid-accent-orange);
        transform: translateX(5px);
    }

    .rfid-feature i[b-lltukhlxdv] {
        color: var(--rfid-success);
        font-size: 1.2rem;
        flex-shrink: 0;
    }

/* Composants */
.rfid-components-list[b-lltukhlxdv] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.rfid-component-item[b-lltukhlxdv] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-component-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        background: rgba(255, 92, 0, 0.05);
        transform: translateX(8px);
    }

.rfid-component-icon[b-lltukhlxdv] {
    width: 50px;
    height: 50px;
    background: var(--rfid-primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

.rfid-component-details h4[b-lltukhlxdv] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rfid-text-primary);
    margin-bottom: 0.5rem;
}

.rfid-component-details p[b-lltukhlxdv] {
    color: var(--rfid-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Comparaison */
.rfid-comparison-container[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.rfid-comparison-column[b-lltukhlxdv] {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--rfid-bg-card);
    transition: var(--rfid-transition);
}

    .rfid-comparison-column:first-child[b-lltukhlxdv] {
        border-color: var(--rfid-error);
    }

    .rfid-comparison-column:last-child[b-lltukhlxdv] {
        border-color: var(--rfid-success);
    }

.rfid-old-tech-title[b-lltukhlxdv],
.rfid-new-tech-title[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.rfid-old-tech-title[b-lltukhlxdv] {
    color: var(--rfid-error);
}

.rfid-new-tech-title[b-lltukhlxdv] {
    color: var(--rfid-success);
}

.rfid-limitations-list[b-lltukhlxdv],
.rfid-advantages-list[b-lltukhlxdv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

    .rfid-limitations-list li[b-lltukhlxdv],
    .rfid-advantages-list li[b-lltukhlxdv] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.95rem;
        color: var(--rfid-text-secondary);
        padding: 0.5rem 0;
    }

    .rfid-limitations-list i[b-lltukhlxdv] {
        color: var(--rfid-error);
        font-size: 1rem;
    }

    .rfid-advantages-list i[b-lltukhlxdv] {
        color: var(--rfid-success);
        font-size: 1rem;
    }

/* Statistiques */
.rfid-performance-stats[b-lltukhlxdv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.rfid-stat-item[b-lltukhlxdv] {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-stat-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(255, 92, 0, 0.1);
    }

.rfid-stat-number[b-lltukhlxdv] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--rfid-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.rfid-stat-label[b-lltukhlxdv] {
    font-size: 0.875rem;
    color: var(--rfid-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Résultats */
.rfid-results-grid[b-lltukhlxdv] {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.rfid-result-item[b-lltukhlxdv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--rfid-bg-card);
    border: 1px solid var(--rfid-border-color);
    border-radius: 12px;
    transition: var(--rfid-transition);
}

    .rfid-result-item:hover[b-lltukhlxdv] {
        border-color: var(--rfid-accent-orange);
        background: rgba(255, 92, 0, 0.05);
        transform: translateX(8px);
    }

.rfid-result-icon[b-lltukhlxdv] {
    width: 48px;
    height: 48px;
    background: var(--rfid-primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.rfid-result-content h4[b-lltukhlxdv] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rfid-text-primary);
    margin-bottom: 0.25rem;
}

.rfid-result-content p[b-lltukhlxdv] {
    font-size: 0.95rem;
    color: var(--rfid-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Boutons RFID */
.rfid-details-button[b-lltukhlxdv],
.rfid-cta-button[b-lltukhlxdv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: var(--rfid-primary-gradient);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--rfid-transition);
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
}

    .rfid-details-button[b-lltukhlxdv]::before,
    .rfid-cta-button[b-lltukhlxdv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
        z-index: 0;
    }

    .rfid-details-button:hover[b-lltukhlxdv]::before,
    .rfid-cta-button:hover[b-lltukhlxdv]::before {
        left: 100%;
    }

    .rfid-details-button span[b-lltukhlxdv],
    .rfid-cta-button span[b-lltukhlxdv],
    .rfid-details-button i[b-lltukhlxdv],
    .rfid-cta-button i[b-lltukhlxdv] {
        position: relative;
        z-index: 1;
    }

    .rfid-details-button:hover[b-lltukhlxdv],
    .rfid-cta-button:hover[b-lltukhlxdv] {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 35px rgba(255, 92, 0, 0.3);
    }

.rfid-cta-button[b-lltukhlxdv] {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    font-size: 1rem;
    padding: 1.2rem 3rem;
    font-weight: 700;
}

    .rfid-cta-button:hover[b-lltukhlxdv] {
        box-shadow: 0 12px 35px rgba(255, 75, 43, 0.4);
    }

    /* Focus states pour l'accessibilité */
    .rfid-details-button:focus[b-lltukhlxdv],
    .rfid-cta-button:focus[b-lltukhlxdv] {
        outline: 2px solid var(--rfid-accent-orange);
        outline-offset: 2px;
    }

/* Responsive Design Amélioré */

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .rfid-service-block[b-lltukhlxdv] {
        max-width: 1600px;
        gap: 4rem;
        padding: 5rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 4rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.5rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 450px;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        gap: 2rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 2.5rem 1.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 3rem;
    }
}

/* Large Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .rfid-service-block[b-lltukhlxdv] {
        gap: 3rem;
        padding: 4rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 3rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.25rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 400px;
    }
}

/* Desktop Standard (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
    .rfid-service-block[b-lltukhlxdv] {
        gap: 2.5rem;
        padding: 3.5rem 1.5rem;
        grid-template-columns: 1fr 1fr; /* Garde 2 colonnes sur desktop */
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 2.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 350px;
    }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 1.05rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        gap: 1.5rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1.75rem 1rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 2.25rem;
    }
}

/* POINT DE RUPTURE CRITIQUE - TOUT EN DESSOUS = 1 COLONNE */
@media (max-width: 1023px) {
    .rfid-service-block[b-lltukhlxdv] {
        grid-template-columns: 1fr !important; /* Force 1 colonne sur tous les écrans < 1024px */
        gap: 2rem;
        text-align: center;
        padding: 2.5rem 1rem;
        display: grid;
    }

        /* Images TOUJOURS au-dessus */
        .rfid-service-block .rfid-service-image-box[b-lltukhlxdv] {
            order: 1 !important;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            height: 280px;
        }

        /* Contenu TOUJOURS en dessous */
        .rfid-service-block .rfid-service-content[b-lltukhlxdv] {
            order: 2 !important;
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }

        /* Annule TOUS les effets reverse */
        .rfid-service-block.reverse .rfid-service-image-box[b-lltukhlxdv] {
            order: 1 !important;
        }

        .rfid-service-block.reverse .rfid-service-content[b-lltukhlxdv] {
            order: 2 !important;
        }

    .rfid-service-content h2[b-lltukhlxdv] {
        font-size: 1.75rem;
        text-align: center;
    }

        .rfid-service-content h2[b-lltukhlxdv]::after {
            left: 50%;
            transform: translateX(-50%);
        }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .rfid-comparison-container[b-lltukhlxdv] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Tablet Portrait spécifique (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 3rem 1.5rem;
        gap: 2.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 300px;
        max-width: 600px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 2.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.875rem;
        }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        flex-direction: row;
        text-align: left;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Mobile Portrait (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 250px;
        max-width: 500px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.75rem 1.25rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.95rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.75rem;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.6rem 0.875rem;
        font-size: 0.8rem;
    }
}

/* Mobile Small (moins de 480px) - Votre téléphone 430x932 */
@media (max-width: 479px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 1.5rem 0.75rem;
        gap: 1.25rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 200px;
        max-width: 380px; /* Adapté à votre largeur 430px */
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.5rem 1rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.375rem;
            line-height: 1.3;
            margin-bottom: 1rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.75rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.5rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .rfid-component-icon[b-lltukhlxdv],
    .rfid-result-icon[b-lltukhlxdv] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.25rem;
        font-size: 0.8rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    .rfid-feature[b-lltukhlxdv] {
        font-size: 0.85rem;
        padding: 0.5rem 0;
        padding-left: 0.75rem;
    }
}

/* Extra Small (moins de 380px) */
@media (max-width: 379px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 180px;
        max-width: 320px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.25rem 0.75rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.25rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.85rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        gap: 0.25rem;
    }
}

/* Orientation landscape sur mobile */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 1023px) {
    .rfid-service-block[b-lltukhlxdv] {
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 200px;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 1.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .rfid-performance-stats[b-lltukhlxdv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .rfid-stat-item[b-lltukhlxdv] {
        padding: 1rem 0.5rem;
    }

    .rfid-stat-number[b-lltukhlxdv] {
        font-size: 1.5rem;
    }

    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv] {
        padding: 1rem;
        flex-direction: row;
        text-align: left;
    }

    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv] {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        width: auto;
        display: inline-flex;
    }
}

/* Très grand écran (1600px+) */
@media (min-width: 1600px) {
    .rfid-service-block[b-lltukhlxdv] {
        max-width: 1800px;
        gap: 5rem;
        padding: 6rem 2rem;
    }

    .rfid-service-content[b-lltukhlxdv] {
        padding: 4.5rem;
    }

        .rfid-service-content h2[b-lltukhlxdv] {
            font-size: 2.75rem;
        }

    .rfid-service-image-box[b-lltukhlxdv] {
        height: 500px;
    }

    .rfid-section-description[b-lltukhlxdv],
    .rfid-intro-text[b-lltukhlxdv] {
        font-size: 1.2rem;
    }

    .rfid-tech-badge[b-lltukhlxdv] {
        padding: 1.25rem 2rem;
        font-size: 1rem;
    }
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .rfid-service-content[b-lltukhlxdv],
    .rfid-service-image-box[b-lltukhlxdv],
    .rfid-component-item[b-lltukhlxdv],
    .rfid-result-item[b-lltukhlxdv],
    .rfid-feature[b-lltukhlxdv],
    .rfid-stat-item[b-lltukhlxdv],
    .rfid-details-button[b-lltukhlxdv],
    .rfid-cta-button[b-lltukhlxdv],
    .rfid-service-img[b-lltukhlxdv] {
        transition: none;
    }

        .rfid-service-content:hover[b-lltukhlxdv],
        .rfid-service-image-box:hover[b-lltukhlxdv],
        .rfid-component-item:hover[b-lltukhlxdv],
        .rfid-result-item:hover[b-lltukhlxdv],
        .rfid-feature:hover[b-lltukhlxdv],
        .rfid-stat-item:hover[b-lltukhlxdv],
        .rfid-details-button:hover[b-lltukhlxdv],
        .rfid-cta-button:hover[b-lltukhlxdv],
        .rfid-service-image-box:hover .rfid-service-img[b-lltukhlxdv] {
            transform: none;
        }

        .rfid-details-button[b-lltukhlxdv]::before,
        .rfid-cta-button[b-lltukhlxdv]::before {
            display: none;
        }
}

/* Animation smooth scroll */
html[b-lltukhlxdv] {
    scroll-behavior: smooth;
}

/* Animation d'entrée pour les sections */
@keyframes rfidFadeInUp-b-lltukhlxdv {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rfid-service-block[b-lltukhlxdv] {
    animation: rfidFadeInUp-b-lltukhlxdv 0.8s ease-out;
}

/* Styles pour les liens dans les boutons */
.rfid-details-button[b-lltukhlxdv],
.rfid-cta-button[b-lltukhlxdv] {
    text-decoration: none !important;
}

    .rfid-details-button:visited[b-lltukhlxdv],
    .rfid-cta-button:visited[b-lltukhlxdv] {
        color: white;
    }

    .rfid-details-button:active[b-lltukhlxdv],
    .rfid-cta-button:active[b-lltukhlxdv] {
        transform: translateY(-1px) scale(1.01);
    }
/* _content/Project2/Components/Shared/Section_video.razor.rz.scp.css */
/* Section Vidéo - Version Professionnelle */

.video-section[b-2ohrsoulgs] {
    position: relative;
    background: var(--bg-secondary);
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
    min-height: 100vh;
}

/* Fond animé subtil et professionnel */
.mesh-gradient[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(27, 112, 140, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(27, 112, 140, 0.05) 0%, transparent 60%), radial-gradient(circle at 40% 80%, rgba(74, 144, 164, 0.06) 0%, transparent 45%);
    animation: meshFloat-b-2ohrsoulgs 25s ease-in-out infinite;
    z-index: 1;
}

.grid-pattern[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 80px 80px;
    animation: gridMove-b-2ohrsoulgs 40s linear infinite;
    z-index: 1;
}

/* Orbes flottants professionnels */
.floating-orbs[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.orb[b-2ohrsoulgs] {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 112, 140, 0.15) 0%, rgba(27, 112, 140, 0.05) 40%, transparent 70%);
    filter: blur(2px);
    animation: orbFloat-b-2ohrsoulgs 20s ease-in-out infinite;
}

    .orb:nth-child(1)[b-2ohrsoulgs] {
        width: 250px;
        height: 250px;
        top: 15%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 30s;
    }

    .orb:nth-child(2)[b-2ohrsoulgs] {
        width: 180px;
        height: 180px;
        top: 65%;
        right: 15%;
        background: radial-gradient(circle, rgba(74, 144, 164, 0.12) 0%, rgba(74, 144, 164, 0.04) 40%, transparent 70%);
        animation-delay: -8s;
        animation-duration: 25s;
    }

    .orb:nth-child(3)[b-2ohrsoulgs] {
        width: 120px;
        height: 120px;
        top: 35%;
        right: 8%;
        animation-delay: -15s;
        animation-duration: 22s;
    }

    .orb:nth-child(4)[b-2ohrsoulgs] {
        width: 140px;
        height: 140px;
        bottom: 25%;
        left: 8%;
        background: radial-gradient(circle, rgba(42, 139, 168, 0.1) 0%, rgba(42, 139, 168, 0.03) 40%, transparent 70%);
        animation-delay: -20s;
        animation-duration: 28s;
    }

/* Particules discrètes */
.advanced-particles[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.particle[b-2ohrsoulgs] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat-b-2ohrsoulgs 25s linear infinite;
}

    .particle:nth-child(2n)[b-2ohrsoulgs] {
        background: var(--secondary-blue);
        animation-duration: 30s;
    }

    .particle:nth-child(3n)[b-2ohrsoulgs] {
        width: 1.5px;
        height: 1.5px;
        animation-duration: 35s;
    }

/* Lignes connectées subtiles */
.connection-lines[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.line[b-2ohrsoulgs] {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(27, 112, 140, 0.2), transparent);
    animation: lineGlow-b-2ohrsoulgs 12s ease-in-out infinite;
}

    .line:nth-child(1)[b-2ohrsoulgs] {
        top: 30%;
        left: 15%;
        width: 200px;
        animation-delay: 0s;
    }

    .line:nth-child(2)[b-2ohrsoulgs] {
        top: 70%;
        right: 20%;
        width: 150px;
        background: linear-gradient(90deg, transparent, rgba(74, 144, 164, 0.2), transparent);
        animation-delay: -4s;
    }

    .line:nth-child(3)[b-2ohrsoulgs] {
        top: 50%;
        left: 25%;
        width: 100px;
        transform: rotate(30deg);
        animation-delay: -8s;
    }

/* Contenu principal */
.video-container[b-2ohrsoulgs] {
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    position: relative;
    z-index: 10;
}

.video-header[b-2ohrsoulgs] {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: var(--max-width-text);
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out;
}

    .video-header h2[b-2ohrsoulgs] {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        line-height: 1.2;
        color: var(--text-primary);
    }

.video-highlight[b-2ohrsoulgs] {
    color: var(--primary-blue);
    font-weight: 800;
    position: relative;
}

.video-subtitle[b-2ohrsoulgs] {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

    .video-subtitle strong[b-2ohrsoulgs] {
        color: var(--primary-blue);
        font-weight: 600;
    }

/* Zone vidéo */
.video-hero[b-2ohrsoulgs] {
    margin: 0 auto var(--spacing-3xl);
    max-width: 900px;
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out 0.3s both;
}

.video-player-container[b-2ohrsoulgs] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
}

    .video-player-container[b-2ohrsoulgs]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-subtle);
        opacity: 0;
        transition: opacity 0.6s ease;
        z-index: 1;
        pointer-events: none;
    }

    .video-player-container:hover[b-2ohrsoulgs]::before {
        opacity: 0.3;
    }

    .video-player-container:hover[b-2ohrsoulgs] {
        transform: translateY(-8px) scale(1.01);
        box-shadow: var(--shadow-xl), 0 0 50px rgba(27, 112, 140, 0.15);
        border-color: var(--primary-blue);
    }

.video-player[b-2ohrsoulgs] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    background: var(--gray-800);
}

.video-overlay[b-2ohrsoulgs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 2;
}

.video-player:hover .video-overlay[b-2ohrsoulgs] {
    background: rgba(0, 0, 0, 0.5);
}

.play-button[b-2ohrsoulgs] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 3;
    animation: playButtonPulse-b-2ohrsoulgs 4s ease-in-out infinite;
}

    .play-button:hover[b-2ohrsoulgs] {
        transform: scale(1.15);
        box-shadow: var(--shadow-xl), 0 0 30px rgba(27, 112, 140, 0.3);
    }

    .play-button i[b-2ohrsoulgs] {
        color: var(--text-white);
        font-size: 2rem;
        margin-left: 0.2rem;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

/* Container iframe pour vidéo */
.video-iframe-container[b-2ohrsoulgs] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

    .video-iframe-container iframe[b-2ohrsoulgs] {
        width: 100%;
        height: 100%;
        border: none;
    }

/* Section d'informations */
.video-info-section[b-2ohrsoulgs] {
    margin-top: var(--spacing-3xl);
    animation: fadeInUp-b-2ohrsoulgs 1s ease-out 0.6s both;
}

.video-features-grid[b-2ohrsoulgs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.video-feature-item[b-2ohrsoulgs] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .video-feature-item[b-2ohrsoulgs]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .video-feature-item:hover[b-2ohrsoulgs]::before {
        transform: scaleX(1);
    }

    .video-feature-item:hover[b-2ohrsoulgs] {
        transform: translateY(-5px);
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-lg);
        background: var(--bg-card);
    }

.video-feature-icon[b-2ohrsoulgs] {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

.video-feature-item:hover .video-feature-icon[b-2ohrsoulgs] {
    transform: scale(1.05) rotate(3deg);
    box-shadow: var(--shadow-lg);
}

.video-feature-content h4[b-2ohrsoulgs] {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.video-feature-content p[b-2ohrsoulgs] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Statistiques */
.video-stats[b-2ohrsoulgs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.video-stat[b-2ohrsoulgs] {
    text-align: center;
    padding: var(--spacing-md);
    transition: all var(--transition);
}

    .video-stat:hover[b-2ohrsoulgs] {
        transform: translateY(-4px);
    }

.stat-number-large[b-2ohrsoulgs] {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.stat-label-large[b-2ohrsoulgs] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Animations */
@keyframes meshFloat-b-2ohrsoulgs {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(0.5deg);
    }

    50% {
        transform: translateY(-8px) rotate(0deg);
    }

    75% {
        transform: translateY(-20px) rotate(-0.5deg);
    }
}

@keyframes gridMove-b-2ohrsoulgs {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(80px, 80px);
    }
}

@keyframes orbFloat-b-2ohrsoulgs {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }

    25% {
        transform: translateY(-20px) translateX(15px) scale(1.05);
    }

    50% {
        transform: translateY(-8px) translateX(-10px) scale(0.95);
    }

    75% {
        transform: translateY(-25px) translateX(8px) scale(1.02);
    }
}

@keyframes particleFloat-b-2ohrsoulgs {
    0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes lineGlow-b-2ohrsoulgs {
    0%, 100% {
        opacity: 0.2;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.4;
        transform: scaleX(1.1);
    }
}

@keyframes fadeInUp-b-2ohrsoulgs {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes playButtonPulse-b-2ohrsoulgs {
    0%, 100% {
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(27, 112, 140, 0.4);
    }

    50% {
        box-shadow: var(--shadow-lg), 0 0 0 15px rgba(27, 112, 140, 0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .video-features-grid[b-2ohrsoulgs] {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .video-section[b-2ohrsoulgs] {
        padding: var(--spacing-2xl) 0;
    }

    .video-container[b-2ohrsoulgs] {
        padding: 0 var(--spacing-md);
    }

    .video-header[b-2ohrsoulgs] {
        margin-bottom: var(--spacing-xl);
    }

    .video-hero[b-2ohrsoulgs] {
        margin-bottom: var(--spacing-xl);
    }

    .video-info-section[b-2ohrsoulgs] {
        margin-top: var(--spacing-xl);
    }

    .orb[b-2ohrsoulgs] {
        display: none;
    }

    .line[b-2ohrsoulgs] {
        display: none;
    }

    .play-button[b-2ohrsoulgs] {
        width: 60px;
        height: 60px;
    }

        .play-button i[b-2ohrsoulgs] {
            font-size: 1.5rem;
        }

    .video-feature-item[b-2ohrsoulgs] {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .video-stats[b-2ohrsoulgs] {
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .video-features-grid[b-2ohrsoulgs] {
        grid-template-columns: 1fr;
    }

    .video-feature-item[b-2ohrsoulgs] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .video-stats[b-2ohrsoulgs] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .mesh-gradient[b-2ohrsoulgs],
    .grid-pattern[b-2ohrsoulgs],
    .orb[b-2ohrsoulgs],
    .particle[b-2ohrsoulgs],
    .line[b-2ohrsoulgs],
    .play-button[b-2ohrsoulgs],
    .video-feature-item[b-2ohrsoulgs],
    .video-stat[b-2ohrsoulgs] {
        animation: none;
    }

        .video-player-container:hover[b-2ohrsoulgs],
        .video-feature-item:hover[b-2ohrsoulgs],
        .video-stat:hover[b-2ohrsoulgs] {
            transform: none;
        }
}