/* =====================================================
   LP Light 2026 - biux.fr
   Override clair, aere, scope .lp-light
   Charge APRES lp-motiondesign.css (priorite naturelle)
   Cible : page-lp-agence-video-b2b.php
           page-lp-video-evenementielle-entreprise.php
           page-lp-agence-audiovisuelle.php
   Ne touche PAS aux LP existantes (motion-design, lp-motiondesign)
   ===================================================== */

/* ===== Tokens light scopes (override .lp-page) ===== */
.lp-light {
    --lp-bg: #ffffff;
    --lp-bg-alt: #f6f8fb;
    --lp-bg-accent: #eef2ff;
    --lp-bg-dark: #0a0d18;
    --lp-text: #111;
    --lp-text-muted: #5a6072;
    --lp-blue: #206dff;
    --lp-blue-hover: #1a5ad4;
    --lp-border: #e6eaf2;
    --lp-radius: 0.5rem;
    --lp-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --lp-shadow-card: 0 6px 22px rgba(15, 23, 42, 0.06);

    /* Override tokens parent .lp-page */
    --bg: #ffffff;
    --bg-light: #f6f8fb;
    --bg-card: #ffffff;
    --text: #5a6072;
    --white: #111;
    --border: #e6eaf2;
    --radius: 0.5rem;
    --radius-lg: 0.5rem;

    background: var(--lp-bg);
    color: var(--lp-text);
}

/* Body / page wrapper se met en clair */
body.lp-page { background: var(--lp-bg, #fff); }
.lp-light .page-wrapper { background: var(--lp-bg); }

/* ===== TOPBAR : claire avec ombre subtile ===== */
.lp-light .lp-topbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lp-border);
}
.lp-light .lp-topbar-logo { filter: invert(1) brightness(0.2); }

/* ===== HERO : fond clair, texte fonce, photo a droite ===== */
.lp-light .lp-hero {
    background: var(--lp-bg);
    min-height: auto;
    padding: 8rem 0 6rem;
    color: var(--lp-text);
}
.lp-light .lp-hero-bg { display: none; }
.lp-light .lp-hero-overlay { display: none; }
.lp-light .lp-hero .container-large { position: relative; z-index: 2; }

.lp-light .lp-hero-content {
    max-width: 100%;
    color: var(--lp-text);
}

/* Hero split : texte gauche + photo droite */
.lp-light .lp-hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
}
.lp-light .lp-hero-split .lp-hero-content { max-width: 600px; }
.lp-light .lp-hero-visual img,
.lp-light .lp-hero-visual {
    width: 100%;
    height: auto;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-soft);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
}

.lp-light .lp-hero-badge {
    background: var(--lp-bg-accent);
    color: var(--lp-blue);
    border: 1px solid #d6e1ff;
}
.lp-light .lp-hero h1 {
    color: var(--lp-text);
}
.lp-light .lp-hero-sub {
    color: var(--lp-text-muted);
}
.lp-light .lp-hero-cta-ghost {
    color: var(--lp-text);
    border-color: var(--lp-border);
    background: #fff;
}
.lp-light .lp-hero-cta-ghost:hover {
    background: var(--lp-bg-accent);
    color: var(--lp-blue);
}
.lp-light .lp-hero-proof,
.lp-light .lp-hero-proof-item {
    color: var(--lp-text-muted);
}
.lp-light .lp-hero-proof-divider { background: var(--lp-border); }

@media (max-width: 900px) {
    .lp-light .lp-hero-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .lp-light .lp-hero { padding: 6rem 0 4rem; }
}

/* ===== SOCIAL PROOF : fond blanc, logos plus visibles ===== */
.lp-light .lp-socialproof {
    background: var(--lp-bg);
    padding: 3rem 0 4rem;
    border-bottom: 1px solid var(--lp-border);
}
.lp-light .lp-socialproof .ticker-logo {
    filter: grayscale(1) brightness(0.6);
    opacity: 0.85;
}
.lp-light .lp-logo-text { color: var(--lp-text-muted); }

