/* ============================================================
   DEPANNAGE PAGE — SUNSET ACCENT OVERRIDES
   Gradient: #f472b6 (pink) → #fb923c (orange)
   Scope: page-depannage uniquement
   ============================================================ */

/* --- Page background #060d19 — global override --- */
body.page-template-page-depannage,
body.page-depannage-informatique,
body.page-depannage {
    background-color: #060d19 !important;
}

/* Sections principales */
body.page-template-page-depannage .mn-hero,
body.page-template-page-depannage .services-section,
body.page-template-page-depannage .services-section.violet-section,
body.page-template-page-depannage .pricing-section,
body.page-template-page-depannage .faq-section,
body.page-template-page-depannage .faq-section.violet-faq,
body.page-template-page-depannage .cta-section,
body.page-template-page-depannage .related-section,
body.page-template-page-depannage .dep-avantages,
body.page-template-page-depannage section {
    background-color: #060d19 !important;
    background-image: none !important;
}

/* Hero inner → même largeur que services-grid (1300px) */
body.page-template-page-depannage .mn-hero-inner {
    max-width: 1300px !important;
}

/* Hero inner + card */
body.page-template-page-depannage .mn-hero-inner,
body.page-template-page-depannage .mn-hero-card,
body.page-template-page-depannage .mn-hero-card-body,
body.page-template-page-depannage .subpage-hero-bg {
    background-color: #060d19 !important;
}

/* Wrappers / containers */
body.page-template-page-depannage main,
body.page-template-page-depannage .site-content,
body.page-template-page-depannage .main-content,
body.page-template-page-depannage #content,
body.page-template-page-depannage #primary {
    background-color: #060d19 !important;
}

/* Dep-avantages inner conserve sa bordure */
body.page-template-page-depannage .dep-av-inner {
    background: #060d19 !important;
}

/* Cartes — fond légèrement teinté sunset */
body.page-template-page-depannage .dep-av-card {
    background: rgba(244, 114, 182, 0.04) !important;
}

/* Pricing, FAQ, CTA fond forcé */
body.page-template-page-depannage .pricing-section[style],
body.page-template-page-depannage .faq-section[style] {
    background: #060d19 !important;
}

/* --- Hero Card borders → Sunset --- */
body.page-template-page-depannage .mn-hero-card {
    border-color: rgba(244, 114, 182, 0.2) !important;
}

body.page-template-page-depannage .mn-hero-card-header {
    border-bottom-color: rgba(244, 114, 182, 0.15) !important;
}

body.page-template-page-depannage .mn-hero-card-footer {
    border-top-color: rgba(244, 114, 182, 0.15) !important;
}

/* --- Violet text → Sunset gradient text --- */
.violet-text {
    background: linear-gradient(90deg, #f472b6, #fb923c) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* --- Section Badge --- */
.section-badge.violet {
    background: rgba(244, 114, 182, 0.1) !important;
    border-color: rgba(244, 114, 182, 0.3) !important;
    color: #f472b6 !important;
}

.section-badge.violet::before {
    background: #f472b6 !important;
    box-shadow: 0 0 8px #f472b6 !important;
}

/* --- Hero Feature badges --- */
.hero-feature.violet {
    border-color: rgba(244, 114, 182, 0.2) !important;
    background: rgba(244, 114, 182, 0.05) !important;
}

.feature-check.violet {
    color: #fb923c !important;
}

/* --- Buttons Primary --- */
.btn.btn-primary.violet {
    background: linear-gradient(135deg, #f472b6 0%, #fb923c 100%) !important;
    border-color: #f472b6 !important;
}

.btn.btn-primary.violet:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f472b6 100%) !important;
    box-shadow: 0 0 30px rgba(244, 114, 182, 0.4) !important;
}

/* --- Buttons Secondary --- */
.btn.btn-secondary.violet {
    border-color: rgba(244, 114, 182, 0.5) !important;
    color: #f472b6 !important;
}

.btn.btn-secondary.violet:hover {
    background: rgba(244, 114, 182, 0.1) !important;
    border-color: #f472b6 !important;
}

/* --- Service Cards --- */
.service-card.violet-card {
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.service-card.violet-card:hover {
    border-color: rgba(244, 114, 182, 0.5) !important;
    box-shadow: 0 10px 40px rgba(244, 114, 182, 0.15) !important;
}

.service-card.violet-card .card-icon.violet {
    border-color: rgba(244, 114, 182, 0.3) !important;
    background: rgba(244, 114, 182, 0.1) !important;
}

.service-card.violet-card .card-icon.violet::before {
    background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.5), transparent) !important;
}

