/* ================================================
   FASTPANEL — CGU / CGV — Design Premium 2025
   Dark Navy · Electric Blue · Glassmorphism
   ================================================ */

/* 1. VARIABLES */
:root {
    /* Backgrounds */
    --bg-base:    #040d1c;
    --bg-surface: #071223;
    --bg-raised:  #0a1730;
    --bg-card:    rgba(6, 16, 34, 0.92);
    --bg-card-h:  rgba(9, 22, 46, 0.96);

    /* Accent bleu électrique */
    --accent:        #1a7fff;
    --accent-light:  #4da3ff;
    --accent-dark:   #0055cc;
    --accent-glow:   rgba(26, 127, 255, 0.22);
    --accent-subtle: rgba(26, 127, 255, 0.07);

    /* Text */
    --t-primary:   #dde8f8;
    --t-secondary: #7a9bbf;
    --t-muted:     #3d5878;
    --t-white:     #ffffff;

    /* Borders */
    --b-default: rgba(26, 127, 255, 0.11);
    --b-hover:   rgba(26, 127, 255, 0.32);
    --b-active:  rgba(26, 127, 255, 0.58);

    /* Callouts */
    --c-info-bg: rgba(26, 127, 255, 0.07);
    --c-info-bd: rgba(26, 127, 255, 0.28);
    --c-info-ic: #4da3ff;

    --c-warn-bg: rgba(245, 158, 11, 0.07);
    --c-warn-bd: rgba(245, 158, 11, 0.28);
    --c-warn-ic: #fbbf24;

    --c-dang-bg: rgba(239, 68, 68, 0.07);
    --c-dang-bd: rgba(239, 68, 68, 0.28);
    --c-dang-ic: #f87171;

    --c-succ-bg: rgba(16, 185, 129, 0.07);
    --c-succ-bd: rgba(16, 185, 129, 0.28);
    --c-succ-ic: #34d399;

    /* Shadows */
    --sh-card:  0 4px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(26,127,255,.07);
    --sh-hover: 0 12px 48px rgba(0,0,0,.55), 0 0 24px rgba(26,127,255,.09);

    /* Radii */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 9999px;
}


/* ================================================
   2. READING PROGRESS BAR
   ================================================ */

.fp-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(26,127,255,.1);
    z-index: 9999;
    pointer-events: none;
}
.fp-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0055cc, #1a7fff, #4da3ff, #1a7fff);
    background-size: 200% 100%;
    animation: progressShimmer 2.5s linear infinite;
    transition: width .1s ease;
    box-shadow: 0 0 10px rgba(26,127,255,.6);
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ================================================
   3. HERO SECTION
   ================================================ */

.lp-hero {
    position: relative;
    min-height: 440px;
    background: var(--bg-base);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
}

/* Mesh radial glow */
.lp-hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 130% 80% at 15% 45%, rgba(26,127,255,.13) 0%, transparent 58%),
        radial-gradient(ellipse 70%  60% at 85% 20%, rgba(77,163,255,.08) 0%, transparent 50%),
        radial-gradient(ellipse 55%  75% at 55% 95%, rgba(0, 85,204,.07) 0%, transparent 50%);
}

/* Dot grid overlay */
.lp-hero-dots {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(rgba(26,127,255,.12) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}

/* Floating orbs */
.lp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 1;
    animation: orbFloat 10s ease-in-out infinite;
    pointer-events: none;
}
.lp-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(26,127,255,.11), transparent 70%);
    top: -120px; left: -80px;
}
.lp-orb-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(77,163,255,.07), transparent 70%);
    bottom: -60px; right: 8%;
    animation-delay: 5s;
}
@keyframes orbFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(18px,-22px) scale(1.04); }
    66%      { transform: translate(-14px,14px) scale(0.96); }
}

/* Hero content */
.lp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(26,127,255,.08);
    border: 1px solid rgba(26,127,255,.24);
    border-radius: var(--r-pill);
    padding: 8px 22px;
    margin-bottom: 28px;
    font-size: 12.5px;
    color: var(--accent-light);
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.lp-hero-badge i { font-size: 11px; opacity: .85; }

.lp-hero-title {
    font-size: clamp(2.4rem, 4.8vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--t-white);
    margin-bottom: 18px;
    letter-spacing: -.035em;
}
.lp-hero-title .gt {
    background: linear-gradient(135deg, #74c0ff 0%, #1a7fff 45%, #0055cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-hero-sub {
    font-size: 1.05rem;
    color: var(--t-secondary);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Meta pills row */
.lp-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.lp-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 12px;
    color: var(--t-secondary);
}
.lp-meta-pill i { color: var(--accent-light); font-size: 10.5px; }
.lp-meta-sep { width: 4px; height: 4px; background: var(--t-muted); border-radius: 50%; }

/* Breadcrumb */
.lp-hero-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
}
.lp-hero-bc a { color: var(--t-secondary); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: color .2s; }
.lp-hero-bc a:hover { color: var(--accent-light); }
.lp-hero-bc .sep { color: var(--t-muted); font-size: 9px; }
.lp-hero-bc .cur { color: var(--accent-light); font-weight: 600; }