/* ===== PROJECTS / REALISATIONS : fond bleu pale ===== */
.lp-light .lp-projets-section {
    background: var(--lp-bg-accent);
    padding: 6rem 0;
}
.lp-light .lp-projets-section .padding-section-medium { padding: 0; }
.lp-light .lp-projets-header h2 { color: var(--lp-text); }
.lp-light .lp-projets-header p { color: var(--lp-text-muted); }
.lp-light .lp-project-card {
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-card);
    overflow: hidden;
}
.lp-light .lp-project-label { background: rgba(255, 255, 255, 0.96); color: var(--lp-text); }

/* ===== PROBLEM (.lp-dark-section #1 dans le flow) : on garde DARK pour rythme ===== */
.lp-light .lp-dark-section {
    background: var(--lp-bg-dark);
    color: #fff;
    padding: 6rem 0;
}
.lp-light .lp-dark-section .padding-section-medium { padding: 0; }
.lp-light .lp-dark-section .lp-section-title h2 { color: #fff; }
.lp-light .lp-dark-section .lp-section-title p,
.lp-light .lp-dark-section .lp-label { color: rgba(255,255,255,0.75); }
.lp-light .lp-dark-section .lp-label { color: var(--lp-blue); }

/* Problem cards sur fond dark : look natif inchange */
.lp-light .lp-dark-section .lp-problem-card,
.lp-light .lp-dark-section .lp-step,
.lp-light .lp-dark-section .lp-testi-card,
.lp-light .lp-dark-section .lp-faq-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ===== PROBLEM avec photo (override .lp-dark-section quand classe split) ===== */
.lp-light .lp-problem-split {
    background: var(--lp-bg-accent);
    color: var(--lp-text);
    padding: 6rem 0;
}
.lp-light .lp-problem-split .padding-section-medium { padding: 0; }
.lp-light .lp-problem-split .lp-section-title h2,
.lp-light .lp-problem-split .lp-section-title { color: var(--lp-text); }
.lp-light .lp-problem-split .lp-label { color: var(--lp-blue); }
.lp-light .lp-problem-grid-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}
.lp-light .lp-problem-grid-split img {
    width: 100%;
    height: auto;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-soft);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lp-light .lp-problem-grid-split .lp-problem-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.lp-light .lp-problem-grid-split .lp-problem-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-card);
    padding: 1.5rem;
}
.lp-light .lp-problem-grid-split .lp-problem-card h3 { color: var(--lp-text); }
.lp-light .lp-problem-grid-split .lp-problem-card p { color: var(--lp-text-muted); }

@media (max-width: 900px) {
    .lp-light .lp-problem-grid-split { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===== SOLUTION : fond blanc, plus aere ===== */
.lp-light .lp-solution-section {
    background: var(--lp-bg);
    padding: 6rem 0;
}
.lp-light .lp-solution-section .padding-section-medium { padding: 0; }
.lp-light .lp-solution-section h2,
.lp-light .lp-solution-section .lp-solution-block h2 { color: var(--lp-text); }
.lp-light .lp-solution-section .lp-solution-block p { color: var(--lp-text-muted); }
.lp-light .lp-pillar {
    background: var(--lp-bg-alt);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    box-shadow: none;
}
.lp-light .lp-pillar h3 { color: var(--lp-text); }
.lp-light .lp-pillar p { color: var(--lp-text-muted); }

/* ===== BENEFITS / FORMATS : fond gris pale ===== */
.lp-light .lp-light-section {
    background: var(--lp-bg-alt);
    padding: 6rem 0;
}
.lp-light .lp-light-section + .lp-light-section { padding-top: 0; }
.lp-light .lp-light-section .padding-section-medium { padding: 0; }
.lp-light .lp-light-section .lp-section-title h2 { color: var(--lp-text); }
.lp-light .lp-light-section .lp-section-title p { color: var(--lp-text-muted); }

.lp-light .lp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.lp-light .lp-benefit-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-light .lp-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-soft);
}
.lp-light .lp-benefit-card h3 { color: var(--lp-text); }
.lp-light .lp-benefit-card p { color: var(--lp-text-muted); }

