/* ===== PALETTE CREME — SXM Success Training (hors shop/deepfinder/disway/pulse) ===== */

/* === Ré-écriture variables CSS dark theme → light theme === */
:root {
  --bg-primary: #F7F6F2;
  --bg-secondary: #EDF2FA;
  --glass: rgba(26,34,64,0.05);
  --glass-border: #4A5E90;
  --glass-hover: rgba(26,34,64,0.08);
  --text-primary: #1A2240;
  --text-secondary: #2E3E68;
  --text-muted: #627099;
  --cyan-bright: #2A50A0;
  --cyan-vivid: #1A2240;
  --cyan-pale: #2E3E68;
  --neon-glow: 0 2px 12px rgba(26,34,64,0.12);
  --shadow-electric: 0 4px 20px rgba(26,34,64,0.12);
}

body { background: #F7F6F2 !important; color: #2E3E68; }

h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', system-ui, sans-serif; }

a { color: #2A50A0; }
a:hover { color: #E8B400; text-shadow: none; }

/* === PAGES LEGALES & CONTACT === */
.main-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #1A2240 !important;
    background-clip: unset !important;
    color: #1A2240;
}

.section {
    background: #EDF2FA;
    border: 1px solid #4A5E90;
    box-shadow: 0 2px 12px rgba(26,34,64,0.07);
}
.section:hover {
    box-shadow: 0 6px 24px rgba(26,34,64,0.12);
    transform: translateY(-2px);
}
.section h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #1A2240;
    text-shadow: none;
}
.section p, .section li { color: #2E3E68; }
.section strong { color: #1A2240; }
.section a { color: #2A50A0; }
.section a:hover { color: #E8B400; }

.contact-form { background: #EDF2FA; border: 1px solid #4A5E90; }
.form-group label { color: #2E3E68; }
.form-group input, .form-group textarea, .form-group select {
    background: #F7F6F2;
    border: 1px solid #4A5E90;
    color: #1A2240;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: #E8B400;
    box-shadow: 0 0 0 3px rgba(232,180,0,0.15);
}
.form-group select option { background: #F7F6F2; color: #1A2240; }

.button {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    background: linear-gradient(135deg, #B89400 0%, #E8B400 60%, #F5D060 100%);
    color: #1A2240;
}

/* === PAGES SERVICES (contenu) === */
.service-page { padding-top: 70px; }
.service-content { background: #F7F6F2; }

.service-main h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #1A2240 !important;
    text-shadow: none !important;
}
.service-main h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #2E3E68;
    text-shadow: none;
}
.service-main p { color: #2E3E68; }

.service-feature {
    background: #EDF2FA;
    border: 1px solid #4A5E90;
    overflow: visible;
}
.service-feature:hover { box-shadow: 0 6px 24px rgba(26,34,64,0.12); border-color: #E8B400; }
.service-feature h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #1A2240 !important;
    text-shadow: none !important;
    font-weight: 700;
    font-size: 1.05rem;
}
.service-feature p { color: #1A2240; font-weight: 500; font-size: 0.95rem; }

.sidebar-card { background: #EDF2FA; border: 1px solid #4A5E90; }
.sidebar-card:hover { box-shadow: 0 6px 24px rgba(26,34,64,0.12); border-color: #E8B400; }
.sidebar-card h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #1A2240;
    text-shadow: none;
    border-bottom-color: #4A5E90;
}
.sidebar-card li { color: #2E3E68; }
.sidebar-card li::before { color: #E8B400; }
.sidebar-links a { color: #2A50A0; }
.sidebar-links a:hover { color: #E8B400; text-shadow: none; }

.service-label {
    background: #E8B400;
    color: #1A2240;
    border-radius: 100px;
}

/* Service hero conserve son fond sombre — texte blanc/or explicite */
.service-hero h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: #E8B400;
    text-shadow: 0 0 30px rgba(232,180,0,0.35);
}
.service-intro { color: rgba(255,255,255,0.82); }

.service-cta {
    background: #EDF2FA !important;
    border: 1px solid #4A5E90 !important;
}
.service-cta h3 { font-family: 'Space Grotesk', system-ui, sans-serif; color: #1A2240; }
.service-cta p { color: #2E3E68; }
.service-cta .btn-whatsapp { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* breadcrumb */
.breadcrumb { color: #627099; }
.breadcrumb a { color: #2A50A0; }
.breadcrumb a:hover { color: #E8B400; }

/* footer */
.footer { border-top-color: #4A5E90; }
.footer-copy { color: #627099; }
.footer-links a { color: #627099; }
.footer-links a:hover { color: #2A50A0; text-shadow: none; }

/* === CONTACT PAGE — zone contact-info + footer ===*/
.contact-info p { color: #2E3E68; }
.contact-info a { color: #2A50A0; }
.contact-info a:hover { color: #E8B400; }

/* footer lisible sur fond clair */
.footer-copy { color: #2E3E68; }
.footer-links a { color: #2E3E68; }
.footer-links a:hover { color: #2A50A0; text-shadow: none; }

/* === SERVICE HERO — image pleine largeur + overlay translucide === */
/* Le hero est position:relative, l'image est en absolute inset:0,
   l'overlay ::after est au z-index 1, le texte est au z-index 2.      */
.service-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 420px !important;
    height: 420px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.service-hero .container {
    display: block !important;
    position: static !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
}
.service-hero-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 640px;
}
/* Image maintenant en background-image sur .service-hero → div masqué */
.service-hero-image { display: none !important; }
/* Overlay uniquement sur la zone texte à gauche — transparent à droite */
.service-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(7,9,26,0.90) 0%,
        rgba(7,9,26,0.88) 30%,
        rgba(7,9,26,0.55) 52%,
        rgba(7,9,26,0.00) 65%,
        rgba(7,9,26,0.00) 100%);
    pointer-events: none;
}

/* paragraphes service — contraste maximum */
.service-main p { color: #1A2240 !important; }
.service-main h3 { color: #1A2240 !important; text-shadow: none !important; }

/* === HEADER navigation — fond sombre conservé, texte blanc comme landing === */
.header {
    border-bottom-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
.nav-link {
    color: rgba(255,255,255,0.78) !important;
}
.nav-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
}

/* === SERVICE PAGES — adaptation hero mobile/tablette === */
@media (max-width: 900px) {
    /* Overlay */
    .service-hero::after {
        background: linear-gradient(to bottom,
            rgba(7,9,26,0.88) 0%,
            rgba(7,9,26,0.80) 50%,
            rgba(7,9,26,0.40) 100%) !important;
    }
    .service-hero-content { max-width: 100% !important; }
    .service-page { padding-top: 70px !important; }
    .service-hero { padding: 28px 0 24px !important; min-height: 300px !important; height: 300px !important; }
    .service-content { padding-top: 8px !important; }
    .service-grid { gap: 20px !important; }
    .service-main { padding-top: 16px !important; order: -1 !important; }   /* article en premier */
    .service-sidebar { order: 1 !important; }                                 /* sidebar en dessous */
    .service-main h2 { scroll-margin-top: 80px; }
}

/* === HEADER MOBILE — bouton WhatsApp et logo (service pages) === */
@media (max-width: 768px) {
    .header-inner {
        gap: 12px;
    }
    .logo {
        height: 36px;
        width: auto;
        flex-shrink: 0;
    }
    .header .btn,
    .header .btn-whatsapp {
        width: auto !important;
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 0.82rem;
    }
    .header .btn-whatsapp span {
        display: none;
    }
}

/* === SERVICE PAGES 768px — précisions supplémentaires mobile étroit === */
@media (max-width: 768px) {
    /* Landing : hero-visual masqué (logo-card inutile sur mobile) */
    .hero-visual { display: none !important; }

    /* Overlay légèrement éclairci */
    .service-hero::after {
        background: linear-gradient(to bottom,
            rgba(7,9,26,0.70) 0%,
            rgba(7,9,26,0.60) 55%,
            rgba(7,9,26,0.25) 100%) !important;
    }
    .service-hero { padding: 20px 0 18px !important; min-height: 240px !important; height: 240px !important; }
    /* Chapô masqué — h1 seul reste visible */
    .service-hero .service-intro { display: none !important; }
}