/* Bottom fade */
.lp-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--bg-surface));
    z-index: 3;
    pointer-events: none;
}


/* ================================================
   4. MAIN LAYOUT
   ================================================ */

.lp-main {
    background: var(--bg-surface);
    padding: 60px 0 110px;
}

/* Background dot texture for main */
.lp-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(26,127,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.lp-main { position: relative; }

.lp-layout {
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 36px;
    align-items: start;
}


/* ================================================
   5. SIDEBAR
   ================================================ */

.lp-sidebar {
    position: sticky;
    top: 96px;
    z-index: 10;
}

.lp-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: var(--r-xl);
    padding: 22px 20px;
    box-shadow: var(--sh-card);
}

.sb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--b-default);
}
.sb-head-icon {
    width: 30px; height: 30px;
    background: var(--accent-subtle);
    border: 1px solid var(--b-hover);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-light);
    font-size: 12px;
    flex-shrink: 0;
}
.sb-head h3 {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--t-primary);
    letter-spacing: .8px;
    text-transform: uppercase;
    margin: 0;
}

.sb-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--t-muted);
    padding: 12px 8px 6px;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all .2s ease;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
}
.sb-item:hover {
    background: var(--accent-subtle);
    border-left-color: rgba(26,127,255,.3);
}
.sb-item.active {
    background: rgba(26,127,255,.1);
    border-left-color: var(--accent);
}

.sb-num {
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--b-default);
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--t-muted);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.sb-item:hover .sb-num,
.sb-item.active .sb-num {
    background: var(--accent-subtle);
    border-color: var(--b-hover);
    color: var(--accent-light);
}

.sb-text {
    font-size: 12px;
    color: var(--t-secondary);
    line-height: 1.35;
    transition: color .2s;
}
.sb-item:hover .sb-text,
.sb-item.active .sb-text { color: var(--t-primary); }

.sb-sep { height: 1px; background: var(--b-default); margin: 12px 0; }

.sb-cta {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sb-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--r-md);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid var(--b-hover);
    background: var(--accent-subtle);
    color: var(--accent-light);
}
.sb-cta a:hover {
    background: rgba(26,127,255,.14);
    border-color: var(--b-active);
}


/* ================================================
   6. CONTENT AREA — SECTION HEADERS
   ================================================ */

.lp-content {}

.lp-section-flag {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
}
.lp-section-flag + .lp-section-flag,
.lp-section-flag:not(:first-child) {
    margin-top: 52px;
}

.flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    white-space: nowrap;
}
.flag-badge.cgu { background: rgba(26,127,255,.1); border: 1px solid rgba(26,127,255,.28); color: #5eb3ff; }
.flag-badge.cgv { background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.28); color: #3dd9a0; }

.flag-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--b-hover), transparent); }

.lp-section-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--t-white);
    margin: 0 0 28px;
    letter-spacing: -.02em;
}


/* ================================================
   7. ARTICLE CARDS
   ================================================ */

.lp-article {
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: var(--r-xl);
    padding: 34px 38px 32px;
    margin-bottom: 18px;
    box-shadow: var(--sh-card);
    position: relative;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}

/* Top glow line on hover */
.lp-article::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity .35s;
}
.lp-article:hover { border-color: var(--b-hover); box-shadow: var(--sh-hover); }
.lp-article:hover::before { opacity: 1; }

/* Watermark article number */
.art-wm {
    position: absolute;
    right: 22px; top: 8px;
    font-size: 5.5rem;
    font-weight: 900;
    color: rgba(26,127,255,.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -.04em;
}

/* Article header */
.art-hd {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--b-default);
}

.art-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    background: var(--accent-subtle);
    border: 1px solid var(--b-hover);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-light);
    font-size: 15px;
}

.art-meta {}
.art-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 5px;
}
.art-tag.cgu { background: rgba(26,127,255,.1); border: 1px solid rgba(26,127,255,.2); color: #5eb3ff; }
.art-tag.cgv { background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.2); color: #3dd9a0; }

.art-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--t-white);
    margin: 0;
    line-height: 1.3;
}


/* ================================================
   8. ARTICLE BODY
   ================================================ */

.art-body p {
    font-size: .9375rem;
    color: var(--t-secondary);
    line-height: 1.88;
    margin-bottom: 14px;
}
.art-body p:last-child { margin-bottom: 0; }
.art-body strong { color: var(--t-primary); font-weight: 600; }
.art-body a { color: var(--accent-light); text-decoration: none; transition: color .2s; }
.art-body a:hover { color: #7ec8ff; text-decoration: underline; }

/* Article inner divider */
.art-div {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--b-hover), transparent);
    margin: 20px 0;
}

/* Info grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}
.info-cell {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--b-default);
    border-radius: var(--r-md);
    padding: 13px 15px;
}
.info-cell-lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t-muted);
    margin-bottom: 4px;
}
.info-cell-val {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--t-primary);
}


/* ================================================
   9. LISTS
   ================================================ */