/* Image dans benefit card */
.lp-light .lp-benefit-card-photo {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: calc(var(--lp-radius) - 0.125rem);
    margin-bottom: 1.25rem;
    display: block;
}

/* ===== PROCESS DARK pour rythme contrastant ===== */
.lp-light .lp-process-dark {
    background: var(--lp-bg-dark);
    color: #fff;
    padding: 6rem 0;
}
.lp-light .lp-process-dark .padding-section-medium { padding: 0; }
.lp-light .lp-process-dark .lp-section-title h2 { color: #fff; }
.lp-light .lp-process-dark .lp-section-title p,
.lp-light .lp-process-dark .lp-section-title-sub { color: rgba(255,255,255,0.75); }
.lp-light .lp-process-dark .lp-label { color: var(--lp-blue); }
.lp-light .lp-process-dark .lp-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
}
.lp-light .lp-process-dark .lp-step h3 { color: #fff; }
.lp-light .lp-process-dark .lp-step p { color: rgba(255,255,255,0.75); }
.lp-light .lp-process-dark .lp-step-num { color: var(--lp-blue); }

/* Process light version (sur fond clair) */
.lp-light .lp-light-section .lp-step {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    box-shadow: var(--lp-shadow-card);
}
.lp-light .lp-light-section .lp-step h3 { color: var(--lp-text); }
.lp-light .lp-light-section .lp-step p { color: var(--lp-text-muted); }
.lp-light .lp-light-section .lp-step-num { color: var(--lp-blue); }

/* ===== TESTIMONIALS sur fond clair ===== */
.lp-light .lp-testi-section,
.lp-light .lp-testi-light {
    background: var(--lp-bg);
    padding: 6rem 0;
}
.lp-light .lp-testi-light .padding-section-medium { padding: 0; }
.lp-light .lp-testi-light .lp-section-title h2 { color: var(--lp-text); }
.lp-light .lp-testi-light .lp-section-title p,
.lp-light .lp-testi-light .lp-label { color: var(--lp-blue); }
.lp-light .lp-testi-light .lp-testi-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    box-shadow: var(--lp-shadow-card);
}
.lp-light .lp-testi-light .lp-testi-quote { color: var(--lp-text); }
.lp-light .lp-testi-light .lp-testi-name { color: var(--lp-text); }
.lp-light .lp-testi-light .lp-testi-role { color: var(--lp-text-muted); }
.lp-light .lp-testi-light .lp-testi-result {
    background: var(--lp-bg-accent);
    color: var(--lp-blue);
}