.service-card.violet-card .card-icon.violet svg {
    stroke: #f472b6 !important;
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.4)) !important;
}

/* --- Card Header --- */
.card-header.violet {
    border-bottom-color: rgba(244, 114, 182, 0.2) !important;
}

.card-header.violet .card-code {
    color: #f472b6 !important;
}

/* --- Signal Bars --- */
.signal-bars.violet .signal-bar {
    background: rgba(244, 114, 182, 0.3) !important;
}

.signal-bars.violet .signal-bar:nth-child(-n+3) {
    background: #f472b6 !important;
}

/* --- Status Badge --- */
.status-badge.violet {
    color: #f472b6 !important;
}

.status-badge.violet .status-dot {
    background: #f472b6 !important;
    box-shadow: 0 0 8px #f472b6 !important;
}

/* --- Card Subtitle --- */
.card-subtitle {
    color: rgba(244, 114, 182, 0.6) !important;
}

/* --- Card Features --- */
body.page-template-page-depannage .card-features.violet li::before {
    background: #f472b6 !important;
    color: #f472b6 !important;
}

/* --- Card Price --- */
.card-price span {
    color: #f472b6 !important;
}

/* --- Card Button --- */
.card-button.violet,
.services-grid .card-button.violet,
.services-grid .service-card .card-button.violet {
    border-color: rgba(244, 114, 182, 0.3) !important;
    color: #f472b6 !important;
    background: rgba(244, 114, 182, 0.08) !important;
}

.card-button.violet:hover,
.services-grid .card-button.violet:hover,
.services-grid .service-card .card-button.violet:hover {
    background: rgba(244, 114, 182, 0.15) !important;
    border-color: #f472b6 !important;
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.2) !important;
}

/* --- ALL Services Grid Buttons → Sunset --- */
.services-grid .card-button,
.services-grid .service-card .card-button {
    border-color: rgba(244, 114, 182, 0.3) !important;
    color: #f472b6 !important;
    background: rgba(244, 114, 182, 0.08) !important;
}

.services-grid .card-button:hover,
.services-grid .service-card .card-button:hover {
    background: rgba(244, 114, 182, 0.15) !important;
    border-color: #f472b6 !important;
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.2) !important;
}