.lp-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9375rem;
    color: var(--t-secondary);
    line-height: 1.7;
}
.lp-list li::before {
    content: '\f054';
    font-family: 'FontAwesome';
    font-size: 7.5px;
    color: var(--accent);
    margin-top: 7px;
    flex-shrink: 0;
}
.lp-list li strong { color: var(--t-primary); }


/* ================================================
   10. CALLOUT BOXES
   ================================================ */

.callout {
    border-radius: var(--r-md);
    padding: 15px 18px;
    margin: 20px 0;
    display: flex;
    gap: 13px;
    align-items: flex-start;
}
.callout-ico { flex-shrink: 0; margin-top: 1px; }
.callout-ico i { font-size: 14px; }
.callout-body strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.callout-body p { font-size: 13px !important; line-height: 1.65 !important; margin: 0 !important; color: var(--t-secondary) !important; }

.callout.info    { background: var(--c-info-bg); border: 1px solid var(--c-info-bd); border-left: 3px solid var(--c-info-ic); }
.callout.warning { background: var(--c-warn-bg); border: 1px solid var(--c-warn-bd); border-left: 3px solid var(--c-warn-ic); }
.callout.danger  { background: var(--c-dang-bg); border: 1px solid var(--c-dang-bd); border-left: 3px solid var(--c-dang-ic); }
.callout.success { background: var(--c-succ-bg); border: 1px solid var(--c-succ-bd); border-left: 3px solid var(--c-succ-ic); }

.callout.info    .callout-ico i { color: var(--c-info-ic); }
.callout.warning .callout-ico i { color: var(--c-warn-ic); }
.callout.danger  .callout-ico i { color: var(--c-dang-ic); }
.callout.success .callout-ico i { color: var(--c-succ-ic); }

.callout.info    .callout-body strong { color: #8dc8ff; }
.callout.warning .callout-body strong { color: #fcd34d; }
.callout.danger  .callout-body strong { color: #fca5a5; }
.callout.success .callout-body strong { color: #6ee7b7; }


/* ================================================
   11. LEGAL FOOTER BLOCK
   ================================================ */

.lp-footer-block {
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: var(--r-xl);
    padding: 30px 38px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.lp-fb-info h4 { font-size: .9375rem; font-weight: 700; color: var(--t-white); margin: 0 0 5px; }
.lp-fb-info p { font-size: 13px; color: var(--t-secondary); margin: 0; }
.lp-fb-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent-subtle);
    border: 1px solid var(--b-hover);
    border-radius: var(--r-md);
    color: var(--accent-light);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all .2s;
    white-space: nowrap;
}
.lp-fb-contact a:hover {
    background: rgba(26,127,255,.15);
    border-color: var(--b-active);
}


/* ================================================
   12. MOBILE TABS
   ================================================ */

.lp-mob-tabs {
    display: none;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 16px;
    margin-bottom: 22px;
    scrollbar-width: none;
}
.lp-mob-tabs::-webkit-scrollbar { display: none; }
.mob-tab {
    flex-shrink: 0;
    padding: 7px 15px;
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--t-secondary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.mob-tab.active, .mob-tab:hover {
    background: var(--accent-subtle);
    border-color: var(--b-hover);
    color: var(--accent-light);
}


/* ================================================
   13. BACK TO TOP
   ================================================ */

.lp-btt {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 44px; height: 44px;
    background: var(--accent);
    border: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px;
    cursor: pointer; z-index: 200;
    opacity: 0; transform: translateY(12px);
    transition: all .3s ease;
    box-shadow: 0 4px 20px rgba(26,127,255,.45);
}
.lp-btt.show { opacity: 1; transform: translateY(0); }
.lp-btt:hover { background: var(--accent-light); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(26,127,255,.55); }


/* ================================================
   14. ANIMATIONS — scroll reveal
   ================================================ */

.lp-article {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease, border-color .3s, box-shadow .3s;
}
.lp-article.revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ================================================
   15. RESPONSIVE
   ================================================ */

@media (max-width: 1080px) {
    .lp-layout { grid-template-columns: 240px 1fr; gap: 26px; }
    .lp-article { padding: 28px 30px; }
}

@media (max-width: 900px) {
    .lp-layout { grid-template-columns: 1fr; }
    .lp-sidebar { display: none; }
    .lp-mob-tabs { display: flex; }
    .lp-hero { padding: 120px 0 60px; min-height: auto; }
    .info-grid { grid-template-columns: 1fr; }
    .lp-footer-block { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .lp-hero { padding: 100px 0 50px; }
    .lp-article { padding: 22px 20px; border-radius: var(--r-lg); }
    .art-wm { font-size: 3.5rem; right: 14px; }
    .lp-main { padding: 40px 0 80px; }
    .lp-footer-block { padding: 22px; }
    .lp-btt { bottom: 18px; right: 18px; }
    .lp-hero-meta { gap: 5px; }
    .lp-meta-pill { font-size: 11px; padding: 5px 11px; }
    .art-hd { gap: 10px; }
    .art-title { font-size: 1rem; }
}