/* ============================================================
   nekso-custom.css — Personnalisation visuelle Nekso.fr
   Ajout uniquement, aucun fichier original modifié.
   ============================================================ */

/* --- Typographie --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

body { font-family: 'Inter', sans-serif; }

h1, h2, h3, h4, h5, h6,
.section-title, .navbar-brand, .main-btn {
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}

/* --- Logo --- */
.navbar-brand img { max-height: 44px; width: auto; }

/* ── Navbar desktop uniquement (≥ 992px) ── */
@media (min-width: 992px) {
    .header-navbar .col-lg-10 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }

    #mainMenu {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    #mainMenu > li { flex-shrink: 0; }

    .main-menu li a {
        padding: 15px 11px !important;
        font-size: 15px !important;
        white-space: nowrap;
    }

    .main-menu li.dropdown::after { right: 0 !important; }

    .main-menu li.dropdown > a.dropdown-btn {
        padding-right: 15px !important;
    }

    .main-menu li a.boxed-btn {
        padding: 10px 20px !important;
        font-size: 14.5px !important;
        white-space: nowrap;
        margin-left: 10px;
    }
}

/* --- Bouton principal --- */
.main-btn, input[type="submit"], button[type="submit"] {
    border-radius: 3px !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
}

/* --- Feature cards --- */
.single-hero-feature {
    background-color: #191d27 !important;
    border-right: 2px solid #0a0d14 !important;
}
.single-hero-feature:last-child { border-right: none !important; }
.single-hero-feature::after { background-color: #0e111a !important; }

/* --- Hover service card --- */
.single-service:hover {
    border-left: 3px solid #E31E24;
    transition: border-left 0.2s ease;
}

/* --- Blog cards : contour complet visible --- */
.blog-section .owl-stage-outer {
    overflow: visible !important;
    padding: 4px !important;
}
.single-blog::after,
.single-blog::before {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* --- Hero --- */
.hero-area .hero-content h1,
.hero-area .hero-content h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    line-height: 1.1;
}

/* --- Titres section --- */
.section-heading::after,
.section-title-area .section-title::after { background-color: #E31E24; }

/* --- Navbar active --- */
.main-menu ul li.active > a,
.main-menu ul li:hover > a { color: #E31E24 !important; }

/* --- Footer mobile --- */
@media (max-width: 767px) {
    .footer-section .navbar-brand { display: block; text-align: center; margin-bottom: 12px; }
}

/* --- Section approach : full width mobile --- */
@media (max-width: 991px) {
    .approach-section {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .approach-section > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --- Support bar mobile : email + téléphone côte à côte et alignés --- */
@media (max-width: 991px) {
    .support-contact-info {
        display: flex !important;
        justify-content: center !important;
        align-items: baseline !important;
        gap: 20px !important;
        flex-wrap: nowrap !important;
    }
    .support-contact-info .address,
    .support-contact-info .phone {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════ */

/* Base dropdown */
.main-menu li.dropdown ul.dropdown-lists {
    background-color: #0e111a !important;
    border-top: 2px solid #E31E24 !important;
    min-width: 320px;
    top: 58px !important;  /* espace visible entre navbar et dropdown */
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.main-menu li.dropdown ul.dropdown-lists li {
    background-color: #0e111a !important;
}

/* Séparateurs de section */
.main-menu ul.dropdown-lists li:has(a[href="#"]) {
    color: #FF3B3B !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 12px 16px 6px !important;
    border-bottom: 1px solid rgba(227,30,36,0.25) !important;
    margin-bottom: 2px !important;
}

.main-menu ul.dropdown-lists li a[href="#"] {
    pointer-events: none;
    cursor: default;
}

.main-menu ul.dropdown-lists li:has(a[href="#"]):hover,
.main-menu ul.dropdown-lists li:has(a[href="#"]) a:hover {
    background-color: #0e111a !important;
    color: #FF3B3B !important;
}

/* Items normaux : alignement propre */
.main-menu ul.dropdown-lists li a:not([href="#"]) {
    display: flex !important;
    align-items: center !important;
    padding: 9px 20px 9px 28px !important;
    border-left: 2px solid transparent;
    font-size: 13.5px !important;
    transition: border-left 0.15s ease, background-color 0.15s ease;
}

.main-menu ul.dropdown-lists li a:not([href="#"]):hover {
    border-left: 2px solid #E31E24 !important;
    background-color: #141820 !important;
    color: #fff !important;
}

/* ── Icônes FA : styles communs ── */
.main-menu ul.dropdown-lists li a:not([href="#"])::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #E31E24 !important;
    width: 16px !important;
    min-width: 16px !important;
    text-align: center !important;
    margin-right: 20px !important;
    content: "\f105" !important;
    flex-shrink: 0 !important;
}

/* Icônes spécifiques (content !important pour surpasser le thème) */
.main-menu ul.dropdown-lists li a[href*="infogerance"]::before           { content: "\f233" !important; }
.main-menu ul.dropdown-lists li a[href*="support-maintenance"]::before   { content: "\f0ad" !important; }
.main-menu ul.dropdown-lists li a[href*="sauvegarde"]::before            { content: "\f187" !important; }
.main-menu ul.dropdown-lists li a[href*="reseau-cablage"]::before        { content: "\f6ff" !important; }
.main-menu ul.dropdown-lists li a[href*="telephonie"]::before            { content: "\f095" !important; }
.main-menu ul.dropdown-lists li a[href*="cloud-virtualisation"]::before  { content: "\f0c2" !important; }
.main-menu ul.dropdown-lists li a[href*="microsoft-365"]::before         { content: "\f17a" !important; }
.main-menu ul.dropdown-lists li a[href*="logiciels-ebp"]::before         { content: "\f02d" !important; }
.main-menu ul.dropdown-lists li a[href*="pc-portables"]::before          { content: "\f109" !important; }
.main-menu ul.dropdown-lists li a[href*="serveurs-pro"]::before          { content: "\f233" !important; }
.main-menu ul.dropdown-lists li a[href*="imprimantes"]::before           { content: "\f02f" !important; }
.main-menu ul.dropdown-lists li a[href*="developpement-web"]::before     { content: "\f121" !important; }
.main-menu ul.dropdown-lists li a[href*="solutions-ecommerce"]::before   { content: "\f07a" !important; }
.main-menu ul.dropdown-lists li a[href*="marketing-digital"]::before     { content: "\f1e0" !important; }
.main-menu ul.dropdown-lists li a[href*="design-ux"]::before             { content: "\f53f" !important; }
.main-menu ul.dropdown-lists li a[href*="intelligence-artificielle"]::before { content: "\f544" !important; }
.main-menu ul.dropdown-lists li a[href*="audit-conseil"]::before         { content: "\f0b1" !important; }
.main-menu ul.dropdown-lists li a[href*="formation"]::before             { content: "\f19d" !important; }
.main-menu ul.dropdown-lists li a[href*="cybersecurite"]::before         { content: "\f3ed" !important; }
.main-menu ul.dropdown-lists li a[href*="hebergement"]::before           { content: "\f0c2" !important; }

/* ═══════════════════════════════════════════════════════════
   MEGA MENU "Nos Solutions" — centré sur la page
   Les 3 colonnes sont construites en JS (google_analytics_script,
   bloc nekso-megamenu-cols) : le CSS multi-colonnes (columns:3 +
   break-before) donnait un résultat différent selon le navigateur
   (clic bloqué ou en-têtes mal placés sur Firefox). Flexbox avec
   des colonnes DOM réelles est fiable partout.
   ═══════════════════════════════════════════════════════════ */
#mainMenu > li.dropdown:first-child > ul.dropdown-lists {
    position: fixed !important;
    left: 50vw !important;
    transform: translateX(-50%) !important;
    top: 130px !important;
    width: 900px !important;
    min-width: unset !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 8px 0 20px !important;
    z-index: 20 !important;
}

/* Le thème met z-index:-1 sur ces li/a (pensé pour position:absolute) -
   dans notre contexte position:fixed, ça passe les liens derrière le
   fond de la page sur Firefox (clic impossible). On repasse devant. */
#mainMenu > li.dropdown:first-child > ul.dropdown-lists li,
#mainMenu > li.dropdown:first-child > ul.dropdown-lists li > a {
    z-index: 1 !important;
}

/* Une colonne par catégorie, générée en JS */
#mainMenu > li.dropdown:first-child > ul.dropdown-lists > ul.nekso-megamenu-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Bouton devis ── */
.header-btn a, a.header-btn {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
}

/* --- Boutons hero + intro : corrections mobile --- */
@media (max-width: 767px) {
    /* Hero button : texte centré + plus grand */
    .hero-boxed-btn {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 240px !important;
        padding: 16px 36px !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
        border: 2px solid #fff !important;
        background: transparent !important;
        color: #fff !important;
        text-align: center !important;
    }
    /* Intro-btn : texte centré dans le bouton */
    .intro-btn {
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Fix flèche hover intro-btn — flèche positionnée à droite, texte décale gauche */
.intro-txt a::after {
    right: 20px !important;
    opacity: 0;
}
.intro-txt a:hover::after {
    right: 15px !important;
    opacity: 1 !important;
}
.intro-txt a:hover span {
    margin-left: -18px !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0d14; }
::-webkit-scrollbar-thumb { background: #E31E24; border-radius: 3px; }

/* --- Packages --- */
.single-pricing-table .price { display: none !important; }
.single-pricing-table small { display: none !important; }
.pricing-btn { margin-top: 12px !important; display: inline-block; }

/* Uniformiser le fond des 3 cartes */
.single-pricing-table { background: #191d27 !important; border: 1px solid rgba(255,255,255,0.07) !important; }

/* Business (2ème carte) : mise en avant */
.package-column:nth-child(2) .single-pricing-table {
    border: 2px solid #E31E24 !important;
    box-shadow: 0 0 28px rgba(227,30,36,0.22) !important;
    transform: translateY(-6px);
}
.package-column:nth-child(2) .pricing-btn {
    background: #E31E24 !important;
    color: #fff !important;
}

/* ── Masquer adresse physique (pas encore d'adresse officielle) ── */
/* Footer : masquer le li adresse (fa-home) */
.footer-contact-info li:first-child { display: none !important; }

/* Page contact : masquer le bloc adresse */
.contact-form-section .contact-infos .single-info-col:first-child { display: none !important; }

/* Page contact : masquer la carte Google Maps */
.contact-form-section .map-wrapper { display: none !important; }

/* Page contact : formulaire pleine largeur quand la carte est masquée */
.contact-form-section .col-lg-6 { flex: 0 0 100% !important; max-width: 100% !important; }