/* --- Pricing Section --- */
.pricing-card {
    background: linear-gradient(135deg, rgba(80, 20, 40, 0.3) 0%, rgba(50, 15, 25, 0.5) 100%) !important;
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.pricing-card:hover {
    border-color: rgba(244, 114, 182, 0.4) !important;
}

.pricing-card.featured {
    border-color: #f472b6 !important;
    background: linear-gradient(135deg, rgba(100, 30, 50, 0.4) 0%, rgba(60, 20, 30, 0.6) 100%) !important;
}

.pricing-badge {
    background: linear-gradient(90deg, #f472b6, #fb923c) !important;
}

.pricing-header {
    border-bottom-color: rgba(244, 114, 182, 0.2) !important;
}

.price-value {
    color: #f472b6 !important;
}

.pricing-features li {
    border-bottom-color: rgba(244, 114, 182, 0.1) !important;
}

.pricing-features li::before {
    color: #f472b6 !important;
}

.pricing-button {
    border-color: rgba(244, 114, 182, 0.4) !important;
    color: #f472b6 !important;
}

.pricing-button:hover {
    background: rgba(244, 114, 182, 0.1) !important;
    border-color: #f472b6 !important;
}

.pricing-button.featured {
    background: linear-gradient(135deg, #f472b6 0%, #fb923c 100%) !important;
    border-color: #f472b6 !important;
    color: #fff !important;
}

.pricing-button.featured:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f472b6 100%) !important;
    box-shadow: 0 0 20px rgba(244, 114, 182, 0.4) !important;
}

/* --- Advantage Cards --- */
.advantage-card {
    background: linear-gradient(135deg, rgba(80, 20, 40, 0.3) 0%, rgba(50, 15, 25, 0.5) 100%) !important;
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.advantage-card:hover {
    border-color: rgba(244, 114, 182, 0.4) !important;
}

.advantage-card h3 {
    color: #f472b6 !important;
}

/* --- FAQ Section --- */
.faq-item.violet {
    background: linear-gradient(135deg, rgba(80, 20, 40, 0.3) 0%, rgba(50, 15, 25, 0.5) 100%) !important;
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.faq-item.violet .faq-question {
    color: #f472b6 !important;
}

.faq-item.violet .faq-question::after {
    color: #f472b6 !important;
}

/* --- Related Cards --- */
.related-card.violet {
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.related-card.violet:hover {
    border-color: rgba(244, 114, 182, 0.5) !important;
    background: rgba(244, 114, 182, 0.05) !important;
}

.related-card.violet h3 {
    color: #f472b6 !important;
}

.related-card.violet .related-arrow {
    color: #f472b6 !important;
}

.related-card.violet .related-icon,
.related-grid .related-card.violet .related-icon {
    color: #f472b6 !important;
}

.related-card.violet .related-icon svg,
.related-grid .related-card.violet .related-icon svg {
    stroke: #f472b6 !important;
}

/* --- ALL Related Grid Icons → Sunset --- */
.related-grid .related-icon,
.related-grid .related-card .related-icon {
    color: #f472b6 !important;
}

.related-grid .related-icon svg,
.related-grid .related-card .related-icon svg {
    stroke: #f472b6 !important;
}

.related-grid .related-card .related-arrow {
    color: #f472b6 !important;
}

.related-grid .related-card h3 {
    color: #f472b6 !important;
}

.related-grid .related-card {
    border-color: rgba(244, 114, 182, 0.2) !important;
}

.related-grid .related-card:hover {
    border-color: rgba(244, 114, 182, 0.5) !important;
    background: rgba(244, 114, 182, 0.05) !important;
}

/* --- CTA Section --- */
.cta-card.violet {
    border-color: rgba(244, 114, 182, 0.3) !important;
    background: linear-gradient(135deg, rgba(80, 20, 40, 0.3) 0%, rgba(50, 15, 25, 0.5) 100%) !important;
}

.cta-info.violet .cta-info-item span:first-child {
    color: #f472b6 !important;
}

/* --- Hero Card Status Bar --- */
.mn-status-value {
    color: #f472b6 !important;
}

.mn-active-dot {
    background: #f472b6 !important;
    box-shadow: 0 0 8px #f472b6 !important;
}

.mn-signal-bar {
    background: rgba(244, 114, 182, 0.3) !important;
}

.mn-signal-bar:nth-child(-n+3) {
    background: #f472b6 !important;
}

/* --- Hero Card decorative top border --- */
.mn-hero-card::before {
    background: linear-gradient(90deg, transparent, #f472b6, #fb923c, transparent) !important;
}

/* --- Depannage Visual (diagnostic rings) --- */
.diag-ring {
    border-color: rgba(244, 114, 182, 0.3) !important;
}

.diag-scan {
    background: linear-gradient(to bottom, rgba(244, 114, 182, 0.3), transparent) !important;
}

/* --- Pricing Section background gradient --- */
.pricing-section {
    background: linear-gradient(180deg, #0a0812 0%, #1a0812 100%) !important;
}

/* --- FAQ Section background gradient --- */
.faq-section.violet-faq {
    background: linear-gradient(180deg, #1a0812 0%, #0a0812 100%) !important;
}

/* --- Cyber grid violet → sunset --- */
.cyber-grid.violet {
    background-image:
        linear-gradient(rgba(244, 114, 182, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 114, 182, 0.03) 1px, transparent 1px) !important;
}

/* ============================================================
   ZONE D'INTERVENTION — Grille de villes
   ============================================================ */
.dep-zone-section {
    padding: 80px 24px;
}

.dep-zone-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.dep-villes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 40px 0 24px;
}

.dep-ville {
    background: rgba(244, 114, 182, 0.06);
    border: 1px solid rgba(244, 114, 182, 0.12);
    border-radius: 8px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.dep-ville:hover {
    background: rgba(244, 114, 182, 0.12);
    border-color: rgba(244, 114, 182, 0.3);
    color: #fff;
}

.dep-zone-note {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .dep-villes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dep-villes-grid {
        grid-template-columns: 1fr;
    }
}