/* ===== FAQ sur fond clair ===== */
.lp-light .lp-faq-light {
    background: var(--lp-bg-alt);
    padding: 6rem 0;
}
.lp-light .lp-faq-light .padding-section-medium { padding: 0; }
.lp-light .lp-faq-light .lp-section-title h2 { color: var(--lp-text); }
.lp-light .lp-faq-light .lp-label { color: var(--lp-blue); }
.lp-light .lp-faq-light .lp-faq-item {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.lp-light .lp-faq-light .lp-faq-q {
    color: var(--lp-text);
    background: transparent;
    padding: 1.25rem 1.5rem;
}
.lp-light .lp-faq-light .lp-faq-q:hover { background: var(--lp-bg-alt); }
.lp-light .lp-faq-light .lp-faq-a { color: var(--lp-text-muted); padding: 0 1.5rem; }
.lp-light .lp-faq-light .lp-faq-a p { color: var(--lp-text-muted); }
.lp-light .lp-faq-light .lp-faq-chevron { stroke: var(--lp-text-muted); }

/* ===== OFFER sur fond clair ===== */
.lp-light .lp-offer {
    background: var(--lp-bg);
    padding: 6rem 0;
}
.lp-light .lp-offer .padding-section-medium { padding: 0; }
.lp-light .lp-offer h2 { color: var(--lp-text); }
.lp-light .lp-offer .lp-offer-intro,
.lp-light .lp-offer .lp-offer-item span { color: var(--lp-text-muted); }
.lp-light .lp-offer .lp-offer-item { color: var(--lp-text); }

/* ===== FINAL CTA fond accent bleu pale ===== */
.lp-light .lp-final-cta {
    background: var(--lp-bg-accent);
    color: var(--lp-text);
    padding: 6rem 0;
}
.lp-light .lp-final-cta h2 { color: var(--lp-text); }
.lp-light .lp-final-cta .lp-label { color: var(--lp-blue); }
.lp-light .lp-final-cta .lp-final-cta-intro { color: var(--lp-text-muted); }
.lp-light .lp-final-cta .lp-reassurance { color: var(--lp-text-muted); }

/* ===== FOOTER ===== */
.lp-light .lp-footer {
    background: var(--lp-bg);
    color: var(--lp-text-muted);
    border-top: 1px solid var(--lp-border);
    padding: 2rem 0;
}
.lp-light .lp-footer p { color: var(--lp-text-muted); }
.lp-light .lp-footer a { color: var(--lp-blue); }

/* ===== "Univers" hub cards (LP3 specifique) ===== */
.lp-light .lp-univers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}
.lp-light .lp-univers-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow-card);
    text-decoration: none;
    color: var(--lp-text);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-light .lp-univers-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-soft);
}
.lp-light .lp-univers-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.lp-light .lp-univers-card-body { padding: 1.5rem; }
.lp-light .lp-univers-card h3 {
    color: var(--lp-text);
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}
.lp-light .lp-univers-card p { color: var(--lp-text-muted); font-size: 0.95rem; margin: 0; }
.lp-light .lp-univers-card-cta {
    color: var(--lp-blue);
    font-weight: 500;
    margin-top: 0.75rem;
    display: inline-block;
}

/* ===== Photo team grid (LP3) ===== */
.lp-light .lp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.lp-light .lp-team-card {
    text-align: center;
}
.lp-light .lp-team-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-card);
    margin-bottom: 0.75rem;
}
.lp-light .lp-team-card .lp-team-name {
    font-weight: 600;
    color: var(--lp-text);
    font-size: 0.95rem;
}
.lp-light .lp-team-card .lp-team-role {
    color: var(--lp-text-muted);
    font-size: 0.85rem;
}

/* ===== Section split generique (photo + texte) ===== */
.lp-light .lp-split-section {
    background: var(--lp-bg);
    padding: 6rem 0;
}
.lp-light .lp-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.lp-light .lp-split-grid.is-reverse > :first-child { order: 2; }
.lp-light .lp-split-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-soft);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lp-light .lp-split-grid h2 { color: var(--lp-text); }
.lp-light .lp-split-grid p { color: var(--lp-text-muted); }

@media (max-width: 900px) {
    .lp-light .lp-split-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .lp-light .lp-split-grid.is-reverse > :first-child { order: 0; }
}

/* ===== Typographie generale en mode light ===== */
.lp-light h2,
.lp-light .lp-section-title h2 { color: var(--lp-text); }
.lp-light p { color: var(--lp-text-muted); }
.lp-light .lp-label { color: var(--lp-blue); }
.lp-light .text-span { color: var(--lp-blue); }

/* Container max-width et padding section uniformes */
.lp-light section { scroll-margin-top: 80px; }

/* Buttons (button.is-third) restent inchanges (bleu biux) */

/* =====================================================================
   HERO DARK OVERRIDE — pattern theme home applique sur les 3 LP
   Garantit que le hero reste DARK meme quand le body porte .lp-light
   ===================================================================== */
