/* ============================================
   POURQUOI INSUFFLE — Styles dédiés
   Page pilier fond blanc avec panneaux dark
   ============================================ */


/* ── DARK SECTIONS — Override parent theme .bg-white rules ──
   main.bundle.css loads AFTER this file and has:
   .bg-white h1,.bg-white h2,...{ color:#02040a !important } (spec 0,1,1)
   .bg-white p,.bg-white li,.bg-white span...{ color:#02040a !important }
   Fix: use section.pqi-dark (spec 0,1,2) to beat .bg-white (0,1,1) ── */
section.pqi-dark {
    color: #ffffff !important;
}
section.pqi-dark h1,
section.pqi-dark h2,
section.pqi-dark h3,
section.pqi-dark h4,
section.pqi-dark p,
section.pqi-dark span,
section.pqi-dark blockquote,
section.pqi-dark a,
section.pqi-dark li,
section.pqi-dark time,
section.pqi-dark div {
    color: inherit !important;
}
/* Gradient text needs transparent, not white */
section.pqi-dark .pqi-gradient-text,
.pqi-gradient-text {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* Restore specific colors inside dark sections */
section.pqi-dark .text-gray-400 { color: rgb(156 163 175) !important; }
section.pqi-dark .text-gray-500 { color: rgb(107 114 128) !important; }
section.pqi-dark .text-brand-accent { color: #ffde59 !important; }
section.pqi-dark .text-brand-muted { color: #94a3b8 !important; }
section.pqi-dark .text-white\/90 { color: rgba(255,255,255,0.9) !important; }
section.pqi-dark .text-brand-dark { color: var(--color-brand-dark, #0a0f1e) !important; }


/* ── SLIDING PANELS — Same specificity fix ── */
div.pqi-panel {
    color: #ffffff !important;
}
div.pqi-panel h3,
div.pqi-panel h4,
div.pqi-panel p,
div.pqi-panel span,
div.pqi-panel a,
div.pqi-panel li,
div.pqi-panel strong,
div.pqi-panel div {
    color: inherit !important;
}
div.pqi-panel .text-brand-accent { color: #ffde59 !important; }
div.pqi-panel .text-gray-400 { color: rgb(156 163 175) !important; }
div.pqi-panel .text-blue-400 { color: rgb(96 165 250) !important; }
div.pqi-panel .text-green-400 { color: rgb(74 222 128) !important; }
div.pqi-panel .text-brand-dark { color: var(--color-brand-dark, #0a0f1e) !important; }


/* ── SCROLL ANIMATIONS ── */
[data-anim] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-anim="fade"] {
    transform: translateY(30px);
}
[data-anim="slide-right"] {
    transform: translateX(-40px);
}
[data-anim="slide-left"] {
    transform: translateX(40px);
}
[data-anim].is-visible {
    opacity: 1 !important;
    transform: none !important;
}
/* Fallback: if JS hasn't kicked in, show everything */
.pqi-anim-fallback [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ── HERO VIDEO ── */
.pqi-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.08;
    pointer-events: none;
    filter: blur(3px);
}


/* ── SECTION IMAGES ── */
.pqi-section-image {
    border-radius: 1rem;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* ── PANNEAUX COULISSANTS ── */
.pqi-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,222,89,0.3) transparent;
    box-shadow: none;
}
.pqi-panel::-webkit-scrollbar {
    width: 6px;
}
.pqi-panel::-webkit-scrollbar-track {
    background: transparent;
}
.pqi-panel::-webkit-scrollbar-thumb {
    background: rgba(255,222,89,0.3);
    border-radius: 3px;
}
.pqi-panel.is-open {
    transform: translateX(0) !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}

#pqi-overlay.is-visible {
    opacity: 1;
}

/* Body lock quand panneau ouvert */
body.pqi-panel-open {
    overflow: hidden;
}


/* ── EXPERTISE CARDS ── */
.pqi-card {
    position: relative;
}
.pqi-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(31,58,139,0.15);
}
.pqi-card:hover::after {
    opacity: 1;
}


/* ── COMPTEURS ── */
.pqi-counter-card {
    position: relative;
}


/* ── TIMELINE ODCT ── */
.pqi-timeline-item:last-child {
    padding-bottom: 0 !important;
}


/* ── FAQ ACCORDION ── */
.pqi-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.pqi-faq-content.is-open {
    display: block !important;
}
.pqi-faq-icon.is-rotated {
    transform: rotate(180deg);
}


/* ── MARQUEE CLIENTS ── */
.pqi-marquee {
    animation: pqi-marquee-scroll 40s linear infinite;
    width: max-content;
}
@keyframes pqi-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.pqi-marquee:hover {
    animation-play-state: paused;
}


/* ── QUOTE BOX (dark box dans section blanche) ── */
div.pqi-quote-box {
    color: #ffffff !important;
}
div.pqi-quote-box blockquote,
div.pqi-quote-box p,
div.pqi-quote-box span,
div.pqi-quote-box div {
    color: inherit !important;
}
div.pqi-quote-box .text-brand-accent { color: #ffde59 !important; }
div.pqi-quote-box .text-gray-400 { color: rgb(156 163 175) !important; }


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .pqi-panel {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    .pqi-panel {
        max-width: 520px;
    }
}


/* ── PRINT ── */
@media print {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
    }
    .pqi-panel,
    #pqi-overlay,
    .pqi-panel-close,
    .animate-bounce,
    .animate-pulse,
    .pqi-hero-video {
        display: none !important;
    }
    .pqi-marquee {
        animation: none !important;
    }
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .pqi-faq-content {
        max-height: none !important;
        display: block !important;
    }
}