/* ==========================================================================
   CAPPS PLATFORM - A PROPOS MOBILE RESPONSIVE ENGINE (LIGHT VERSION <= 768px)
   File: assets/css/capps_website/mobile_apropos_light.css
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* ----------------------------------------------------------------------
       1. LIGHT VIEWPORT & BACKGROUND RESET
       ---------------------------------------------------------------------- */
    .apropos-page,
    .apropos-page body,
    .apropos-page main {
        background-color: #f8fafc !important; /* Soft crisp light slate */
        color: #1e293b !important; /* Deep readable charcoal text */
        padding-top: 58px !important; /* Fixed header offset */
        overflow-x: hidden !important;
    }

        .apropos-page .container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Section Headings Uniformity */
        .apropos-page .section-header,
        .apropos-page .about-split__title-wrap {
            margin-bottom: 1.5rem !important;
            text-align: center !important;
        }

        .apropos-page .eyebrow {
            font-size: 0.78rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
            color: #0284c7 !important; /* Vibrant Blue */
            margin-bottom: 0.35rem !important;
            display: block !important;
        }

        .apropos-page h2 {
            font-size: 1.5rem !important;
            line-height: 1.25 !important;
            font-weight: 800 !important;
            color: #0f172a !important;
        }

    /* ----------------------------------------------------------------------
       2. LIGHT HERO V2 SECTION (.hero-v2)
       ---------------------------------------------------------------------- */
    .hero-v2 {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .hero-v2__bg,
    .hero-v2__grain,
    .hero-v2__mesh {
        opacity: 0.15 !important; /* Softens ambient glows for light theme */
    }

    .hero-v2__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
    }

    .hero-v2__title {
        font-size: 2.1rem !important;
        line-height: 1.15 !important;
        color: #0f172a !important;
        margin-bottom: 0.85rem !important;
    }

    .hero-v2__lede {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #475569 !important;
    }

    /* Hero CTA Actions Stack */
    .hero-v2__actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
        margin-top: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }

        .hero-v2__actions .btn-primary--hero,
        .hero-v2__actions .btn-secondary--hero {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
            padding: 0.85rem 1rem !important;
            font-size: 0.9rem !important;
            font-weight: 700 !important;
            border-radius: 12px !important;
        }

        .hero-v2__actions .btn-primary--hero {
            background: linear-gradient(135deg, #0284c7 0%, #4338ca 100%) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
            border: none !important;
        }

        .hero-v2__actions .btn-secondary--hero {
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        }

    /* Hero Trust Data Strip */
    .hero-v2__data-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 1rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

    .hero-v2__data-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        padding-bottom: 0.45rem !important;
    }

        .hero-v2__data-item:last-child {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

    .hero-v2__data-label {
        font-size: 0.8rem !important;
        color: #64748b !important;
    }

    .hero-v2__data-value {
        font-size: 0.83rem !important;
        font-weight: 700 !important;
        color: #0284c7 !important;
    }

    /* Hero Visual Card Panel */
    .hero-v2__visual {
        width: 100% !important;
    }

    .hero-v2__scene {
        position: relative !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid #cbd5e1 !important;
        padding: 1rem !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
    }

    .hero-v2__sys-wiring {
        display: none !important;
    }

    .hero-v2__sys-mod,
    .hero-v2__sys-core {
        position: static !important;
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        transform: none !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0.85rem !important;
    }

    .hero-v2__sys-core__title {
        color: #0f172a !important;
    }

    /* ----------------------------------------------------------------------
       3. ABOUT EDITORIAL SPLIT (.about-split)
       ---------------------------------------------------------------------- */
    .about-split {
        padding: 2.25rem 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .about-split__text-wrap p {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        color: #334155 !important;
    }

    /* ----------------------------------------------------------------------
       4. POURQUOI CAPPS CARDS (.pourquoi-v2)
       ---------------------------------------------------------------------- */
    .pourquoi-v2 {
        padding: 2.25rem 0 !important;
    }

    .pourquoi-v2__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .pourquoi-card {
        width: 100% !important;
        padding: 1.35rem !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    }

        .pourquoi-card .icon-box {
            width: 44px !important;
            height: 44px !important;
            font-size: 1.4rem !important;
            background: #e0f2fe !important;
            color: #0284c7 !important;
            border-radius: 10px !important;
            margin-bottom: 0.75rem !important;
        }

        .pourquoi-card h3 {
            font-size: 1.15rem !important;
            color: #0f172a !important;
            margin-bottom: 0.5rem !important;
        }

        .pourquoi-card p {
            color: #475569 !important;
            font-size: 0.9rem !important;
        }

    .featured-stat {
        margin-top: 1rem !important;
        padding-top: 0.85rem !important;
        border-top: 1px solid #f1f5f9 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.85rem !important;
    }

    .featured-stat__num {
        font-size: 1.9rem !important;
        font-weight: 800 !important;
        color: #0284c7 !important;
    }

    .featured-stat__label {
        font-size: 0.82rem !important;
        color: #64748b !important;
    }

    /* ----------------------------------------------------------------------
       5. NOTRE DIFFERENCE (.diff-v2)
       ---------------------------------------------------------------------- */
    .diff-v2 {
        padding: 2.25rem 0 !important;
        background: #ffffff !important;
    }

    .diff-v2__grid,
    .diff-v2__cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .diff-card {
        padding: 1.25rem !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

        .diff-card h3 {
            color: #0f172a !important;
            font-size: 1.05rem !important;
        }

        .diff-card p {
            color: #475569 !important;
            font-size: 0.88rem !important;
        }

    /* ----------------------------------------------------------------------
       6. TIMELINE & HISTORY (.timeline-v2 & .parcours-v2)
       ---------------------------------------------------------------------- */
    .timeline-v2,
    .parcours-v2 {
        padding: 2.25rem 0 !important;
    }

    .timeline-v2__container {
        position: relative !important;
        padding-left: 1.5rem !important;
    }

    .timeline-v2__line {
        left: 6px !important;
        width: 2px !important;
        background: #cbd5e1 !important;
    }

    .timeline-v2__item {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    .timeline-v2__dot {
        left: -1.5rem !important;
        top: 6px !important;
        background: #0284c7 !important;
        box-shadow: 0 0 0 4px #e0f2fe !important;
    }

    .timeline-v2__card {
        width: 100% !important;
        padding: 1.1rem !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    }

        .timeline-v2__card h3 {
            color: #0f172a !important;
        }

        .timeline-v2__card p {
            color: #475569 !important;
        }

    /* ----------------------------------------------------------------------
       7. BENTO GRID FUNCTIONALITIES (.bento-v2)
       ---------------------------------------------------------------------- */
    .bento-v2 {
        padding: 2.25rem 0 !important;
        background: #ffffff !important;
    }

    .bento-v2__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .bento-item {
        width: 100% !important;
        padding: 1.25rem !important;
        border-radius: 16px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

    .bento-item__title {
        font-size: 1.1rem !important;
        color: #0f172a !important;
        margin-bottom: 0.4rem !important;
    }

    .bento-item__lede {
        font-size: 0.88rem !important;
        color: #475569 !important;
        line-height: 1.55 !important;
    }

    /* ----------------------------------------------------------------------
       8. GUARANTEE & VALUE CARDS (.livrons-v2 & .values-v2)
       ---------------------------------------------------------------------- */
    .livrons-v2,
    .values-v2 {
        padding: 2.25rem 0 !important;
    }

    .livrons-v2__grid,
    .values-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .glass-card,
    .value-card {
        padding: 1.25rem !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

        .glass-card h3,
        .value-card h3 {
            color: #0f172a !important;
        }

        .glass-card p,
        .value-card p {
            color: #475569 !important;
        }

    /* ----------------------------------------------------------------------
       9. APPROACH FLOW (.approche-v2)
       ---------------------------------------------------------------------- */
    .approche-v2__flow {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .flow-step {
        padding: 1rem 0.75rem !important;
        text-align: center !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    }

        .flow-step .step-num {
            font-size: 1.25rem !important;
            font-weight: 800 !important;
            color: #0284c7 !important;
            display: block !important;
        }

        .flow-step h3 {
            font-size: 0.82rem !important;
            font-weight: 700 !important;
            color: #0f172a !important;
        }

    /* ----------------------------------------------------------------------
       10. EXPERTISE CAPSULES (.expertise-v2)
       ---------------------------------------------------------------------- */
    .expertise-v2__list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

        .expertise-v2__list .capsule {
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            padding: 0.45rem 0.85rem !important;
            border-radius: 50px !important;
            background: #e0f2fe !important;
            border: 1px solid #bae6fd !important;
            color: #0369a1 !important;
        }

    /* ----------------------------------------------------------------------
       11. PAGE CTA (.cta-v2)
       ---------------------------------------------------------------------- */
    .cta-v2 {
        padding: 2.25rem 1.25rem !important;
        text-align: center !important;
        border-radius: 18px !important;
        margin: 1.5rem 0 !important;
        background: linear-gradient(135deg, #0284c7 0%, #312e81 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 25px rgba(2, 132, 199, 0.25) !important;
    }

        .cta-v2 h2 {
            font-size: 1.35rem !important;
            color: #ffffff !important;
            margin-bottom: 0.75rem !important;
        }

        .cta-v2 p {
            font-size: 0.9rem !important;
            color: #e0f2fe !important;
            margin-bottom: 1.25rem !important;
        }

    .cta-v2__actions .btn-primary--shine {
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        padding: 0.85rem 1rem !important;
        background: #ffffff !important;
        color: #0284c7 !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
    }
}