.lp-light .hero-section { background: transparent !important; color: #fff !important; }
.lp-light .hero-section h1,
.lp-light .hero-section .heading-style-h1,
.lp-light .hero-section h2,
.lp-light .hero-section p,
.lp-light .hero-section .text-size-regular,
.lp-light .lp-hero-dark,
.lp-light .lp-hero-dark *:not(.text-span):not(img):not(.button):not(.button-texte):not(.button-texte-wrap) {
    color: #fff !important;
}
/* Restore exact theme button styles (pattern home) */
.lp-light .hero-section .button.is-third,
.lp-light .hero-section .button.is-third .button-texte-wrap,
.lp-light .hero-section .button.is-third .button-texte {
    color: #00030f !important;
    background: #eef2ff;
}
.lp-light .hero-section .button.is-third:hover { background: #d9e6fe; }
.lp-light .hero-section .button.is-third .button-texte { background: transparent !important; }
.lp-light .hero-section .text-span { color: var(--blue, #206dff); }
.lp-light .hero-section .lp-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 400;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: fit-content;
}
.lp-light .hero-section .hero-content-contain { padding-top: 9rem; padding-bottom: 5rem; }
.lp-light .hero-section .hero-component { gap: 2rem; }
.lp-light .hero-section .lp-hero-proof {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    flex-wrap: wrap;
}
.lp-light .hero-section .lp-hero-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-light .hero-section .lp-hero-proof-item img {
    height: 1.25rem;
    width: auto;
}
.lp-light .hero-section .lp-hero-proof-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.3);
}
.lp-light .hero-section .button.is-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
}
.lp-light .hero-section .button.is-secondary:hover { border-color: #fff; }

/* Layer gradient hero (override theme par dessus si necessaire) */
.lp-light .hero-section .layer-gradient.is-hero {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,3,15,0.55) 0%, rgba(0,3,15,0.88) 100%);
    z-index: 1;
}
.lp-light .hero-section .hero-bg-img {
    filter: brightness(0.65);
}

@media (max-width: 768px) {
    .lp-light .hero-section .hero-content-contain { padding-top: 6rem; padding-bottom: 3rem; }
    .lp-light .hero-section .lp-hero-proof { font-size: 0.85rem; gap: 0.75rem; }
}

/* =====================================================================
   DEVIS SECTION FIX (BIUX 2.4.9)
   La section devis (.lp-devis-section) reste volontairement SOMBRE.
   Mais les regles generiques light ci-dessus (.lp-light h2 / p / .lp-label,
   chargees APRES lp-motiondesign.css) ecrasaient la couleur du texte et
   le faisaient passer en fonce -> texte noir sur fond noir.
   On restaure ici les couleurs claires, scope a .lp-devis-section.
   ===================================================================== */
.lp-light .lp-devis-section .lp-label { color: #6ea1ff; }
.lp-light .lp-devis-section h2 { color: #fff; }
.lp-light .lp-devis-section .lp-devis-accroche,
.lp-light .lp-devis-section .lp-devis-reassurance li { color: rgba(255, 255, 255, 0.85); }
.lp-light .lp-devis-section .lp-devis-field label { color: rgba(255, 255, 255, 0.85); }
.lp-light .lp-devis-section .lp-devis-field input,
.lp-light .lp-devis-section .lp-devis-field textarea { color: #fff; }
.lp-light .lp-devis-section .lp-devis-legal { color: rgba(255, 255, 255, 0.55); }
.lp-light .lp-devis-section .lp-devis-legal a { color: rgba(255, 255, 255, 0.75); }

/* Le logo de la topbar reste clair quand la topbar (fixe) survole une
   section sombre : la topbar light a deja un fond blanc, mais on garde
   l'inversion qui rend le logo fonce lisible sur ce fond clair. */

/* Check de reassurance : le SVG (viewBox 0 0 14 14) n'avait ni attribut
   width/height ni dimension CSS -> taille intrinseque par defaut (300x150)
   -> enorme check bleu qui debordait sur le texte. On le contraint. */
.lp-light .lp-devis-section .lp-devis-reassurance svg,
.lp-devis-section .lp-devis-reassurance svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}